@progress/kendo-react-dropdowns 7.0.0-develop.3 → 7.0.0-develop.4

package/index.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import * as o from "react";
 import * as l from "prop-types";
-import { IconWrap as ke, classNames as B, Keys as m, guid as Fe, svgIconPropType as gs, createPropsContext as Ke, withPropsContext as wt, validatePackage as qe, canUseDOM as Me, getTabIndex as $t, kendoThemeMaps as $e, getActiveElement as Ss, usePropsContext as Gt, getScrollbarWidth as ws, getter as kt, setScrollbarWidth as Es, useRtl as fs, noop as De, mapTree as Ds, extendDataItem as Ts } from "@progress/kendo-react-common";
+import { IconWrap as ke, classNames as B, Keys as f, guid as Fe, svgIconPropType as gs, createPropsContext as Ke, withPropsContext as wt, validatePackage as qe, canUseDOM as Me, getTabIndex as $t, kendoThemeMaps as $e, getActiveElement as Ss, usePropsContext as Gt, getScrollbarWidth as ws, getter as kt, setScrollbarWidth as Es, useRtl as fs, noop as De, mapTree as Ds, extendDataItem as Ts } from "@progress/kendo-react-common";
 import { FloatingLabel as Ge } from "@progress/kendo-react-labels";
 import { searchIcon as Fs, caretAltDownIcon as Ut, xIcon as at, plusIcon as Ms } from "@progress/kendo-svg-icons";
 import { Popup as jt, PopupPropsContext as Ns } from "@progress/kendo-react-popup";
@@ -90,12 +90,12 @@ const G = (i) => i != null, Bs = (i, t) => {
   let s = String(i);
   return e && (s = s.toLowerCase()), s.indexOf(t) === 0;
 }, Ks = (i, t, e, s, n) => {
-  const a = i.offsetHeight, c = t.children.item(e), p = c.offsetTop + (n ? s - i.scrollTop : 0), d = c.offsetHeight;
+  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;
-    p + d > a ? r = p + d - a : p < 0 && (r = p), r !== 0 ? i.scrollTop += r : i.scrollTop === 0 && s !== 0 && (i.scrollTop = s);
+    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
-    p + d > a + i.scrollTop ? i.scrollTop = p + d - a : p < i.scrollTop && (i.scrollTop -= i.scrollTop - p);
+    c + d > a + i.scrollTop ? i.scrollTop = c + d - a : c < i.scrollTop && (i.scrollTop -= i.scrollTop - c);
 }, Ve = (i, t, e) => {
   let s = -1;
   if (t) {
@@ -141,7 +141,7 @@ const G = (i) => i != null, Bs = (i, t) => {
     return s !== -1 ? i[s] : i[Ve(i, t, e)];
   }
   return i[0];
-}, Hs = (i, t = [], e) => {
+}, zs = (i, t = [], e) => {
   let s = "";
   if (i) {
     const n = t[Ve(t, i, e)];
@@ -151,7 +151,7 @@ const G = (i) => i != null, Bs = (i, t) => {
     }
   }
   return s;
-}, zs = (i) => {
+}, Hs = (i) => {
   i.target.nodeName !== "INPUT" && i.preventDefault();
 }, xt = (i, t, e) => !!i != !!t || i.text !== t.text ? !1 : i === t || Ls(i.data, t.data, e), As = (i) => i.preventDefault();
 class Ws extends o.Component {
@@ -186,20 +186,20 @@ class qs extends o.Component {
       dataItem: s,
       virtual: n,
       groupMode: a,
-      disabled: c,
-      render: p
+      disabled: p,
+      render: c
     } = this.props, d = /* @__PURE__ */ o.createElement(
       "li",
       {
         id: this.props.id,
         role: "option",
         "aria-selected": t,
-        "aria-disabled": c ? !0 : void 0,
+        "aria-disabled": p ? !0 : void 0,
         className: B("k-list-item", {
           "k-selected": t,
           "k-focus": this.props.focused,
           "k-first": !!e && a === "classic",
-          "k-disabled": c
+          "k-disabled": p
         }),
         onClick: this.handleClick,
         style: { position: n ? "relative" : "unset" }
@@ -207,7 +207,7 @@ class qs extends o.Component {
       /* @__PURE__ */ o.createElement("span", { className: "k-list-item-text" }, V(s, this.props.textField).toString()),
       e !== void 0 && a === "classic" ? /* @__PURE__ */ o.createElement("div", { className: "k-list-item-group-label" }, e) : null
     );
-    return p !== void 0 ? p.call(void 0, d, this.props) : d;
+    return c !== void 0 ? c.call(void 0, d, this.props) : d;
   }
 }
 class $s extends o.Component {
@@ -230,12 +230,12 @@ class $s extends o.Component {
     return s !== void 0 ? s.call(void 0, a, this.props) : a;
   }
 }
-const fe = "dropdowns.nodata", it = "dropdowns.clear", Lt = "dropdowns.comboArrowBtnAriaLabelExpand", Ht = "dropdowns.comboArrowBtnAriaLabelCollapse", zt = "dropdowns.dropDownListArrowBtnAriaLabel", nt = "dropdowns.apply", ot = "dropdowns.cancel", le = {
+const fe = "dropdowns.nodata", it = "dropdowns.clear", Lt = "dropdowns.comboArrowBtnAriaLabelExpand", zt = "dropdowns.comboArrowBtnAriaLabelCollapse", Ht = "dropdowns.dropDownListArrowBtnAriaLabel", nt = "dropdowns.apply", ot = "dropdowns.cancel", le = {
   [it]: "clear",
   [fe]: "NO DATA FOUND.",
   [Lt]: "expand combobox",
-  [Ht]: "collapse combobox",
-  [zt]: "select",
+  [zt]: "collapse combobox",
+  [Ht]: "select",
   [nt]: "Apply",
   [ot]: "Cancel"
 };
@@ -247,25 +247,25 @@ class Ue extends o.Component {
       groupField: s,
       groupMode: n,
       isMultiColumn: a,
-      optionsGuid: c,
-      skip: p = 0,
+      optionsGuid: p,
+      skip: c = 0,
       virtual: d,
       focusedIndex: r,
       highlightSelected: h = !0,
-      value: g,
-      data: u,
-      itemRender: f,
+      value: u,
+      data: g,
+      itemRender: m,
       groupHeaderItemRender: v
-    } = this.props, b = Array.isArray(g);
+    } = this.props, b = Array.isArray(u);
     let w = 0;
-    return u.map((S, D) => {
-      const N = p + D, O = p + D + w, _ = S.disabled ? !1 : h && (!b && R(S, g, e) || b && g.findIndex((E) => R(E, S, e)) !== -1);
+    return g.map((S, D) => {
+      const N = c + D, O = c + D + w, _ = S.disabled ? !1 : h && (!b && R(S, u, e) || b && u.findIndex((E) => R(E, S, e)) !== -1);
       let C, F, x;
-      return D > 0 && s !== void 0 && (F = V(S, s), x = V(u[D - 1], s), F && x && F !== x && (C = F)), C !== void 0 && n === "modern" && (w += 1), [
+      return D > 0 && s !== void 0 && (F = V(S, s), x = V(g[D - 1], s), F && x && F !== x && (C = F)), C !== void 0 && n === "modern" && (w += 1), [
         C !== void 0 && n === "modern" && /* @__PURE__ */ o.createElement(
           $s,
           {
-            id: `option-${c}-${O}`,
+            id: `option-${p}-${O}`,
             virtual: d,
             key: N + "-group-item",
             group: C,
@@ -276,7 +276,7 @@ class Ue extends o.Component {
         /* @__PURE__ */ o.createElement(
           qs,
           {
-            id: `option-${c}-${C !== void 0 && n === "modern" ? O + 1 : O}`,
+            id: `option-${p}-${C !== void 0 && n === "modern" ? O + 1 : O}`,
             virtual: d,
             dataItem: S,
             groupMode: n,
@@ -287,7 +287,7 @@ class Ue extends o.Component {
             onClick: this.props.onClick,
             textField: t,
             group: C,
-            render: f,
+            render: m,
             disabled: S.disabled
           }
         )
@@ -299,8 +299,18 @@ class Ue extends o.Component {
     return e ? e.call(void 0, s) : s;
   }
   render() {
-    const t = Ae(this), { id: e, show: s, wrapperCssClass: n, wrapperStyle: a, listStyle: c, listRef: p, wrapperRef: d, listClassName: r = "k-list-ul" } = this.props, h = this.renderItems();
-    return h.length ? /* @__PURE__ */ o.createElement(
+    const t = Ae(this), {
+      id: e,
+      show: s,
+      wrapperCssClass: n,
+      wrapperStyle: a,
+      listStyle: p,
+      listRef: c,
+      wrapperRef: d,
+      listClassName: r = "k-list-ul",
+      ariaSetSize: h
+    } = this.props, u = this.renderItems();
+    return u.length ? /* @__PURE__ */ o.createElement(
       "div",
       {
         className: n,
@@ -317,11 +327,12 @@ class Ue extends o.Component {
           id: e,
           role: "listbox",
           "aria-hidden": s ? void 0 : !0,
+          "aria-setsize": h,
           className: r,
-          ref: p,
-          style: c
+          ref: c,
+          style: p
         },
-        h
+        u
       ),
       this.props.scroller && /* @__PURE__ */ o.createElement("div", { className: "k-height-container" }, this.props.scroller)
     ) : this.renderNoValueElement(t);
@@ -360,9 +371,9 @@ class Us {
   }
   localScrollUp(t) {
     const e = this.itemHeight, s = this.container.scrollTop;
-    let n = this.listTranslate, a, c = s - n;
-    if (!(c > e)) {
-      for (a = 0; a < this.skip && !(n + e + c <= s); a++)
+    let n = this.listTranslate, a, p = s - n;
+    if (!(p > e)) {
+      for (a = 0; a < this.skip && !(n + e + p <= s); a++)
         n -= e;
       if (n = this.validateTranslate(n), this.skip - a <= 0 && n >= s) {
         this.translateTo(0), this.changePage(0, t), this.container.scrollTop = 0;
@@ -375,10 +386,10 @@ class Us {
     const e = this.itemHeight;
     let s = this.container.scrollTop, n = this.listTranslate;
     const a = this.list.children.length;
-    let c;
-    for (c = 0; c < a && !(n + e >= s); c++)
+    let p;
+    for (p = 0; p < a && !(n + e >= s); p++)
       n += e;
-    n = this.validateTranslate(n), c >= a && this.skip + c >= this.total ? (this.translateTo(n), this.changePage(this.total - 1, t)) : n !== this.listTranslate && (this.translateTo(n), this.changePage(this.skip + c, t));
+    n = this.validateTranslate(n), p >= a && this.skip + p >= this.total ? (this.translateTo(n), this.changePage(this.total - 1, t)) : n !== this.listTranslate && (this.translateTo(n), this.changePage(this.skip + p, t));
   }
   scrollNonStrict(t) {
     const e = this.total * this.prevScrollPos / this.containerHeight, s = Math.min(Math.floor(e), this.total - 1);
@@ -396,13 +407,13 @@ class Us {
 class js {
   navigate(t) {
     const e = t.keyCode;
-    if (e === m.up || e === m.left)
+    if (e === f.up || e === f.left)
       return this.next({ current: t.current, min: t.min, max: t.max, step: t.skipItems ? t.skipItems : -1 });
-    if (e === m.down || e === m.right)
+    if (e === f.down || e === f.right)
       return this.next({ current: t.current, min: t.min, max: t.max, step: t.skipItems ? t.skipItems : 1 });
-    if (e === m.home)
+    if (e === f.home)
       return 0;
-    if (e === m.end)
+    if (e === f.end)
       return t.max;
   }
   next(t) {
@@ -448,9 +459,9 @@ const Xt = class {
       }
       window.setTimeout(() => s.enabled = !0, 10);
     }, this.scrollPopupByPageSize = (t) => {
-      var c, p, d, r, h, g;
-      const e = this.vs, s = (p = (c = this.list) == null ? void 0 : c.parentElement) == null ? void 0 : p.scrollTop, n = e.enabled && e.itemHeight ? e.itemHeight : this.list ? this.list.children[0].offsetHeight : 0, a = (r = (d = this.list) == null ? void 0 : d.parentElement) == null ? void 0 : r.offsetHeight;
-      s !== void 0 && a !== void 0 && ((g = (h = this.list) == null ? void 0 : h.parentElement) == null || g.scroll({ top: s + t * Math.floor(a / n) * n }));
+      var p, c, d, r, h, u;
+      const e = this.vs, s = (c = (p = this.list) == null ? void 0 : p.parentElement) == null ? void 0 : c.scrollTop, n = e.enabled && e.itemHeight ? e.itemHeight : this.list ? this.list.children[0].offsetHeight : 0, a = (r = (d = this.list) == null ? void 0 : d.parentElement) == null ? void 0 : r.offsetHeight;
+      s !== void 0 && a !== void 0 && ((u = (h = this.list) == null ? void 0 : h.parentElement) == null || u.scroll({ top: s + t * Math.floor(a / n) * n }));
     }, this.renderScrollElement = () => {
       const t = this.vs;
       return t.enabled && /* @__PURE__ */ o.createElement(
@@ -481,8 +492,8 @@ const Xt = class {
     if (!s && !e && setTimeout(() => {
       this.scrollToItem(i, t, !0);
     }, 10), s && i >= 0) {
-      const n = this.vs, a = n.container || s.parentNode, c = t !== void 0 ? t : n.enabled;
-      Ks(a, s, i, n.translate, c);
+      const n = this.vs, a = n.container || s.parentNode, p = t !== void 0 ? t : n.enabled;
+      Ks(a, s, i, n.translate, p);
     }
   }
   initState() {
@@ -521,8 +532,8 @@ const Xt = class {
     }
   }
   triggerPageChangeCornerItems(i, t) {
-    const e = this.component.props, { data: s = [], dataItemKey: n, virtual: a } = e, c = e.opened !== void 0 ? e.opened : this.component.state.opened;
-    i && a && this.vs.enabled && (a.skip > 0 && R(i, s[0], n) ? this.triggerOnPageChange(t, a.skip - 1, a.pageSize) : !c && a.skip + a.pageSize < a.total && R(i, s[s.length - 1], n) && this.triggerOnPageChange(t, a.skip + 1, a.pageSize));
+    const e = this.component.props, { data: s = [], dataItemKey: n, virtual: a } = e, p = e.opened !== void 0 ? e.opened : this.component.state.opened;
+    i && a && this.vs.enabled && (a.skip > 0 && R(i, s[0], n) ? this.triggerOnPageChange(t, a.skip - 1, a.pageSize) : !p && a.skip + a.pageSize < a.total && R(i, s[s.length - 1], n) && this.triggerOnPageChange(t, a.skip + 1, a.pageSize));
   }
   getPopupSettings() {
     return Object.assign({}, Xt.defaultProps.popupSettings, this.component.props.popupSettings);
@@ -593,7 +604,7 @@ const je = {
   name: "@progress/kendo-react-dropdowns",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1700651841,
+  publishDate: 1700659903,
   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"
 }, St = 500, Se = 768, Ys = "Please select a value from the list!", { sizeMap: Vt, roundedMap: Js } = $e, At = class extends o.Component {
@@ -601,7 +612,7 @@ const je = {
     super(i), this.state = {}, this._element = null, this.base = new ie(this), this.searchState = { word: "", last: "" }, this._select = null, this._skipFocusEvent = !1, this._filterInput = null, this._navigated = !1, this._lastKeypressIsFilter = !1, this._inputId = Fe(), this.itemHeight = 0, this.focus = () => {
       this.base.wrapper && this.base.wrapper.focus();
     }, this.handleItemSelect = (t, e) => {
-      const { data: s = [], virtual: n, dataItemKey: a, defaultItem: c } = this.props, p = n ? n.skip : 0, d = t === -1 && c !== void 0 ? c : s[t - p], r = !R(d, this.value, a);
+      const { data: s = [], virtual: n, dataItemKey: a, defaultItem: p } = this.props, c = n ? n.skip : 0, d = t === -1 && p !== void 0 ? p : s[t - c], r = !R(d, this.value, a);
       this.triggerOnChange(d, e), r && this.base.triggerPageChangeCornerItems(d, e);
     }, this.componentRef = (t) => {
       this._element = t, this.base.wrapper = t;
@@ -624,9 +635,9 @@ const je = {
         }
       )
     ), this.renderListContainer = () => {
-      const { header: t, footer: e, dir: s, data: n = [], size: a, groupField: c, groupStickyHeaderItemRender: p, list: d } = this.props, r = this.base, h = r.getPopupSettings(), g = this.props.opened !== void 0 ? this.props.opened : this.state.opened, u = h.width !== void 0 ? h.width : r.popupWidth, f = {
+      const { header: t, footer: e, dir: s, data: n = [], size: a, groupField: p, groupStickyHeaderItemRender: c, list: d } = this.props, r = this.base, h = r.getPopupSettings(), u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = h.width !== void 0 ? h.width : r.popupWidth, m = {
         dir: s !== void 0 ? s : r.dirCalculated,
-        width: u,
+        width: g,
         popupSettings: {
           popupClass: B(
             h.popupClass,
@@ -636,7 +647,7 @@ const je = {
           className: h.className,
           animate: h.animate,
           anchor: this.element,
-          show: g,
+          show: u,
           onOpen: this.onPopupOpened,
           onClose: this.onPopupClosed,
           appendTo: h.appendTo
@@ -644,7 +655,7 @@ const je = {
         itemsCount: [n.length]
       };
       let { group: v } = this.state;
-      return v === void 0 && c !== void 0 && (v = V(n[0], c)), /* @__PURE__ */ o.createElement(Et, { ...f }, this.renderListFilter(), t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), /* @__PURE__ */ o.createElement(
+      return v === void 0 && p !== void 0 && (v = V(n[0], p)), /* @__PURE__ */ o.createElement(Et, { ...m }, this.renderListFilter(), t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), /* @__PURE__ */ o.createElement(
         "div",
         {
           className: B(
@@ -656,7 +667,7 @@ const je = {
           )
         },
         this.renderDefaultItem(),
-        !d && v && n.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: v, groupMode: "modern", render: p }),
+        !d && v && n.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: v, groupMode: "modern", render: c }),
         this.renderList()
       ), e && /* @__PURE__ */ o.createElement("div", { className: "k-list-footer" }, e));
     }, this.renderList = () => {
@@ -664,11 +675,11 @@ const je = {
         data: t = [],
         textField: e,
         dataItemKey: s,
-        virtual: n = { skip: 0 },
+        virtual: n = { skip: 0, total: void 0 },
         groupHeaderItemRender: a,
-        listNoDataRender: c,
-        itemRender: p
-      } = this.props, d = this.base.vs, r = n.skip, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.base.getPopupSettings(), u = `translateY(${d.translate}px)`;
+        listNoDataRender: p,
+        itemRender: c
+      } = this.props, d = this.base.vs, r = n.skip, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, u = this.base.getPopupSettings(), g = `translateY(${d.translate}px)`;
       return /* @__PURE__ */ o.createElement(
         Ue,
         {
@@ -682,19 +693,20 @@ const je = {
           optionsGuid: this.base.guid,
           groupField: this.props.groupField,
           groupMode: "modern",
-          listRef: (f) => d.list = this.base.list = f,
-          wrapperStyle: { maxHeight: g.height },
+          listRef: (m) => d.list = this.base.list = m,
+          wrapperStyle: { maxHeight: u.height },
           wrapperCssClass: "k-list-content",
-          listStyle: d.enabled ? { transform: u } : void 0,
+          listStyle: d.enabled ? { transform: g } : void 0,
           key: "listkey",
           skip: r,
           onClick: this.handleItemClick,
-          itemRender: p,
+          itemRender: c,
           groupHeaderItemRender: a,
-          noDataRender: c,
+          noDataRender: p,
           onScroll: this.onScroll,
           wrapperRef: d.scrollerRef,
-          scroller: this.base.renderScrollElement()
+          scroller: this.base.renderScrollElement(),
+          ariaSetSize: n.total
         }
       );
     }, this.onScroll = (t) => {
@@ -703,10 +715,10 @@ const je = {
       const { groupField: n } = this.props;
       let { data: a = [] } = this.props;
       if (!(!n || !a.length) && n) {
-        const c = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : s ? s.children[0].offsetHeight : 0), d = t.target.scrollTop - e.skip * c;
+        const p = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : s ? s.children[0].offsetHeight : 0), d = t.target.scrollTop - e.skip * p;
         a = this.base.getGroupedDataModernMode(a, n);
         let r = a[0][n];
-        for (let h = 1; h < a.length && !(c * h > d); h++)
+        for (let h = 1; h < a.length && !(p * h > d); h++)
           a[h] && a[h][n] && (r = a[h][n]);
         r !== this.state.group && this.setState({
           group: r
@@ -743,13 +755,13 @@ const je = {
     }, this.selectNext = (t) => {
       const { data: e = [], dataItemKey: s } = this.props;
       let n = e.map((S, D) => ({ item: S, itemIndex: D }));
-      const a = this.searchState.word, c = this.searchState.last, p = Bs(a, c);
+      const a = this.searchState.word, p = this.searchState.last, c = Bs(a, p);
       let d = n.length, r = Math.max(0, e.findIndex((S) => R(S, this.value, s))), h;
-      this.props.defaultItem && (h = { item: this.props.defaultItem, itemIndex: -1 }, d += 1, r += 1), r += p ? 1 : 0, n = Vs(n, r, h);
-      let g, u, f, v = 0;
+      this.props.defaultItem && (h = { item: this.props.defaultItem, itemIndex: -1 }, d += 1, r += 1), r += c ? 1 : 0, n = Vs(n, r, h);
+      let u, g, m, v = 0;
       const { textField: b, ignoreCase: w } = this.props;
       for (; v < d; v++)
-        if (g = V(n[v].item, b), u = p && os(g, c, w), f = os(g, a, w), u || f) {
+        if (u = V(n[v].item, b), g = c && os(u, p, w), m = os(u, a, w), g || m) {
           v = n[v].itemIndex;
           break;
         }
@@ -764,42 +776,42 @@ const je = {
         filterable: s,
         disabled: n,
         defaultItem: a,
-        leftRightKeysNavigation: c = !0,
-        virtual: p = { skip: 0, total: 0, pageSize: 0 },
+        leftRightKeysNavigation: p = !0,
+        virtual: c = { skip: 0, total: 0, pageSize: 0 },
         dataItemKey: d,
         groupField: r = "",
         textField: h,
-        skipDisabledItems: g = !0
-      } = this.props, u = this.value, f = e.findIndex((F) => R(F, u, d)), v = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = t.keyCode, w = b === m.home || b === m.end, S = b === m.up || b === m.down, D = !v && (t.altKey && b === m.down || b === m.enter || b === m.space), N = v && (t.altKey && b === m.up || b === m.esc), O = c && (b === m.left || b === m.right), _ = S || O && !s || w, C = this.base.initState();
+        skipDisabledItems: u = !0
+      } = this.props, g = this.value, m = e.findIndex((F) => R(F, g, d)), v = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = t.keyCode, w = b === f.home || b === f.end, S = b === f.up || b === f.down, D = !v && (t.altKey && b === f.down || b === f.enter || b === f.space), N = v && (t.altKey && b === f.up || b === f.esc), O = p && (b === f.left || b === f.right), _ = S || O && !s || w, C = this.base.initState();
       if (C.syntheticEvent = t, !n) {
         if (w && this.base.vs.enabled)
-          b === m.home ? p.skip !== 0 ? (this.base.triggerOnPageChange(C, 0, p.pageSize), this._navigated = !0) : this.triggerOnChange(e[0], C) : p.skip < p.total - p.pageSize ? (this.base.triggerOnPageChange(C, p.total - p.pageSize, p.pageSize), this._navigated = !0) : this.triggerOnChange(e[e.length - 1], C);
-        else if (v && b === m.pageUp)
+          b === f.home ? c.skip !== 0 ? (this.base.triggerOnPageChange(C, 0, c.pageSize), this._navigated = !0) : this.triggerOnChange(e[0], C) : c.skip < c.total - c.pageSize ? (this.base.triggerOnPageChange(C, c.total - c.pageSize, c.pageSize), this._navigated = !0) : this.triggerOnChange(e[e.length - 1], C);
+        else if (v && b === f.pageUp)
           this.base.scrollPopupByPageSize(-1);
-        else if (v && b === m.pageDown)
+        else if (v && b === f.pageDown)
           this.base.scrollPopupByPageSize(1);
-        else if (v && b === m.enter) {
+        else if (v && b === f.enter) {
           const F = this.getFocusedIndex();
           this.haveFocusedItemAndDataNotEmpty(e, F) ? (this.triggerOnChange(null, C), this.applyState(C)) : this.handleItemSelect(F, C), this.base.togglePopup(C), t.preventDefault();
         } else if (D || N)
           N && this.resetValueIfDisabledItem(), this.base.togglePopup(C), t.preventDefault();
         else if (_) {
           if (this._lastKeypressIsFilter = !1, r !== "" && h)
-            if (!g && v)
+            if (!u && v)
               this.onNavigate(C, b);
             else {
               let F;
-              if (b === m.down || b === m.right) {
-                const x = e.slice(f + 1).find((E) => !E.disabled && E[h]);
+              if (b === f.down || b === f.right) {
+                const x = e.slice(m + 1).find((E) => !E.disabled && E[h]);
                 F = x && e.findIndex((E) => E[h] === x[h]);
-              } else if (b === m.up || b === m.left) {
+              } else if (b === f.up || b === f.left) {
                 let x;
-                if (f === 0 && a)
+                if (m === 0 && a)
                   F = -1;
-                else if (f === -1)
+                else if (m === -1)
                   x = e, F = e.findIndex((E) => !E.disabled && E[h]);
                 else {
-                  x = e.slice(0, f);
+                  x = e.slice(0, m);
                   let E = x.pop();
                   for (; E && E.disabled; )
                     E = x.pop();
@@ -807,26 +819,26 @@ const je = {
                 }
               }
               if (F !== void 0) {
-                const x = F - f;
+                const x = F - m;
                 this.onNavigate(C, b, x);
               } else
-                F === void 0 && e.findIndex((x) => x[h] === u[h]) === e.length - 1 && this.onNavigate(C, b);
+                F === void 0 && e.findIndex((x) => x[h] === g[h]) === e.length - 1 && this.onNavigate(C, b);
             }
-          else if (!g && v || w)
+          else if (!u && v || w)
             this.onNavigate(C, b);
           else if (h) {
             let F;
-            if (b === m.down || b === m.right) {
-              const x = e.slice(f + 1).find((E) => !E.disabled && E[h]);
+            if (b === f.down || b === f.right) {
+              const x = e.slice(m + 1).find((E) => !E.disabled && E[h]);
               F = x && e.findIndex((E) => E[h] === x[h]);
-            } else if (b === m.up || b === m.left) {
+            } else if (b === f.up || b === f.left) {
               let x;
-              if (f === 0 && a)
+              if (m === 0 && a)
                 F = -1;
-              else if (f === -1)
+              else if (m === -1)
                 x = e, F = e.find((E) => !E.disabled && E[h]);
               else {
-                x = e.slice(0, f);
+                x = e.slice(0, m);
                 let E = x.pop();
                 for (; E && E.disabled; )
                   E = x.pop();
@@ -834,10 +846,10 @@ const je = {
               }
             }
             if (F !== void 0) {
-              const x = F - f;
+              const x = F - m;
               this.onNavigate(C, b, x);
             } else
-              F === void 0 && e.findIndex((x) => x[h] === u[h]) === e.length - 1 && this.onNavigate(C, b);
+              F === void 0 && e.findIndex((x) => x[h] === g[h]) === e.length - 1 && this.onNavigate(C, b);
           } else
             this.onNavigate(C, b);
           t.preventDefault();
@@ -851,8 +863,8 @@ const je = {
     }, 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 <= Se && s, c = this.base.initState();
-      c.syntheticEvent = t, c.data.focused = !1, c.events.push({ type: "onBlur" }), e && this.resetValueIfDisabledItem(), e && !a && this.base.togglePopup(c), this.applyState(c);
+      const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { adaptive: s } = this.props, { windowWidth: n = 0 } = this.state, a = n <= Se && 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();
       e.syntheticEvent = t, this.base.togglePopup(e), this.triggerOnChange(this.props.defaultItem, e), this.applyState(e);
@@ -862,7 +874,7 @@ const je = {
       const e = this.base.initState();
       e.syntheticEvent = t, this.state.focused || (e.data.focused = !0), this.resetValueIfDisabledItem(), this.base.togglePopup(e), this.applyState(e);
     }, this.handleKeyPress = (t) => {
-      if (this.props.filterable || t.which === 0 || t.keyCode === m.enter)
+      if (this.props.filterable || t.which === 0 || t.keyCode === f.enter)
         return;
       let e = String.fromCharCode(t.charCode || t.keyCode);
       this.props.ignoreCase && (e = e.toLowerCase()), e === " " && t.preventDefault(), this.searchState = {
@@ -942,18 +954,18 @@ const je = {
    * @hidden
    */
   componentDidUpdate(i, t) {
-    var g;
+    var u;
     const { dataItemKey: e, virtual: s, groupField: n = "", textField: a } = this.props;
-    let { data: c = [] } = this.props;
-    const p = 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 !== p)
+    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;
+    if (this.base.getPopupSettings().animate || h && this.onPopupOpened(), s && s.total !== c)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
-      const u = this.value, f = i.value !== void 0 ? i.value : t.value;
-      let v = c.findIndex((w) => R(w, u, e));
-      n !== "" && u && a && (v = (g = this.base.getGroupedDataModernMode(c, n)) == null ? void 0 : g.map((w) => w[a]).indexOf(u[a]));
-      const b = !R(f, u, e);
-      h && s ? this.base.scrollToVirtualItem(s, v) : h && !s ? (this.onPopupOpened(), c && c.length !== 0 && this.base.resetGroupStickyHeader(c[0][n], this), this.base.scrollToItem(v)) : d && r && u && b && !this._navigated ? this.base.scrollToItem(v) : d && r && this._navigated && (this._navigated && s && s.skip === 0 ? this.base.vs.reset() : this._navigated && s && s.skip === s.total - s.pageSize && this.base.vs.scrollToEnd());
+      const g = this.value, m = i.value !== void 0 ? i.value : t.value;
+      let v = p.findIndex((w) => R(w, g, e));
+      n !== "" && g && a && (v = (u = this.base.getGroupedDataModernMode(p, n)) == null ? void 0 : u.map((w) => w[a]).indexOf(g[a]));
+      const b = !R(m, g, e);
+      h && s ? this.base.scrollToVirtualItem(s, v) : h && !s ? (this.onPopupOpened(), p && p.length !== 0 && this.base.resetGroupStickyHeader(p[0][n], this), this.base.scrollToItem(v)) : d && r && g && b && !this._navigated ? this.base.scrollToItem(v) : d && r && this._navigated && (this._navigated && s && s.skip === 0 ? this.base.vs.reset() : this._navigated && s && s.skip === s.total - s.pageSize && this.base.vs.scrollToEnd());
     }
     this._navigated = !1, this.setValidity();
   }
@@ -973,7 +985,7 @@ const je = {
    * @hidden
    */
   render() {
-    const i = Ae(this).toLanguageString(zt, le[zt]), { style: t, className: e, label: s, dir: n, virtual: a, size: c, rounded: p, fillMode: d, adaptive: r } = this.props, { windowWidth: h = 0 } = this.state, g = this.props.opened !== void 0 ? this.props.opened : this.state.opened, u = this.value, f = V(u, this.props.textField), v = !this.validityStyles || this.validity.valid, b = this.base, w = b.vs, S = h <= Se && r;
+    const i = Ae(this).toLanguageString(Ht, le[Ht]), { 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, g = this.value, m = V(g, this.props.textField), v = !this.validityStyles || this.validity.valid, b = this.base, w = b.vs, S = h <= Se && 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,
@@ -983,7 +995,7 @@ const je = {
       loading: C,
       iconClassName: F,
       valueRender: x
-    } = this.props, { focused: E } = this.state, M = N.findIndex((Y) => R(Y, u, D)), K = /* @__PURE__ */ o.createElement("span", { id: this._inputId, className: "k-input-inner" }, /* @__PURE__ */ o.createElement("span", { className: "k-input-value-text" }, f)), U = x !== void 0 ? x.call(void 0, K, u) : K, j = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
+    } = this.props, { focused: E } = this.state, M = N.findIndex((Y) => R(Y, g, D)), K = /* @__PURE__ */ o.createElement("span", { id: this._inputId, className: "k-input-inner" }, /* @__PURE__ */ o.createElement("span", { className: "k-input-value-text" }, m)), U = x !== void 0 ? x.call(void 0, K, g) : K, j = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
       "span",
       {
         ref: this.componentRef,
@@ -991,8 +1003,8 @@ const je = {
           "k-dropdownlist k-picker",
           e,
           {
-            [`k-picker-${Vt[c] || c}`]: c,
-            [`k-rounded-${Js[p] || p}`]: p,
+            [`k-picker-${Vt[p] || p}`]: p,
+            [`k-rounded-${Js[c] || c}`]: c,
             [`k-picker-${d}`]: d,
             "k-focus": E,
             "k-disabled": O,
@@ -1003,7 +1015,7 @@ const je = {
         ),
         style: s ? { ...t, width: void 0 } : t,
         dir: n,
-        onMouseDown: g ? (Y) => {
+        onMouseDown: u ? (Y) => {
           Y.target.nodeName !== "INPUT" && (this.focusElement(this.base.wrapper), Y.preventDefault());
         } : void 0,
         onFocus: this.handleFocus,
@@ -1017,9 +1029,9 @@ const je = {
         "aria-required": this.required,
         "aria-disabled": O || void 0,
         "aria-haspopup": "listbox",
-        "aria-expanded": g || !1,
+        "aria-expanded": u || !1,
         "aria-owns": this.base.listBoxId,
-        "aria-activedescendant": g ? "option-" + this.base.guid + "-" + (M + (a ? a.skip : 0)) : void 0,
+        "aria-activedescendant": u ? "option-" + this.base.guid + "-" + (M + (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,
@@ -1035,7 +1047,7 @@ const je = {
           type: "button",
           "aria-label": i,
           "aria-hidden": !0,
-          size: c,
+          size: p,
           fillMode: d,
           iconClass: F,
           className: "k-input-button",
@@ -1046,14 +1058,14 @@ const je = {
           onMouseDown: (Y) => this.state.focused && Y.preventDefault()
         }
       ),
-      this.dummySelect(u),
+      this.dummySelect(g),
       !S && this.renderListContainer()
     ), S && this.renderAdaptiveListContainer());
     return s ? /* @__PURE__ */ o.createElement(
       Ge,
       {
         label: s,
-        editorValue: f,
+        editorValue: m,
         editorValid: v,
         editorDisabled: this.props.disabled,
         style: { width: t ? t.width : void 0 },
@@ -1069,10 +1081,10 @@ const je = {
       data: s = [],
       defaultItem: n,
       dataItemKey: a,
-      virtual: c = { skip: 0, total: 0, pageSize: 0 }
-    } = this.props, p = this.base.vs, d = this.value, r = s.findIndex((g) => R(g, d, a)), h = this.base.navigation.navigate({
-      current: c.skip + r,
-      max: (p.enabled ? c.total : s.length) - 1,
+      virtual: p = { skip: 0, total: 0, pageSize: 0 }
+    } = this.props, c = this.base.vs, d = this.value, r = s.findIndex((u) => R(u, d, a)), h = this.base.navigation.navigate({
+      current: p.skip + r,
+      max: (c.enabled ? p.total : s.length) - 1,
       min: n !== void 0 ? -1 : 0,
       keyCode: t,
       skipItems: e || void 0
@@ -1080,17 +1092,17 @@ const je = {
     h !== void 0 && this.handleItemSelect(h, i), this.applyState(i);
   }
   renderAdaptiveListContainer() {
-    const { windowWidth: i = 0 } = this.state, { header: t, footer: e, size: s, adaptiveTitle: n, groupField: a, groupStickyHeaderItemRender: c, list: p, data: d = [] } = this.props, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = {
+    const { windowWidth: i = 0 } = this.state, { header: t, footer: e, size: s, adaptiveTitle: n, groupField: a, groupStickyHeaderItemRender: p, list: c, data: d = [] } = this.props, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = {
       navigatable: !1,
       navigatableElements: [],
       expand: r,
       animation: !0,
-      onClose: (u) => this.handleWrapperClick(u),
+      onClose: (g) => this.handleWrapperClick(g),
       animationStyles: i <= St ? { top: 0, width: "100%", height: "100%" } : void 0,
       className: i <= St ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
     };
-    let { group: g } = this.state;
-    return g === void 0 && a !== void 0 && (g = V(d[0], a)), /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(Yt, { ...h }, /* @__PURE__ */ o.createElement(Jt, { 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(
+    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(Yt, { ...h }, /* @__PURE__ */ o.createElement(Jt, { 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,
@@ -1114,7 +1126,7 @@ const je = {
         )
       },
       this.renderDefaultItem(),
-      !p && g && d.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: g, groupMode: "modern", render: c }),
+      !c && u && d.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: u, groupMode: "modern", render: p }),
       this.renderList()
     ), e && /* @__PURE__ */ o.createElement("div", { className: "k-list-footer" }, e))));
   }
@@ -1125,10 +1137,10 @@ const je = {
       dataItemKey: s,
       virtual: n = { skip: 0 },
       focusedItemIndex: a = Ve,
-      filterable: c,
-      skipDisabledItems: p = !0
+      filterable: p,
+      skipDisabledItems: c = !0
     } = this.props, d = this.props.filter ? this.props.filter : this.state.text;
-    return p && e && !d && !i ? t.findIndex((r) => !r.disabled && r[e]) : G(i) && d === void 0 || c && d === "" ? t.findIndex((r) => R(r, i, s)) : d ? this._lastKeypressIsFilter ? a(t, d, e) : t.findIndex((r) => R(r, i, s)) : n.skip === 0 ? 0 : -1;
+    return c && e && !d && !i ? t.findIndex((r) => !r.disabled && r[e]) : G(i) && d === void 0 || p && d === "" ? t.findIndex((r) => R(r, i, s)) : d ? this._lastKeypressIsFilter ? a(t, d, e) : t.findIndex((r) => R(r, i, s)) : n.skip === 0 ? 0 : -1;
   }
   focusElement(i) {
     this._skipFocusEvent = !0, i.focus(), window.setTimeout(() => this._skipFocusEvent = !1, 30);
@@ -1201,8 +1213,8 @@ class Zt extends o.Component {
     return this._input;
   }
   componentDidUpdate(t) {
-    const e = t.value, s = t.suggestedText, { value: n, suggestedText: a, focused: c } = this.props, p = this.input, d = e !== n || a !== s, r = d && e.startsWith(n) && !(s && a && s.endsWith(a)), h = Ss(document);
-    c && p && h !== p && p.focus(), a && d && !r && p && p.setSelectionRange(n.length - a.length, n.length);
+    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 = Ss(document);
+    p && c && h !== c && c.focus(), a && d && !r && c && c.setSelectionRange(n.length - a.length, n.length);
   }
   render() {
     const { expanded: t = !1, disabled: e, role: s = "listbox", render: n } = this.props, a = /* @__PURE__ */ o.createElement(
@@ -1221,7 +1233,7 @@ class Zt extends o.Component {
         name: this.props.name,
         value: this.props.value,
         onChange: this.props.onChange,
-        ref: (c) => this._input = c,
+        ref: (p) => this._input = p,
         onKeyDown: this.props.onKeyDown,
         onFocus: this.props.onFocus,
         onBlur: this.props.onBlur,
@@ -1269,8 +1281,8 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
     super(i), this.state = {}, this.base = new ie(this), this._element = null, this._inputId = Fe(), this._suggested = "", this._skipBlur = !1, this._input = null, this._adaptiveFilterInput = null, this.itemHeight = 0, this.focus = () => {
       this._input && this._input.focus();
     }, this.handleItemSelect = (t, e) => {
-      const { data: s = [], virtual: n, dataItemKey: a } = this.props, c = n ? n.skip : 0, p = s[t - c], d = !R(p, this.value, a);
-      this.triggerOnChange(p, e), this.state.text !== void 0 && (e.data.text = void 0), d && this.base.triggerPageChangeCornerItems(p, e);
+      const { data: s = [], virtual: n, dataItemKey: a } = this.props, p = n ? n.skip : 0, c = s[t - p], d = !R(c, this.value, a);
+      this.triggerOnChange(c, e), this.state.text !== void 0 && (e.data.text = void 0), d && this.base.triggerPageChangeCornerItems(c, e);
     }, this.onPopupOpened = () => {
       setTimeout(() => {
         this.mobileMode && this._adaptiveFilterInput && (this._skipBlur = !0, this._adaptiveFilterInput.focus(), this._skipBlur = !1);
@@ -1278,8 +1290,8 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
     }, this.componentRef = (t) => {
       this._element = t, this.base.wrapper = t;
     }, this.toggleBtnClick = (t) => {
-      const { data: e = [], skipDisabledItems: s, textField: n } = this.props, a = this.getFocusedIndex(), c = this.getCurrentValueDisabledStatus(n, e, a), p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = this.base.initState();
-      if (d.syntheticEvent = t, !s && n && c && this.clearValueOnToggleBtnClick(t), this.base.togglePopup(d), !p && this.mobileMode) {
+      const { data: e = [], skipDisabledItems: s, textField: n } = this.props, a = this.getFocusedIndex(), p = this.getCurrentValueDisabledStatus(n, e, a), c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = this.base.initState();
+      if (d.syntheticEvent = t, !s && n && p && this.clearValueOnToggleBtnClick(t), this.base.togglePopup(d), !c && this.mobileMode) {
         const r = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
         this.base.filterChanged(r, d);
       }
@@ -1308,10 +1320,10 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
       let { data: a = [] } = this.props;
       if (!n || !a.length)
         return;
-      const c = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : s ? s.children[0].offsetHeight : 0), d = t.target.scrollTop - e.skip * c;
+      const p = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : s ? s.children[0].offsetHeight : 0), d = t.target.scrollTop - e.skip * p;
       this.props.groupMode === "modern" && (a = this.base.getGroupedDataModernMode(a, n));
       let r = a[0][n];
-      for (let h = 1; h < a.length && !(c * h > d); h++)
+      for (let h = 1; h < a.length && !(p * h > d); h++)
         a[h] && a[h][n] && (r = a[h][n]);
       r !== this.state.group && (this.setState({
         group: r
@@ -1320,8 +1332,8 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
       this.base.handleItemClick(t, e), this._valueDuringOnChange = void 0;
     }, this.handleBlur = (t) => {
       if (this.state.focused && !this._skipBlur) {
-        const e = this.base.initState(), { textField: s, data: n = [] } = this.props, a = this.getFocusedIndex(), p = !(a === -1) && this.getCurrentValueDisabledStatus(s, n, a);
-        e.data.focused = !1, e.events.push({ type: "onBlur" }), e.syntheticEvent = t, s && p && this.clearValueOnBlur(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, e);
+        const e = this.base.initState(), { textField: s, data: n = [] } = this.props, a = this.getFocusedIndex(), c = !(a === -1) && this.getCurrentValueDisabledStatus(s, n, a);
+        e.data.focused = !1, e.events.push({ type: "onBlur" }), e.syntheticEvent = t, s && c && this.clearValueOnBlur(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, e);
       }
     }, this.onInputClick = (t) => {
       const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, s = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
@@ -1330,17 +1342,17 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
         n.syntheticEvent = t, this.base.togglePopup(n), this.base.filterChanged(s, n), this.applyState(n);
       }
     }, this.onInputKeyDown = (t) => {
-      const { data: e = [], skipDisabledItems: s, textField: n, dataItemKey: a, groupField: c } = this.props, p = this.value, d = Math.max(0, e.findIndex((w) => R(w, p, a))), r = t.keyCode, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.base.initState();
-      if (g.syntheticEvent = t, !t.altKey && (r === m.up || r === m.down)) {
-        if (t.preventDefault(), c !== "" && n)
+      const { data: e = [], skipDisabledItems: s, textField: n, dataItemKey: a, groupField: p } = this.props, c = this.value, d = Math.max(0, e.findIndex((w) => R(w, c, a))), r = t.keyCode, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, u = this.base.initState();
+      if (u.syntheticEvent = t, !t.altKey && (r === f.up || r === f.down)) {
+        if (t.preventDefault(), p !== "" && n)
           if (!this.props.skipDisabledItems && h)
-            this.onNavigate(g, r);
+            this.onNavigate(u, r);
           else {
             let w = 0;
-            if (r === m.down || r === m.right) {
+            if (r === f.down || r === f.right) {
               const S = e.slice(d + 1).find((D) => !D.disabled && D[n]);
               w = S && e.findIndex((D) => D[n] === S[n]);
-            } else if (r === m.up || r === m.left) {
+            } else if (r === f.up || r === f.left) {
               let S;
               if (d === 0)
                 S = e, w = e.findIndex((D) => !D.disabled && D[n]);
@@ -1354,43 +1366,43 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
             }
             if (w !== void 0) {
               const S = w - d;
-              this.onNavigate(g, r, S);
+              this.onNavigate(u, r, S);
             } else
-              w === void 0 && e.findIndex((S) => S[n] === p[n]) === e.length - 1 && this.onNavigate(g, r);
+              w === void 0 && e.findIndex((S) => S[n] === c[n]) === e.length - 1 && this.onNavigate(u, r);
           }
         else if (!this.props.skipDisabledItems && h)
-          this.onNavigate(g, r);
+          this.onNavigate(u, r);
         else {
           let w = null;
-          if (r === m.down || r === m.right)
+          if (r === f.down || r === f.right)
             w = e.slice(d + 1).find((S) => !S.disabled);
-          else if (r === m.up || r === m.left) {
+          else if (r === f.up || r === f.left) {
             const S = e.slice(0, d);
             for (w = S.pop(); w && w.disabled; )
               w = S.pop();
           }
           if (w) {
             const S = w.id - d - 1;
-            this.onNavigate(g, r, S);
+            this.onNavigate(u, r, S);
           } else
-            this.onNavigate(g, r);
+            this.onNavigate(u, r);
         }
-        this.applyState(g);
+        this.applyState(u);
       }
-      const u = () => {
-        t.preventDefault(), this.base.togglePopup(g), this.applyState(g);
-      }, f = this.getFocusedIndex(), v = f === -1, b = !v && this.getCurrentValueDisabledStatus(n, e, f);
-      h ? r === m.pageUp ? this.base.scrollPopupByPageSize(-1) : r === m.pageDown ? this.base.scrollPopupByPageSize(1) : t.altKey && r === m.up ? u() : r === m.enter ? (t.preventDefault(), (n && !v && t.currentTarget.value ? e[f][n] : void 0) ? !s && n && b ? this.clearValueOnEnterOrEsc(t) : b || this.applyValueOnEnter(t.currentTarget.value, g) : this.applyValueOnEnter(t.currentTarget.value, g)) : r === m.esc && (!s && n && b && this.clearValueOnEnterOrEsc(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, g)) : !h && r === m.esc ? this.clearValueOnEnterOrEsc(t) : t.altKey && r === m.down && u();
+      const g = () => {
+        t.preventDefault(), this.base.togglePopup(u), this.applyState(u);
+      }, m = this.getFocusedIndex(), v = m === -1, b = !v && this.getCurrentValueDisabledStatus(n, e, m);
+      h ? r === f.pageUp ? this.base.scrollPopupByPageSize(-1) : r === f.pageDown ? this.base.scrollPopupByPageSize(1) : t.altKey && r === f.up ? g() : r === f.enter ? (t.preventDefault(), (n && !v && t.currentTarget.value ? e[m][n] : void 0) ? !s && n && b ? this.clearValueOnEnterOrEsc(t) : b || this.applyValueOnEnter(t.currentTarget.value, u) : this.applyValueOnEnter(t.currentTarget.value, u)) : r === f.esc && (!s && n && b && this.clearValueOnEnterOrEsc(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, u)) : !h && r === f.esc ? this.clearValueOnEnterOrEsc(t) : t.altKey && r === f.down && g();
     }, this.inputOnChange = (t) => {
       const e = this.base.initState();
       e.syntheticEvent = t;
       const s = this.props.opened !== void 0 ? this.props.opened : this.state.opened, n = t.currentTarget, a = n.value;
       if (this.props.suggest) {
-        const c = n.selectionEnd === a.length;
-        let p = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-        G(p) || (p = V(this.value, this.props.textField) || "");
-        const d = p && p === a, r = p && p.length > a.length;
-        d || r || !c ? this._suggested = "" : this.suggestValue(a);
+        const p = n.selectionEnd === a.length;
+        let c = this.props.filter !== void 0 ? this.props.filter : this.state.text;
+        G(c) || (c = V(this.value, this.props.textField) || "");
+        const d = c && c === a, r = c && c.length > a.length;
+        d || r || !p ? this._suggested = "" : this.suggestValue(a);
       }
       this.props.filter === void 0 && (e.data.text = a), this.state.focusedItem !== void 0 && (e.data.focusedItem = void 0), s || this.base.togglePopup(e), this.base.filterChanged(a, e), this.applyState(e), this.setState({ group: void 0 });
     }, this.clearButtonClick = (t) => {
@@ -1471,16 +1483,16 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
   }
   /** @hidden */
   componentDidUpdate(i, t) {
-    var u;
-    const { dataItemKey: e, virtual: s, groupField: n = "", data: a = [], textField: c } = this.props, p = 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, g = this.value;
-    if (this._valueOnDidUpdate = g, s && s.total !== p)
+    var g;
+    const { dataItemKey: e, virtual: s, groupField: n = "", data: a = [], textField: 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, u = this.value;
+    if (this._valueOnDidUpdate = u, s && s.total !== c)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
-      const f = i.value !== void 0 ? i.value : t.value;
-      let v = a.findIndex((w) => R(w, g, e));
-      this.props.groupMode === "modern" && c && g && (v = (u = this.base.getGroupedDataModernMode(a, n)) == null ? void 0 : u.map((w) => w[c]).indexOf(g[c]));
-      const b = !R(f, g, e);
-      h && s ? this.base.scrollToVirtualItem(s, v) : h && !s ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][n], this), this.base.scrollToItem(v)) : d && r && g && b && this.base.scrollToItem(v);
+      const m = i.value !== void 0 ? i.value : t.value;
+      let v = a.findIndex((w) => R(w, u, e));
+      this.props.groupMode === "modern" && p && u && (v = (g = this.base.getGroupedDataModernMode(a, n)) == null ? void 0 : g.map((w) => w[p]).indexOf(u[p]));
+      const b = !R(m, u, e);
+      h && s ? this.base.scrollToVirtualItem(s, v) : h && !s ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][n], this), this.base.scrollToItem(v)) : d && r && u && b && this.base.scrollToItem(v);
     }
     h && this._input && this._input.focus(), this.setValidity();
   }
@@ -1497,34 +1509,34 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
   /** @hidden */
   render() {
     const i = Ae(this).toLanguageString(Lt, le[Lt]), t = Ae(this).toLanguageString(
-      Ht,
-      le[Ht]
+      zt,
+      le[zt]
     ), {
       dir: e,
       disabled: s,
       clearButton: n = It.defaultProps.clearButton,
       label: a,
-      textField: c,
-      adaptive: p,
+      textField: p,
+      adaptive: c,
       className: d,
       style: r,
       loading: h,
-      iconClassName: g,
-      virtual: u,
-      size: f,
+      iconClassName: u,
+      virtual: g,
+      size: m,
       rounded: v,
       fillMode: b,
       opened: w = this.state.opened,
       placeholder: S
-    } = this.props, { windowWidth: D = 0 } = this.state, N = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, _ = V(this.value, c), C = G(O) ? O : _, F = n && (!!C || G(this.value)), E = this.base.vs, M = this.props.id || this._inputId, K = D <= Se && p;
-    E.enabled = u !== void 0, u !== void 0 && (E.skip = u.skip, E.total = u.total, E.pageSize = u.pageSize);
+    } = this.props, { windowWidth: D = 0 } = this.state, N = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, _ = V(this.value, p), C = G(O) ? O : _, F = n && (!!C || G(this.value)), E = this.base.vs, M = this.props.id || this._inputId, K = D <= Se && c;
+    E.enabled = g !== void 0, g !== void 0 && (E.skip = g.skip, E.total = g.total, E.pageSize = g.pageSize);
     const U = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
       "span",
       {
         className: B(
           "k-combobox k-input",
           {
-            [`k-input-${bt[f] || f}`]: f,
+            [`k-input-${bt[m] || m}`]: m,
             [`k-rounded-${ei[v] || v}`]: v,
             [`k-input-${b}`]: b,
             "k-invalid": !N,
@@ -1547,10 +1559,10 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
           tabIndex: -1,
           type: "button",
           "aria-label": w ? t : i,
-          icon: g ? void 0 : "caret-alt-down",
-          svgIcon: g ? this.props.svgIcon : Ut,
-          iconClass: g,
-          size: f,
+          icon: u ? void 0 : "caret-alt-down",
+          svgIcon: u ? this.props.svgIcon : Ut,
+          iconClass: u,
+          size: m,
           fillMode: b,
           rounded: null,
           themeColor: "base",
@@ -1576,17 +1588,17 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
   }
   /** @hidden */
   onNavigate(i, t, e) {
-    const { data: s = [], virtual: n = { skip: 0 } } = this.props, a = this.props.filter ? this.props.filter : this.state.text, c = this.getFocusedIndex(), p = this.base.vs, d = this.value;
-    if (this._suggested = "", c !== -1 && !G(d))
-      this.handleItemSelect(c, i);
+    const { data: s = [], virtual: n = { skip: 0 } } = this.props, a = this.props.filter ? this.props.filter : this.state.text, p = this.getFocusedIndex(), c = this.base.vs, d = this.value;
+    if (this._suggested = "", p !== -1 && !G(d))
+      this.handleItemSelect(p, i);
     else if (a === "")
       this.handleItemSelect(0, i);
     else {
-      let r = n.skip + c;
+      let r = n.skip + p;
       const h = this.base.navigation.navigate({
         keyCode: t,
         current: r,
-        max: (p.enabled ? p.total : s.length) - 1,
+        max: (c.enabled ? c.total : s.length) - 1,
         min: 0,
         skipItems: e || void 0
       });
@@ -1597,10 +1609,10 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
     return i && t && t[e] && t[e].disabled;
   }
   applyValueOnEnter(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) === i ? this.index : Kt(e, i, s), d = p !== -1;
+    const { data: e = [], textField: s, allowCustom: n } = this.props, a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, c = V(this.value, s) === i ? this.index : Kt(e, i, s), d = c !== -1;
     let r;
     if (this._suggested = "", d)
-      r = e[p];
+      r = e[c];
     else if (n)
       r = s !== void 0 ? { [s]: i } : i;
     else
@@ -1608,31 +1620,31 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
     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, c = V(this.value, s), p = this.state.windowWidth && this.state.windowWidth <= Se;
-    if (this._suggested = "", i === c || i === "" && !G(c))
-      return a && !p && this.base.togglePopup(t), this.applyState(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 <= Se;
+    if (this._suggested = "", i === p || i === "" && !G(p))
+      return a && !c && this.base.togglePopup(t), this.applyState(t);
     const d = Kt(e, i, s, !0), r = d !== -1;
     let h = null;
-    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 && !p && this.base.togglePopup(t), this.applyState(t);
+    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: c = Ve } = this.props, p = a.skip, d = i === "" && p === 0 ? 0 : c(s, i, n);
-    return d !== -1 ? this.handleItemSelect(d + p, t) : (this.triggerOnChange(null, t), this.state.text !== void 0 && (t.data.text = void 0)), e && this.base.togglePopup(t), this.applyState(t);
+    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() {
-    const { windowWidth: i = 0 } = this.state, { header: t, footer: e, size: s, data: n = [], groupField: a, groupMode: c, list: p, virtual: d, adaptiveTitle: r, groupStickyHeaderItemRender: h } = this.props, g = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
-    let { group: u } = this.state;
-    u === void 0 && a !== void 0 && (u = V(n[0], a));
-    const f = {
+    const { windowWidth: i = 0 } = this.state, { header: t, footer: e, size: s, data: n = [], groupField: a, groupMode: p, list: c, virtual: d, adaptiveTitle: r, groupStickyHeaderItemRender: h } = this.props, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+    let { group: g } = this.state;
+    g === void 0 && a !== void 0 && (g = V(n[0], a));
+    const m = {
       navigatable: !1,
       navigatableElements: [],
-      expand: g,
+      expand: u,
       animation: !0,
       onClose: (v) => this.toggleBtnClick(v),
       animationStyles: i <= St ? { top: 0, width: "100%", height: "100%" } : void 0,
       className: i <= St ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
     };
-    return /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(Yt, { ...f }, /* @__PURE__ */ o.createElement(Jt, { 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(
+    return /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(Yt, { ...m }, /* @__PURE__ */ o.createElement(Jt, { 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,
       {
         tabIndex: 0,
@@ -1646,32 +1658,32 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
       }
     ))), /* @__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"]: !p,
+        ["k-list"]: !c,
         ["k-list-lg"]: !0,
         ["k-virtual-list"]: d,
-        ["k-data-table"]: p,
-        [`k-table-${bt[s] || s}`]: p && s
+        ["k-data-table"]: c,
+        [`k-table-${bt[s] || s}`]: c && s
       }
-    ) }, t && /* @__PURE__ */ o.createElement("div", { className: "k-table-header" }, t), !p && u && n.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: u, groupMode: c, render: h }), this.renderList(), e && /* @__PURE__ */ o.createElement("div", { className: "k-list-footer" }, e))))));
+    ) }, t && /* @__PURE__ */ o.createElement("div", { className: "k-table-header" }, t), !c && g && n.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: g, groupMode: p, render: h }), this.renderList(), e && /* @__PURE__ */ o.createElement("div", { className: "k-list-footer" }, e))))));
   }
   renderListContainer() {
-    const i = this.base, { dir: t, header: e, footer: s, data: n = [], groupField: a, groupMode: c, size: p, list: d, virtual: r, groupStickyHeaderItemRender: h } = this.props, g = this.props.opened !== void 0 ? this.props.opened : this.state.opened, u = i.getPopupSettings(), f = u.width !== void 0 ? u.width : i.popupWidth;
+    const i = this.base, { dir: t, header: e, footer: s, data: n = [], groupField: a, groupMode: p, size: c, list: d, virtual: r, groupStickyHeaderItemRender: h } = this.props, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = i.getPopupSettings(), m = g.width !== void 0 ? g.width : i.popupWidth;
     let { group: v } = this.state;
     return v === void 0 && a !== void 0 && (v = V(n[0], a)), /* @__PURE__ */ o.createElement(
       Et,
       {
-        width: f,
+        width: m,
         popupSettings: {
-          animate: u.animate,
+          animate: g.animate,
           anchor: this.element,
-          show: g,
+          show: u,
           popupClass: B(
-            u.popupClass,
+            g.popupClass,
             "k-list-container",
             "k-combobox-popup"
           ),
-          className: u.className,
-          appendTo: u.appendTo
+          className: g.className,
+          appendTo: g.appendTo
         },
         dir: t !== void 0 ? t : this.base.dirCalculated,
         itemsCount: [n.length]
@@ -1679,12 +1691,12 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
       /* @__PURE__ */ o.createElement("div", { className: B(
         {
           ["k-list"]: !d,
-          [`k-list-${bt[p] || p}`]: !d && p,
+          [`k-list-${bt[c] || c}`]: !d && c,
           ["k-virtual-list"]: r,
           ["k-data-table"]: d,
-          [`k-table-${bt[p] || p}`]: d && p
+          [`k-table-${bt[c] || c}`]: d && c
         }
-      ) }, e && /* @__PURE__ */ o.createElement("div", { className: "k-table-header" }, e), !d && v && n.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: v, groupMode: c, render: h }), this.renderList(), s && /* @__PURE__ */ o.createElement("div", { className: B(
+      ) }, e && /* @__PURE__ */ o.createElement("div", { className: "k-table-header" }, e), !d && v && n.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: v, groupMode: p, render: h }), this.renderList(), s && /* @__PURE__ */ o.createElement("div", { className: B(
         {
           ["k-list-footer"]: !this.props.footerClassName
         },
@@ -1699,17 +1711,17 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
       listNoDataRender: s,
       itemRender: n,
       groupHeaderItemRender: a,
-      data: c = [],
-      virtual: p = { skip: 0 }
-    } = this.props, d = i.getPopupSettings(), r = i.vs, h = p.skip, g = this.props.opened !== void 0 ? this.props.opened : this.state.opened, u = `translateY(${r.translate}px)`, f = g ? this.getFocusedIndex() : void 0, v = this.props.filter !== void 0 ? this.props.filter : this.state.text, b = V(this.value, t), w = G(v) && v !== b ? null : this.value, S = this.props.list || Ue;
+      data: p = [],
+      virtual: c = { skip: 0, total: void 0 }
+    } = this.props, d = i.getPopupSettings(), r = i.vs, h = c.skip, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = `translateY(${r.translate}px)`, m = u ? this.getFocusedIndex() : void 0, v = this.props.filter !== void 0 ? this.props.filter : this.state.text, b = V(this.value, t), w = G(v) && v !== b ? null : this.value, S = this.props.list || Ue;
     return /* @__PURE__ */ o.createElement(
       S,
       {
         id: i.listBoxId,
-        virtual: !!p,
-        show: g,
-        data: c,
-        focusedIndex: f,
+        virtual: !!c,
+        show: u,
+        data: p,
+        focusedIndex: m,
         value: w,
         textField: t,
         valueField: e,
@@ -1724,10 +1736,10 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
         wrapperCssClass: B(
           "k-list-content",
           {
-            ["k-list-scroller"]: !p
+            ["k-list-scroller"]: !c
           }
         ),
-        listStyle: r.enabled ? { transform: u } : void 0,
+        listStyle: r.enabled ? { transform: g } : void 0,
         key: "listkey",
         skip: h,
         onClick: this.handleItemClick,
@@ -1737,7 +1749,8 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
         onMouseDown: (D) => D.preventDefault(),
         onScroll: this.onScroll,
         wrapperRef: r.scrollerRef,
-        scroller: this.base.renderScrollElement()
+        scroller: this.base.renderScrollElement(),
+        ariaSetSize: c.total
       }
     );
   }
@@ -1746,10 +1759,10 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
       tabIndex: s,
       disabled: n,
       data: a = [],
-      dataItemKey: c,
-      virtual: p = { skip: 0 }
-    } = this.props, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = this.value, h = Math.max(0, a.findIndex((g) => R(g, r, c)));
-    return this._suggested && !R(this._valueOnDidUpdate, r, c) && (this._suggested = ""), /* @__PURE__ */ o.createElement(
+      dataItemKey: p,
+      virtual: c = { skip: 0 }
+    } = this.props, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = this.value, h = Math.max(0, a.findIndex((u) => R(u, r, p)));
+    return this._suggested && !R(this._valueOnDidUpdate, r, p) && (this._suggested = ""), /* @__PURE__ */ o.createElement(
       Zt,
       {
         id: t,
@@ -1760,7 +1773,7 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
         accessKey: this.props.accessKey,
         value: i + this._suggested,
         suggestedText: this._suggested,
-        ref: (g) => this._input = g && g.input,
+        ref: (u) => this._input = u && u.input,
         onClick: this.onInputClick,
         onKeyDown: this.onInputKeyDown,
         onChange: this.inputOnChange,
@@ -1769,7 +1782,7 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
         disabled: n,
         expanded: d,
         owns: this.base.listBoxId,
-        activedescendant: `option-${this.base.guid}-${h + p.skip}`,
+        activedescendant: `option-${this.base.guid}-${h + c.skip}`,
         role: "combobox",
         ariaLabelledBy: this.props.ariaLabelledBy,
         ariaDescribedBy: this.props.ariaDescribedBy,
@@ -1789,12 +1802,12 @@ const Zs = "Please enter a valid value!", { sizeMap: bt, roundedMap: ei } = $e,
     !G(e) && !G(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 = Ve, skipDisabledItems: c } = this.props, p = this.props.filter ? this.props.filter : this.state.text;
-    return G(i) && p === void 0 ? t.findIndex((d) => R(d, i, s)) : p ? a(t, p, e) : c && e && !p && n.skip === 0 ? t.findIndex((d) => !d.disabled && d[e]) : n.skip === 0 ? 0 : -1;
+    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 G(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 = Hs(i, t, e);
+    this._suggested = zs(i, t, e);
   }
   applyState(i) {
     this.base.applyState(i), this._valueDuringOnChange = void 0;
@@ -1867,10 +1880,10 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
       let { data: n = [] } = this.props;
       if (!s || !n.length)
         return;
-      const a = this.itemHeight || (e ? e.children[0].offsetHeight : 0), p = t.target.scrollTop;
+      const a = this.itemHeight || (e ? e.children[0].offsetHeight : 0), c = t.target.scrollTop;
       s && (n = this.base.getGroupedDataModernMode(n, s));
       let d = n[0][s];
-      for (let r = 1; r < n.length && !(a * r > p); r++)
+      for (let r = 1; r < n.length && !(a * r > c); r++)
         n[r] && n[r][s] && (d = n[r][s]);
       d !== this.state.group && this.setState({
         group: d
@@ -1878,16 +1891,16 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
     }, this.handleItemClick = (t, e) => {
       this.base.handleItemClick(t, e), this._valueDuringOnChange = void 0;
     }, this.onChangeHandler = (t) => {
-      const s = this.base.initState(), n = t.currentTarget, a = n.value, c = n.selectionEnd === a.length;
+      const s = this.base.initState(), n = t.currentTarget, a = n.value, p = n.selectionEnd === a.length;
       s.syntheticEvent = t;
-      const p = this._suggested, d = this.value, r = d && d.substring(0, d.length - p.length), h = r && r === a, g = r && r.length > a.length, { suggest: u } = this.props, f = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
-      if (u !== void 0 && u !== !1) {
-        h || g || !c ? this._suggested = "" : this.suggestValue(a);
+      const c = this._suggested, d = this.value, r = d && d.substring(0, d.length - c.length), h = r && r === a, u = r && r.length > a.length, { suggest: g } = this.props, m = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+      if (g !== void 0 && g !== !1) {
+        h || u || !p ? this._suggested = "" : this.suggestValue(a);
         const v = a + this._suggested, b = { userInput: a, value: this._suggested };
         this.triggerOnChange(v, s, { suggestion: b });
       } else
         this._suggested = "", this.triggerOnChange(a, s);
-      (!f && a || f && !a) && this.togglePopup(s), s.data.focusedItem = void 0, this.applyState(s), this.setState({ group: void 0 });
+      (!m && a || m && !a) && this.togglePopup(s), s.data.focusedItem = void 0, this.applyState(s), this.setState({ group: void 0 });
     }, this.clearButtonClick = (t) => {
       const s = this.base.initState(), n = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
       s.syntheticEvent = t;
@@ -1896,73 +1909,73 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
     }, this.onInputKeyDown = (t) => {
       const { data: e = [], skipDisabledItems: s, groupField: n, textField: a } = this.props;
       this._isScrolling && (this._isScrolling = !1);
-      const c = this.focusedIndex(), p = e[c], d = t.keyCode, r = t.altKey, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.base.initState();
-      g.syntheticEvent = t;
-      const u = () => {
+      const p = this.focusedIndex(), c = e[p], d = t.keyCode, r = t.altKey, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, u = this.base.initState();
+      u.syntheticEvent = t;
+      const g = () => {
         h && t.preventDefault();
       };
-      if (r && d === m.down)
+      if (r && d === f.down)
         this.setState({
           opened: !0
         });
-      else if (r && d === m.up)
+      else if (r && d === f.up)
         this.setState({
           opened: !1
         });
-      else if (h && d === m.pageUp)
+      else if (h && d === f.pageUp)
         this.base.scrollPopupByPageSize(-1);
-      else if (h && d === m.pageDown)
+      else if (h && d === f.pageDown)
         this.base.scrollPopupByPageSize(1);
-      else if (h && (d === m.enter || d === m.esc))
-        u(), s === !1 && p && p.disabled ? (h && this.togglePopup(g), this.applyState(g)) : this.applyInputValue(t.currentTarget.value, g, t.keyCode);
-      else if (!h && d === m.esc) {
-        const f = "";
-        this._suggested = "", this.triggerOnChange(f, g), this.state.focusedItem !== void 0 && (g.data.focusedItem = void 0), this.applyState(g);
-      } else if (d === m.up || d === m.down) {
+      else if (h && (d === f.enter || d === f.esc))
+        g(), s === !1 && c && c.disabled ? (h && this.togglePopup(u), this.applyState(u)) : this.applyInputValue(t.currentTarget.value, u, t.keyCode);
+      else if (!h && d === f.esc) {
+        const m = "";
+        this._suggested = "", this.triggerOnChange(m, u), this.state.focusedItem !== void 0 && (u.data.focusedItem = void 0), this.applyState(u);
+      } else if (d === f.up || d === f.down) {
         if (n !== "" && a)
           if (!this.props.skipDisabledItems && h)
-            this.onNavigate(g, d);
+            this.onNavigate(u, d);
           else {
-            let f = 0;
-            if (d === m.down || d === m.right) {
-              const v = e.slice(c + 1).find((b) => !b.disabled && b[a]);
-              f = v && e.findIndex((b) => b[a] === v[a]);
-            } else if (d === m.up || d === m.left) {
+            let m = 0;
+            if (d === f.down || d === f.right) {
+              const v = e.slice(p + 1).find((b) => !b.disabled && b[a]);
+              m = v && e.findIndex((b) => b[a] === v[a]);
+            } else if (d === f.up || d === f.left) {
               let v;
-              if (c === -1)
-                v = e, f = e.findIndex((b) => !b.disabled && b[a]);
+              if (p === -1)
+                v = e, m = e.findIndex((b) => !b.disabled && b[a]);
               else {
-                v = e.slice(0, c);
+                v = e.slice(0, p);
                 let b = v.pop();
                 for (; b && b.disabled; )
                   b = v.pop();
-                f = b && e.findIndex((w) => w[a] === b[a]);
+                m = b && e.findIndex((w) => w[a] === b[a]);
               }
             }
-            if (f !== void 0) {
-              const v = f - c;
-              this.onNavigate(g, d, v);
+            if (m !== void 0) {
+              const v = m - p;
+              this.onNavigate(u, d, v);
             } else
-              f === void 0 && e.findIndex((v) => v[a]) === e.length - 1 && this.onNavigate(g, d);
+              m === void 0 && e.findIndex((v) => v[a]) === e.length - 1 && this.onNavigate(u, d);
           }
         else if (!this.props.skipDisabledItems && h)
-          this.onNavigate(g, d);
+          this.onNavigate(u, d);
         else {
-          let f = null;
-          if (d === m.down || d === m.right)
-            f = e.slice(c + 1).find((v) => !v.disabled);
-          else if (d === m.up || d === m.left) {
-            const v = e.slice(0, c);
-            for (f = v.pop(); f && f.disabled; )
-              f = v.pop();
+          let m = null;
+          if (d === f.down || d === f.right)
+            m = e.slice(p + 1).find((v) => !v.disabled);
+          else if (d === f.up || d === f.left) {
+            const v = e.slice(0, p);
+            for (m = v.pop(); m && m.disabled; )
+              m = v.pop();
           }
-          if (f) {
-            const v = f.id - c - 1;
-            this.onNavigate(g, d, v);
+          if (m) {
+            const v = m.id - p - 1;
+            this.onNavigate(u, d, v);
           } else
-            this.onNavigate(g, d);
+            this.onNavigate(u, d);
         }
-        this.applyState(g), u();
+        this.applyState(u), g();
       }
     }, this.handleBlur = (t) => {
       if (this.state.focused) {
@@ -2016,13 +2029,13 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
    * @hidden
    */
   componentDidUpdate(i, t) {
-    var u;
-    const { groupField: e = "", data: s = [] } = this.props, { data: n = [] } = i, a = this.focusedIndex(), c = s[a], p = n !== s, d = c !== void 0 && t.focusedItem !== c, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = i.opened !== void 0 ? i.opened : t.opened, g = !h && r;
+    var g;
+    const { groupField: e = "", data: s = [] } = this.props, { data: n = [] } = i, a = this.focusedIndex(), p = s[a], c = n !== s, d = p !== void 0 && t.focusedItem !== p, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = i.opened !== void 0 ? i.opened : t.opened, u = !h && r;
     if (e === "")
-      (r && (d || p) || g) && this.base.scrollToItem(a);
+      (r && (d || c) || u) && this.base.scrollToItem(a);
     else if (!this._isScrolling) {
-      let f = (u = this.base.getGroupedDataModernMode(s, e)) == null ? void 0 : u.indexOf(c);
-      g && (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][e], this), this.base.scrollToItem(f)), r && h && d && this.base.scrollToItem(f);
+      let m = (g = this.base.getGroupedDataModernMode(s, e)) == null ? void 0 : g.indexOf(p);
+      u && (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][e], this), this.base.scrollToItem(m)), r && h && d && this.base.scrollToItem(m);
     }
     this.setValidity();
   }
@@ -2036,8 +2049,8 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
    * @hidden
    */
   render() {
-    const { dir: i, disabled: t, label: e, className: s, style: n, loading: a, suggest: c, size: p, rounded: d, fillMode: r } = this.props, h = !this.validityStyles || this.validity.valid, g = this.base, u = this.value, f = this.props.clearButton !== !1 && !a && !!u, v = this.props.id || this._inputId;
-    typeof c == "string" && (this._suggested = c);
+    const { dir: i, disabled: t, label: e, className: s, style: n, loading: a, suggest: p, size: c, rounded: d, fillMode: r } = this.props, h = !this.validityStyles || this.validity.valid, u = this.base, g = this.value, m = this.props.clearButton !== !1 && !a && !!g, v = this.props.id || this._inputId;
+    typeof p == "string" && (this._suggested = p);
     const b = /* @__PURE__ */ o.createElement(
       "span",
       {
@@ -2045,7 +2058,7 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
           "k-autocomplete k-input",
           s,
           {
-            [`k-input-${ls[p] || p}`]: p,
+            [`k-input-${ls[c] || c}`]: c,
             [`k-rounded-${ii[d] || d}`]: d,
             [`k-input-${r}`]: r,
             "k-invalid": !h,
@@ -2055,14 +2068,14 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
           }
         ),
         ref: (w) => {
-          this._element = w, g.wrapper = w;
+          this._element = w, u.wrapper = w;
         },
         style: e ? { ...n, width: void 0 } : n,
         dir: i
       },
-      this.renderSearchBar(u || "", v),
+      this.renderSearchBar(g || "", v),
       a && /* @__PURE__ */ o.createElement(ke, { className: "k-input-loading-icon", name: "loading" }),
-      f && !a && /* @__PURE__ */ o.createElement(rt, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      m && !a && /* @__PURE__ */ o.createElement(rt, { onClick: this.clearButtonClick, key: "clearbutton" }),
       this.renderListContainer()
     );
     return e ? /* @__PURE__ */ o.createElement(
@@ -2070,7 +2083,7 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
       {
         label: e,
         editorId: v,
-        editorValue: u,
+        editorValue: g,
         editorValid: h,
         editorDisabled: t,
         style: { width: n ? n.width : void 0 },
@@ -2082,9 +2095,9 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
    * @hidden
    */
   onNavigate(i, t, e) {
-    const s = this.value, { data: n = [], textField: a, focusedItemIndex: c } = this.props, p = this.state.focusedItem !== void 0 ? n.findIndex((r) => R(r, this.state.focusedItem, a)) : c ? c(n, s, a) : n.indexOf(as(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: p,
+      current: c,
       max: n.length - 1,
       min: 0,
       skipItems: e || void 0
@@ -2095,15 +2108,15 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
    * @hidden
    */
   applyInputValue(i, t, e) {
-    const s = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { data: n = [], textField: a } = this.props, c = this.focusedIndex(), p = n[c];
-    if (this._suggested = "", s && e === m.enter && p && !p.disabled) {
+    const s = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { data: n = [], textField: a } = this.props, p = this.focusedIndex(), c = n[p];
+    if (this._suggested = "", s && e === f.enter && c && !c.disabled) {
       const d = V(n[this.focusedIndex(i)], a);
       this.triggerOnChange(d, t);
     }
     s && this.togglePopup(t), this.applyState(t);
   }
   renderSearchBar(i, t) {
-    const e = this.base, { placeholder: s, tabIndex: n, disabled: a, readonly: c } = this.props, { focused: p } = this.state, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+    const e = this.base, { placeholder: s, tabIndex: n, disabled: a, readonly: p } = this.props, { focused: c } = this.state, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
     return /* @__PURE__ */ o.createElement(
       Zt,
       {
@@ -2113,7 +2126,7 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
         accessKey: this.props.accessKey,
         value: i,
         suggestedText: this._suggested,
-        focused: p,
+        focused: c,
         name: this.props.name,
         ref: (r) => this._input = r && r.input,
         onKeyDown: this.onInputKeyDown,
@@ -2121,7 +2134,7 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
         onFocus: e.handleFocus,
         onBlur: this.handleBlur,
         disabled: a,
-        readOnly: c,
+        readOnly: p,
         expanded: d,
         owns: e.listBoxId,
         activedescendant: "option-" + e.guid + "-" + this.focusedIndex(),
@@ -2140,15 +2153,15 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
       footer: s,
       data: n = [],
       size: a,
-      groupField: c,
-      list: p,
+      groupField: p,
+      list: c,
       groupStickyHeaderItemRender: d
-    } = this.props, r = i.getPopupSettings(), h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = r.width !== void 0 ? r.width : i.popupWidth;
-    let { group: u } = this.state;
-    return u === void 0 && c !== void 0 && (u = V(n[0], c)), /* @__PURE__ */ o.createElement(
+    } = this.props, r = i.getPopupSettings(), h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, u = r.width !== void 0 ? r.width : i.popupWidth;
+    let { group: g } = this.state;
+    return g === void 0 && p !== void 0 && (g = V(n[0], p)), /* @__PURE__ */ o.createElement(
       Et,
       {
-        width: g,
+        width: u,
         popupSettings: {
           animate: r.animate,
           anchor: this.element,
@@ -2175,7 +2188,7 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
             }
           )
         },
-        !p && u && n.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: u, groupMode: "modern", render: d }),
+        !c && g && n.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: g, groupMode: "modern", render: d }),
         this.renderList()
       ),
       s && /* @__PURE__ */ o.createElement("div", { className: "k-list-footer" }, s)
@@ -2187,8 +2200,8 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
       data: s = [],
       listNoDataRender: n,
       itemRender: a,
-      groupHeaderItemRender: c
-    } = this.props, p = this.value, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+      groupHeaderItemRender: p
+    } = this.props, c = this.value, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
     return /* @__PURE__ */ o.createElement(
       Ue,
       {
@@ -2196,7 +2209,7 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
         show: d,
         data: s.slice(),
         focusedIndex: this.focusedIndex(),
-        value: p,
+        value: c,
         textField: e,
         valueField: e,
         highlightSelected: !1,
@@ -2208,7 +2221,7 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
         wrapperCssClass: "k-list-content",
         onClick: this.handleItemClick,
         itemRender: a,
-        groupHeaderItemRender: c,
+        groupHeaderItemRender: p,
         noDataRender: n,
         onMouseDown: (r) => r.preventDefault(),
         onScroll: this.onScroll
@@ -2233,12 +2246,12 @@ const si = "Please enter a valid value!", { sizeMap: ls, roundedMap: ii } = $e,
   focusedIndex(i) {
     const { data: t = [], textField: e, focusedItemIndex: s, skipDisabledItems: n } = this.props, a = i !== void 0 ? i : this.value;
     if (this.state.focusedItem !== void 0)
-      return t.findIndex((c) => R(c, this.state.focusedItem, e));
+      return t.findIndex((p) => R(p, this.state.focusedItem, e));
     if (s)
       return s(t, a, e);
     {
-      const c = t.indexOf(as(t, a, e));
-      return n && e && c === -1 ? t.findIndex((p) => !p.disabled && p[e]) : Math.max(0, c);
+      const p = t.indexOf(as(t, a, e));
+      return n && e && p === -1 ? t.findIndex((c) => !c.disabled && c[e]) : Math.max(0, p);
     }
   }
 };
@@ -2277,7 +2290,7 @@ oi.displayName = "KendoReactAutoComplete";
 const ai = (i) => i.syntheticEvent.preventDefault(), li = (i) => i.syntheticEvent.stopPropagation();
 class ys extends o.Component {
   render() {
-    const { data: t, guid: e, focused: s, tagRender: n, tag: a, onTagDelete: c, size: p } = this.props;
+    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) => {
       const h = a ? /* @__PURE__ */ o.createElement(
         a,
@@ -2286,7 +2299,7 @@ class ys extends o.Component {
           tagData: d,
           guid: e,
           focusedTag: s,
-          onTagDelete: c
+          onTagDelete: p
         }
       ) : /* @__PURE__ */ o.createElement(
         _s,
@@ -2298,11 +2311,11 @@ class ys extends o.Component {
           key: d.text + r,
           text: d.text,
           removable: !0,
-          onRemove: (g) => c.call(void 0, d.data, g.syntheticEvent),
+          onRemove: (u) => p.call(void 0, d.data, u.syntheticEvent),
           onMouseDown: ai,
           onClick: li,
           className: d === s ? "k-focus" : void 0,
-          size: p
+          size: c
         }
       );
       return n ? n(d, h) : h;
@@ -2317,21 +2330,21 @@ const rs = 500, es = (i) => {
     windowWidth: s = 0,
     navigatable: n,
     navigatableElements: a,
-    expand: c,
-    animation: p,
+    expand: p,
+    animation: c,
     onClose: d,
     adaptiveTitle: r,
     mobileFilter: h
-  } = i, g = {
+  } = i, u = {
     navigatable: n || !1,
     navigatableElements: a || [],
-    expand: c,
-    animation: p !== !1,
+    expand: p,
+    animation: c !== !1,
     onClose: d,
     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(Yt, { ...g }, /* @__PURE__ */ o.createElement(Jt, { 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(
+  return /* @__PURE__ */ o.createElement(Yt, { ...u }, /* @__PURE__ */ o.createElement(Jt, { 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,
     {
       tabIndex: 0,
@@ -2375,17 +2388,17 @@ const rs = 500, es = (i) => {
     }, this._element = null, this._valueItemsDuringOnChange = null, this._inputId = Fe(), this.base = new ie(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();
     }, this.handleItemSelect = (t, e) => {
-      const { data: s = [], dataItemKey: n, virtual: a } = this.props, c = a ? a.skip : 0, p = s[t - c], d = this.value.findIndex((g) => R(g, p, n));
-      this._lastSelectedOrDeslectedItemIndex = s.findIndex((g) => R(g, p, n));
+      const { data: s = [], dataItemKey: n, virtual: a } = this.props, p = a ? a.skip : 0, c = s[t - p], d = this.value.findIndex((u) => R(u, c, n));
+      this._lastSelectedOrDeslectedItemIndex = s.findIndex((u) => R(u, c, n));
       let r = [];
-      d !== -1 ? (r = this.value, r.splice(d, 1)) : r = [...this.value, p], (this.props.filter !== void 0 ? this.props.filter : this.state.text) && !this.mobileMode && (this.state.text && (e.data.text = ""), this.base.filterChanged("", e)), this._adaptiveInput && this._adaptiveInput.blur(), this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.triggerOnChange(r, e), this.base.triggerPageChangeCornerItems(p, e);
+      d !== -1 ? (r = this.value, r.splice(d, 1)) : r = [...this.value, c], (this.props.filter !== void 0 ? this.props.filter : this.state.text) && !this.mobileMode && (this.state.text && (e.data.text = ""), this.base.filterChanged("", e)), this._adaptiveInput && this._adaptiveInput.blur(), this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.triggerOnChange(r, e), this.base.triggerPageChangeCornerItems(c, e);
     }, this.onTagDelete = (t, e) => {
       const s = this.base.initState();
       s.syntheticEvent = e, this.opened && this.base.togglePopup(s), !this.state.focused && !this.mobileMode && (s.data.focused = !0, this.focus());
       const n = this.value;
       vt(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, c = a ? a.skip : 0, p = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: d } = this.getFocusedState(), r = n && p, h = s[t - c];
+      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 = 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;
@@ -2401,87 +2414,87 @@ const rs = 500, es = (i) => {
       const s = this.props.filter !== void 0 ? this.props.filter : this.state.text;
       G(s) && s !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this._lastSelectedOrDeslectedItemIndex = null, this.applyState(e);
     }, this.onInputKeyDown = (t) => {
-      const { data: e = [], textField: s, groupField: n } = this.props, a = t.keyCode, c = this.props.filter !== void 0 ? this.props.filter : this.state.text, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: d, focusedIndex: r } = this.getFocusedState(), h = this.base.initState();
-      if (h.syntheticEvent = t, !c && this.value.length > 0 && (a === m.left || a === m.right || a === m.home || a === m.end || a === m.delete || a === m.backspace) && !t.shiftKey)
+      const { data: e = [], textField: s, groupField: n } = this.props, a = t.keyCode, p = this.props.filter !== void 0 ? this.props.filter : this.state.text, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: d, focusedIndex: r } = this.getFocusedState(), h = this.base.initState();
+      if (h.syntheticEvent = t, !p && this.value.length > 0 && (a === f.left || a === f.right || a === f.home || a === f.end || a === f.delete || a === f.backspace) && !t.shiftKey)
         return this.onTagsNavigate(t, h);
-      const g = () => {
+      const u = () => {
         t.preventDefault(), this.base.togglePopup(h), this.applyState(h);
       };
       if (this.opened)
-        if (a === m.pageUp)
+        if (a === f.pageUp)
           this.base.scrollPopupByPageSize(-1);
-        else if (a === m.pageDown)
+        else if (a === f.pageDown)
           this.base.scrollPopupByPageSize(1);
         else if ((t.ctrlKey || t.metaKey) && t.code === "KeyA") {
-          const f = (this.state.value && this.state.value.length) === e.length ? [] : e;
-          this.updateStateOnKeyboardNavigation(f, h);
-        } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === m.end) {
-          const u = e.slice(this.getFocusedState().focusedIndex);
-          this.itemFocus(e.length - 1, h), this.updateStateOnKeyboardNavigation(u, h);
-        } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === m.home) {
-          const u = e.slice(0, this.getFocusedState().focusedIndex + 1);
-          this.itemFocus(0, h), this.updateStateOnKeyboardNavigation(u, h);
-        } else if (t.shiftKey && t.keyCode === m.up) {
-          let u;
-          const f = this.getLastSelectedOrDeselectedIndex(1, r);
-          f === null ? u = r !== 0 ? e.slice(r - 1, r) : [e[r]] : f === r ? u = [e[f - 1]] : r >= 0 && (u = f > r ? e.slice(r - 1, f) : e.slice(f - 1, r)), u && u.length > 0 && (r >= 1 && this.itemFocus(r - 1, h), this.updateStateOnKeyboardNavigation(u, h));
-        } else if (t.shiftKey && t.keyCode === m.down) {
-          let u;
-          const f = this.getLastSelectedOrDeselectedIndex(0, r);
-          f === null ? u = r !== e.length - 1 ? e.slice(r, r + 1) : [e[r]] : f === r ? u = e.slice(r, r + 2) : r >= 0 && (u = f > r ? e.slice(r + 1, f + 1) : e.slice(f, r + 2)), u && u.length >= 1 && (this.itemFocus(r + 1, h), this.updateStateOnKeyboardNavigation(u, h));
-        } else if (t.altKey && a === m.up)
-          g();
-        else if (a === m.up || a === m.down) {
+          const m = (this.state.value && this.state.value.length) === e.length ? [] : e;
+          this.updateStateOnKeyboardNavigation(m, h);
+        } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === f.end) {
+          const g = e.slice(this.getFocusedState().focusedIndex);
+          this.itemFocus(e.length - 1, h), this.updateStateOnKeyboardNavigation(g, h);
+        } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === f.home) {
+          const g = e.slice(0, this.getFocusedState().focusedIndex + 1);
+          this.itemFocus(0, h), this.updateStateOnKeyboardNavigation(g, h);
+        } else if (t.shiftKey && t.keyCode === f.up) {
+          let g;
+          const m = this.getLastSelectedOrDeselectedIndex(1, r);
+          m === null ? g = r !== 0 ? e.slice(r - 1, r) : [e[r]] : m === r ? g = [e[m - 1]] : r >= 0 && (g = m > r ? e.slice(r - 1, m) : e.slice(m - 1, r)), g && g.length > 0 && (r >= 1 && this.itemFocus(r - 1, h), this.updateStateOnKeyboardNavigation(g, h));
+        } else if (t.shiftKey && t.keyCode === f.down) {
+          let g;
+          const m = this.getLastSelectedOrDeselectedIndex(0, r);
+          m === null ? g = r !== e.length - 1 ? e.slice(r, r + 1) : [e[r]] : m === r ? g = e.slice(r, r + 2) : r >= 0 && (g = m > r ? e.slice(r + 1, m + 1) : e.slice(m, r + 2)), g && g.length >= 1 && (this.itemFocus(r + 1, h), this.updateStateOnKeyboardNavigation(g, h));
+        } else if (t.altKey && a === f.up)
+          u();
+        else if (a === f.up || a === f.down) {
           if (n !== "" && s)
-            if (!this.props.skipDisabledItems && p)
+            if (!this.props.skipDisabledItems && c)
               this.onNavigate(h, a);
             else {
-              let u = 0;
-              if (a === m.down || a === m.right) {
-                const f = e.slice(r + 1).find((v) => !v.disabled && v[s]);
-                u = f && e.findIndex((v) => v[s] === f[s]);
-              } else if (a === m.up || a === m.left) {
-                let f;
+              let g = 0;
+              if (a === f.down || a === f.right) {
+                const m = e.slice(r + 1).find((v) => !v.disabled && v[s]);
+                g = m && e.findIndex((v) => v[s] === m[s]);
+              } else if (a === f.up || a === f.left) {
+                let m;
                 if (r === -1)
-                  f = e, u = e.findIndex((v) => !v.disabled && v[s]);
+                  m = e, g = e.findIndex((v) => !v.disabled && v[s]);
                 else {
-                  f = e.slice(0, r);
-                  let v = f.pop();
+                  m = e.slice(0, r);
+                  let v = m.pop();
                   for (; v && v.disabled; )
-                    v = f.pop();
-                  u = v && e.findIndex((b) => b[s] === v[s]);
+                    v = m.pop();
+                  g = v && e.findIndex((b) => b[s] === v[s]);
                 }
               }
-              if (u) {
-                const f = u - r;
-                this.onNavigate(h, a, f);
+              if (g) {
+                const m = g - r;
+                this.onNavigate(h, a, m);
               } else
-                u !== void 0 && this.onNavigate(h, a);
+                g !== void 0 && this.onNavigate(h, a);
             }
-          else if (!this.props.skipDisabledItems && p)
+          else if (!this.props.skipDisabledItems && c)
             this.onNavigate(h, a);
           else {
-            let u = null;
-            if (a === m.down || a === m.right)
-              u = e.slice(r + 1).find((f) => !f.disabled);
-            else if (a === m.up || a === m.left) {
-              const f = e.slice(0, r);
-              for (u = f.pop(); u && u.disabled; )
-                u = f.pop();
+            let g = null;
+            if (a === f.down || a === f.right)
+              g = e.slice(r + 1).find((m) => !m.disabled);
+            else if (a === f.up || a === f.left) {
+              const m = e.slice(0, r);
+              for (g = m.pop(); g && g.disabled; )
+                g = m.pop();
             }
-            if (u) {
-              const f = u.id - r - 1;
-              this.onNavigate(h, a, f);
+            if (g) {
+              const m = g.id - r - 1;
+              this.onNavigate(h, a, m);
             } else
               this.onNavigate(h, a);
           }
           this.applyState(h), t.preventDefault();
         } else
-          a === m.enter ? (t.preventDefault(), this.props.allowCustom && c && d === null ? this.customItemSelect(t) : d && d.disabled ? g() : this.selectFocusedItem(t)) : a === m.esc && g();
+          a === f.enter ? (t.preventDefault(), this.props.allowCustom && p && d === null ? this.customItemSelect(t) : d && d.disabled ? u() : this.selectFocusedItem(t)) : a === f.esc && u();
       else
-        t.altKey && a === m.down && g();
+        t.altKey && a === f.down && u();
     }, this.listContainerContent = () => {
-      const { header: t, footer: e, allowCustom: s, size: n, data: a = [], groupStickyHeaderItemRender: c, groupField: p, list: d } = this.props, r = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: h } = this.getFocusedState(), g = s && r && /* @__PURE__ */ o.createElement(
+      const { header: t, footer: e, allowCustom: s, size: n, data: a = [], groupStickyHeaderItemRender: p, groupField: c, list: d } = this.props, r = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: h } = this.getFocusedState(), u = s && r && /* @__PURE__ */ o.createElement(
         "div",
         {
           className: B("k-list", {
@@ -2501,8 +2514,8 @@ const rs = 500, es = (i) => {
           /* @__PURE__ */ o.createElement(ke, { name: "plus", icon: Ms, style: { position: "absolute", right: "0.5em" } })
         )
       );
-      let { group: u } = this.state;
-      return u === void 0 && p !== void 0 && (u = V(a[0], p)), /* @__PURE__ */ o.createElement(o.Fragment, null, t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), g, /* @__PURE__ */ o.createElement(
+      let { group: g } = this.state;
+      return g === void 0 && c !== void 0 && (g = V(a[0], c)), /* @__PURE__ */ o.createElement(o.Fragment, null, t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), u, /* @__PURE__ */ o.createElement(
         "div",
         {
           className: B(
@@ -2513,11 +2526,11 @@ const rs = 500, es = (i) => {
             }
           )
         },
-        !d && u && a.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: u, groupMode: "modern", render: c }),
+        !d && g && a.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: g, groupMode: "modern", render: p }),
         this.renderList()
       ), e && /* @__PURE__ */ o.createElement("div", { className: "k-list-footer" }, e));
     }, this.renderListContainer = () => {
-      const t = this.base, { dir: e, data: s = [] } = this.props, n = this.base.getPopupSettings(), a = n.width !== void 0 ? n.width : t.popupWidth, c = {
+      const t = this.base, { dir: e, data: s = [] } = this.props, n = this.base.getPopupSettings(), a = n.width !== void 0 ? n.width : t.popupWidth, p = {
         dir: e !== void 0 ? e : t.dirCalculated,
         width: a,
         popupSettings: {
@@ -2536,11 +2549,11 @@ const rs = 500, es = (i) => {
         },
         itemsCount: [s.length, this.value.length]
       };
-      return /* @__PURE__ */ o.createElement(Et, { ...c }, this.listContainerContent());
+      return /* @__PURE__ */ o.createElement(Et, { ...p }, this.listContainerContent());
     }, this.renderAdaptiveListContainer = () => {
       const { adaptiveTitle: t, filterable: e, filter: s } = this.props, { windowWidth: n = 0 } = this.state, a = s !== void 0 ? s : this.state.text;
       this.localization = Ae(this);
-      const c = e ? /* @__PURE__ */ o.createElement(
+      const p = e ? /* @__PURE__ */ o.createElement(
         Be,
         {
           value: a,
@@ -2551,12 +2564,12 @@ const rs = 500, es = (i) => {
           rounded: this.props.rounded,
           fillMode: this.props.fillMode
         }
-      ) : null, p = {
+      ) : null, c = {
         adaptiveTitle: t,
         expand: this.opened,
         onClose: (d) => this.onCancel(d),
         windowWidth: n,
-        mobileFilter: c,
+        mobileFilter: p,
         footer: {
           cancelText: this.localization.toLanguageString(ot, le[ot]),
           onCancel: this.onCancel,
@@ -2564,7 +2577,7 @@ const rs = 500, es = (i) => {
           onApply: this.closePopup
         }
       };
-      return /* @__PURE__ */ o.createElement(es, { ...p }, /* @__PURE__ */ o.createElement(lt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
+      return /* @__PURE__ */ o.createElement(es, { ...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" });
@@ -2582,30 +2595,30 @@ const rs = 500, es = (i) => {
         listNoDataRender: s,
         itemRender: n,
         groupHeaderItemRender: a,
-        dataItemKey: c,
-        virtual: p
-      } = this.props, d = this.base.vs, r = p ? p.skip : 0, { focusedIndex: h } = this.getFocusedState(), g = this.base.getPopupSettings(), u = `translateY(${d.translate}px)`;
+        dataItemKey: p,
+        virtual: c = { skip: 0, total: void 0 }
+      } = this.props, d = this.base.vs, { focusedIndex: r } = this.getFocusedState(), h = this.base.getPopupSettings(), u = `translateY(${d.translate}px)`;
       return /* @__PURE__ */ o.createElement(
         Ue,
         {
           id: this.base.listBoxId,
           show: this.opened,
           data: t.slice(),
-          focusedIndex: h - r,
+          focusedIndex: r - c.skip,
           value: this.value,
           textField: e,
-          valueField: c,
+          valueField: p,
           optionsGuid: this.base.guid,
           groupField: this.props.groupField,
           groupMode: "modern",
-          listRef: (f) => {
-            d.list = this.base.list = f;
+          listRef: (g) => {
+            d.list = this.base.list = g;
           },
-          wrapperStyle: this.mobileMode ? {} : { maxHeight: g.height },
+          wrapperStyle: this.mobileMode ? {} : { maxHeight: h.height },
           wrapperCssClass: "k-list-content",
           listStyle: d.enabled ? { transform: u } : void 0,
           key: "listKey",
-          skip: r,
+          skip: c.skip,
           onClick: this.handleItemClick,
           itemRender: n,
           groupHeaderItemRender: a,
@@ -2614,7 +2627,8 @@ const rs = 500, es = (i) => {
           onBlur: this.handleBlur,
           onScroll: this.onScroll,
           wrapperRef: d.scrollerRef,
-          scroller: this.base.renderScrollElement()
+          scroller: this.base.renderScrollElement(),
+          ariaSetSize: c.total
         }
       );
     }, this.onScroll = (t) => {
@@ -2623,10 +2637,10 @@ const rs = 500, es = (i) => {
       const { groupField: n } = this.props;
       let { data: a = [] } = this.props;
       if (!(!n || !a.length) && n) {
-        const c = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : s ? s.children[0].offsetHeight : 0), d = t.target.scrollTop - e.skip * c;
+        const p = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : s ? s.children[0].offsetHeight : 0), d = t.target.scrollTop - e.skip * p;
         a = this.base.getGroupedDataModernMode(a, n);
         let r = a[0][n];
-        for (let h = 1; h < a.length && !(c * h > d); h++)
+        for (let h = 1; h < a.length && !(p * h > d); h++)
           a[h] && a[h][n] && (r = a[h][n]);
         r !== this.state.group && this.setState({
           group: r
@@ -2640,8 +2654,8 @@ const rs = 500, es = (i) => {
       n.syntheticEvent = t;
       const a = s ? { [s]: e } : e;
       this.state.text !== void 0 && (n.data.text = ""), n.data.focusedIndex = void 0, this.base.filterChanged("", n);
-      const c = [...this.value, a];
-      this.triggerOnChange(c, n), this.base.togglePopup(n), this.applyState(n);
+      const p = [...this.value, a];
+      this.triggerOnChange(p, n), this.base.togglePopup(n), this.applyState(n);
     }, this.handleWrapperClick = (t) => {
       const e = this._input;
       !this.opened && e && this.focusElement(e);
@@ -2728,13 +2742,13 @@ const rs = 500, es = (i) => {
   }
   /** @hidden */
   componentDidUpdate(i, t) {
-    var g;
-    const { virtual: e, groupField: s = "", data: n = [] } = this.props, a = e ? e.skip : 0, c = i.virtual ? i.virtual.total : 0, p = i.opened !== void 0 ? i.opened : t.opened, d = !p && this.opened, r = p && !this.opened;
-    if (!this.base.getPopupSettings().animate && r && this.onPopupClosed(), e && e.total !== c)
+    var u;
+    const { virtual: e, groupField: s = "", data: n = [] } = this.props, a = e ? e.skip : 0, p = i.virtual ? i.virtual.total : 0, c = i.opened !== void 0 ? i.opened : t.opened, d = !c && this.opened, r = c && !this.opened;
+    if (!this.base.getPopupSettings().animate && r && this.onPopupClosed(), e && e.total !== p)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
-      let { focusedItem: u, focusedIndex: f } = this.getFocusedState();
-      s !== "" && (f = (g = this.base.getGroupedDataModernMode(n, s)) == null ? void 0 : g.indexOf(u)), d && e ? this.base.scrollToVirtualItem(e, f - a) : d && !e ? (n && n.length !== 0 && this.base.resetGroupStickyHeader(n[0][s], this), this.base.scrollToItem(f)) : this.opened && p && u && this.scrollToFocused && this.base.scrollToItem(f - a);
+      let { focusedItem: g, focusedIndex: m } = this.getFocusedState();
+      s !== "" && (m = (u = this.base.getGroupedDataModernMode(n, s)) == null ? void 0 : u.indexOf(g)), d && e ? this.base.scrollToVirtualItem(e, m - a) : d && !e ? (n && n.length !== 0 && this.base.resetGroupStickyHeader(n[0][s], this), this.base.scrollToItem(m)) : this.opened && c && g && this.scrollToFocused && this.base.scrollToItem(m - a);
     }
     this.scrollToFocused = !1, this.setValidity();
   }
@@ -2750,18 +2764,18 @@ const rs = 500, es = (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: c, focusedIndex: p } = this.getFocusedState(), d = s && a, r = cs(c), h = this.base, g = h.vs;
-    if (this.opened && t === m.up && r)
+    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 === f.up && r)
       this.state.focusedIndex !== void 0 && (i.data.focusedIndex = void 0);
     else {
-      const u = h.navigation.navigate({
+      const g = h.navigation.navigate({
         keyCode: t,
-        current: p,
-        max: (g.enabled ? g.total : n.length) - 1,
+        current: c,
+        max: (u.enabled ? u.total : n.length) - 1,
         min: d ? -1 : 0,
         skipItems: e || void 0
       });
-      u !== void 0 && (this.itemFocus(u, i), this.scrollToFocused = !0);
+      g !== void 0 && (this.itemFocus(g, i), this.scrollToFocused = !0);
     }
     this.applyState(i);
   }
@@ -2774,18 +2788,18 @@ const rs = 500, es = (i) => {
       dir: s,
       disabled: n,
       textField: a,
-      dataItemKey: c,
-      virtual: p,
+      dataItemKey: p,
+      virtual: c,
       size: d,
       rounded: r,
       fillMode: h,
-      loading: g,
-      filter: u
-    } = this.props, { text: f, focused: v, focusedTag: b, currentValue: w } = this.state, S = this.base.vs, D = this.props.id || this._inputId;
-    S.enabled = p !== void 0, p !== void 0 && (S.skip = p.skip, S.total = p.total, S.pageSize = p.pageSize);
+      loading: u,
+      filter: g
+    } = this.props, { text: m, focused: v, focusedTag: b, currentValue: w } = this.state, S = this.base.vs, D = this.props.id || this._inputId;
+    S.enabled = c !== void 0, c !== void 0 && (S.skip = c.skip, S.total = c.total, S.pageSize = c.pageSize);
     const N = this.mobileMode && this.opened ? w : this.tagsToRender;
     this.setItems(this.tagsToRender, this._tags);
-    const O = !this.validityStyles || this.validity.valid, _ = !!(u !== void 0 ? u : f) || N && N.length > 0, C = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
+    const O = !this.validityStyles || this.validity.valid, _ = !!(g !== void 0 ? g : m) || N && N.length > 0, C = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
       "div",
       {
         ref: this.componentRef,
@@ -2796,7 +2810,7 @@ const rs = 500, es = (i) => {
           "k-focus": v && !n,
           "k-invalid": !O,
           "k-disabled": n,
-          "k-loading": g,
+          "k-loading": u,
           "k-required": this.required
         }),
         style: e ? { ...i, width: void 0 } : i,
@@ -2804,7 +2818,7 @@ const rs = 500, es = (i) => {
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onClick: this.handleWrapperClick,
-        onMouseDown: zs
+        onMouseDown: Hs
       },
       /* @__PURE__ */ o.createElement("div", { className: B("k-input-values") }, /* @__PURE__ */ o.createElement(
         "div",
@@ -2823,12 +2837,12 @@ const rs = 500, es = (i) => {
             onTagDelete: this.onTagDelete,
             data: N,
             guid: this.base.guid,
-            focused: b ? N.find((F) => xt(F, b, c)) : void 0,
+            focused: b ? N.find((F) => xt(F, b, p)) : void 0,
             size: d
           }
         )
       ), this.renderSearchBar(D)),
-      g && /* @__PURE__ */ o.createElement(ke, { className: "k-input-loading-icon", name: "loading" }),
+      u && /* @__PURE__ */ o.createElement(ke, { className: "k-input-loading-icon", name: "loading" }),
       _ && /* @__PURE__ */ o.createElement(rt, { onClick: this.clearButtonClick }),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
@@ -2837,7 +2851,7 @@ const rs = 500, es = (i) => {
       {
         label: e,
         editorId: D,
-        editorValue: f || V(this.value[0], a),
+        editorValue: m || V(this.value[0], a),
         editorValid: O,
         editorDisabled: n,
         style: { width: i ? i.width : void 0 },
@@ -2846,16 +2860,16 @@ const rs = 500, es = (i) => {
     ) : C;
   }
   renderSearchBar(i) {
-    const { activedescendant: t, focusedTag: e, currentValue: s } = this.state, { disabled: n, placeholder: a, ariaDescribedBy: c } = this.props, p = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: d } = this.getFocusedState(), r = this.value.length === 0 && !p ? a : void 0, h = s && s.length > 0 ? void 0 : a, g = t === st.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(
       Zt,
       {
         id: i,
-        size: Math.max((r || "").length, p.length, 1),
+        size: Math.max((r || "").length, c.length, 1),
         tabIndex: this.props.tabIndex,
         accessKey: this.props.accessKey,
         placeholder: this.mobileMode && this.opened ? h : r,
-        value: p,
+        value: c,
         onChange: this.onChangeHandler,
         onKeyDown: this.onInputKeyDown,
         ref: this.searchbarRef,
@@ -2863,8 +2877,8 @@ const rs = 500, es = (i) => {
         expanded: this.opened,
         owns: this.base.listBoxId,
         role: "combobox",
-        activedescendant: g,
-        ariaDescribedBy: `tagslist-${this.base.guid}${c ? " " + c : ""}`,
+        activedescendant: u,
+        ariaDescribedBy: `tagslist-${this.base.guid}${p ? " " + p : ""}`,
         ariaLabelledBy: this.props.ariaLabelledBy,
         ariaRequired: this.required
       }
@@ -2872,31 +2886,31 @@ const rs = 500, es = (i) => {
   }
   onTagsNavigate(i, t) {
     const e = i.keyCode, { focusedTag: s } = this.state, n = this._tags, a = this.props.dataItemKey;
-    let c = s ? n.findIndex((r) => xt(r, s, a)) : -1, p;
-    const d = c !== -1;
-    if (e === m.left)
-      d ? c = Math.max(0, c - 1) : c = n.length - 1, p = n[c];
-    else if (e === m.right)
-      c === n.length - 1 ? p = void 0 : d && (c = Math.min(n.length - 1, c + 1), p = n[c]);
-    else if (e === m.home && !i.shiftKey)
-      p = n[0];
-    else if (e === m.end && !i.shiftKey)
-      p = n[n.length - 1];
-    else if (e === m.delete) {
+    let p = s ? n.findIndex((r) => xt(r, s, a)) : -1, c;
+    const d = p !== -1;
+    if (e === f.left)
+      d ? p = Math.max(0, p - 1) : p = n.length - 1, c = n[p];
+    else if (e === f.right)
+      p === n.length - 1 ? c = void 0 : d && (p = Math.min(n.length - 1, p + 1), c = n[p]);
+    else if (e === f.home && !i.shiftKey)
+      c = n[0];
+    else if (e === f.end && !i.shiftKey)
+      c = n[n.length - 1];
+    else if (e === f.delete) {
       if (d) {
         const r = this.value;
-        vt(r, n[c].data, a), this.triggerOnChange(r, t);
+        vt(r, n[p].data, a), this.triggerOnChange(r, t);
       }
-    } else if (e === m.backspace) {
+    } else if (e === f.backspace) {
       const r = this.value;
       if (d)
-        vt(r, n[c].data, a), this.triggerOnChange(r, t);
+        vt(r, n[p].data, a), this.triggerOnChange(r, t);
       else if (!d && n.length) {
         const h = n.pop();
         vt(r, h.data, a), this.triggerOnChange(r, t);
       }
     }
-    p !== s && (t.data.focusedTag = p, t.data.activedescendant = st.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" });
@@ -2909,7 +2923,7 @@ const rs = 500, es = (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: c, focusedItemIndex: p = Ve, 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 {
@@ -2918,7 +2932,7 @@ const rs = 500, es = (i) => {
         focusedType: 1
         /* ListItem */
       };
-    const g = this.value;
+    const u = this.value;
     if (e && t)
       return {
         focusedItem: null,
@@ -2927,25 +2941,25 @@ const rs = 500, es = (i) => {
         /* CustomItem */
       };
     if (t)
-      return h = p(s, t, c), {
+      return h = c(s, t, p), {
         focusedItem: s[h],
         focusedIndex: h + r,
         focusedType: 1
         /* ListItem */
       };
-    if (g.length) {
-      const u = g[g.length - 1];
-      return h = s.findIndex((f) => R(f, u, n)), s[h] !== void 0 ? {
+    if (u.length) {
+      const g = u[u.length - 1];
+      return h = s.findIndex((m) => R(m, g, n)), s[h] !== void 0 ? {
         focusedIndex: h + r,
         focusedItem: s[h],
         focusedType: 1
         /* ListItem */
       } : { focusedType: 0, focusedIndex: -1 };
-    } else if (d && c && !t && r === 0) {
-      const u = s.findIndex((f) => !f.disabled && f[c]);
+    } else if (d && p && !t && r === 0) {
+      const g = s.findIndex((m) => !m.disabled && m[p]);
       return {
-        focusedIndex: u,
-        focusedItem: s[u - r],
+        focusedIndex: g,
+        focusedItem: s[g - r],
         focusedType: 1
         /* ListItem */
       };
@@ -3037,14 +3051,14 @@ const hi = (i) => /* @__PURE__ */ o.createElement(
   }
 ), ui = (i, t) => i ? typeof i == "number" ? i + "px" : i : t, gi = Ke(), ts = o.forwardRef((i, t) => {
   const e = Gt(gi, i), s = o.useRef(null), n = o.useRef(null), a = ws(), {
-    columns: c = ze.columns,
-    popupSettings: p = ze.popupSettings,
+    columns: p = He.columns,
+    popupSettings: c = He.popupSettings,
     className: d,
     size: r,
     onOpen: h,
-    onClose: g,
-    onFocus: u,
-    onBlur: f,
+    onClose: u,
+    onFocus: g,
+    onBlur: m,
     onChange: v,
     onFilterChange: b,
     onPageChange: w,
@@ -3071,60 +3085,60 @@ const hi = (i) => /* @__PURE__ */ o.createElement(
     [e.data, e.groupField]
   ), [N, O] = o.useState(D), [_, C] = o.useState(!0), F = o.useMemo(
     () => {
-      const P = /* @__PURE__ */ o.createElement("th", { className: "k-table-th", colSpan: c.length }, N);
-      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, c.map(
-        (z, L) => /* @__PURE__ */ o.createElement(
+      const P = /* @__PURE__ */ o.createElement("th", { className: "k-table-th", colSpan: p.length }, N);
+      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(
+        (H, L) => /* @__PURE__ */ o.createElement(
           "col",
           {
-            key: z.uniqueKey ? z.uniqueKey : L,
-            style: { width: z.width ? z.width : ze.width }
+            key: H.uniqueKey ? H.uniqueKey : L,
+            style: { width: H.width ? H.width : He.width }
           }
         )
-      )), /* @__PURE__ */ o.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ o.createElement("tr", { className: "k-table-row" }, c.map((z, L) => /* @__PURE__ */ o.createElement("th", { className: "k-table-th", key: z.uniqueKey ? z.uniqueKey : L }, z.header || " "))), N && _ && /* @__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((H, L) => /* @__PURE__ */ o.createElement("th", { className: "k-table-th", key: H.uniqueKey ? H.uniqueKey : L }, H.header || " "))), N && _ && /* @__PURE__ */ o.createElement("tr", { className: "k-table-group-row" }, e.groupStickyHeaderItemRender ? e.groupStickyHeaderItemRender.call(void 0, P, {}) : P)))));
     },
-    [e.header, c, N, _]
+    [e.header, p, N, _]
   ), x = o.useMemo(
     () => (
       // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
-      `calc(${c.map((P) => ui(P.width, ze.width)).filter(Boolean).join(" + ")} + ${a}px + 4px)`
+      `calc(${p.map((P) => ui(P.width, He.width)).filter(Boolean).join(" + ")} + ${a}px + 4px)`
     ),
-    [c, a]
+    [p, a]
   ), E = e.virtual ? e.virtual.skip : 0, M = o.useCallback(
-    (P, z) => {
-      const L = c.map((J, W) => /* @__PURE__ */ o.createElement(
+    (P, H) => {
+      const L = p.map((J, W) => /* @__PURE__ */ o.createElement(
         "span",
         {
           className: e.itemRender ? void 0 : "k-table-td",
-          style: e.itemRender ? void 0 : { width: J.width ? J.width : ze.width },
+          style: e.itemRender ? void 0 : { width: J.width ? J.width : He.width },
           key: J.uniqueKey ? J.uniqueKey : W
         },
-        J.field ? String(kt(J.field)(z.dataItem)) : ""
+        J.field ? String(kt(J.field)(H.dataItem)) : ""
       ));
       let me, Ce, Ne, Oe, Pe = e.data || [];
-      const A = z.index - E;
+      const A = H.index - E;
       e.groupField !== void 0 && (Oe = kt(e.groupField), Ce = Oe(Pe[A]), Ne = Oe(Pe[A - 1]), Ce && Ne && Ce !== Ne && (me = Ce)), me && e.groupMode === "classic" && L.push(/* @__PURE__ */ o.createElement("div", { key: "group", className: "k-table-td k-table-group-td" }, /* @__PURE__ */ o.createElement("span", null, me)));
       const X = o.cloneElement(P, {
         ...P.props,
         className: B("k-table-row", {
-          "k-table-alt-row": z.index % 2 !== 0,
-          "k-focus": z.focused,
-          "k-selected": z.selected,
+          "k-table-alt-row": H.index % 2 !== 0,
+          "k-focus": H.focused,
+          "k-selected": H.selected,
           "k-first": !!me,
-          "k-disabled": z.dataItem.disabled
+          "k-disabled": H.dataItem.disabled
         })
       }, L);
-      return e.itemRender ? e.itemRender.call(void 0, X, z) : X;
+      return e.itemRender ? e.itemRender.call(void 0, X, H) : X;
     },
-    [c, e.groupField, e.itemRender, e.data, E]
+    [p, e.groupField, e.itemRender, e.data, E]
   ), K = o.useCallback(
-    (P, z) => {
+    (P, H) => {
       P && P.call(void 0, {
-        ...z,
+        ...H,
         target: s.current
       });
     },
     []
-  ), U = o.useCallback((P) => (e.virtual || O(D), K(h, P)), [K, h, e.virtual, D]), j = o.useCallback((P) => K(g, P), [g]), Y = o.useCallback((P) => K(u, P), [u]), re = o.useCallback((P) => K(f, P), [f]), we = o.useCallback((P) => K(v, P), [v]), ne = o.useCallback((P) => K(w, P), [w]), Q = o.useCallback((P) => (O(D), K(b, {
+  ), U = o.useCallback((P) => (e.virtual || O(D), K(h, P)), [K, h, e.virtual, D]), j = o.useCallback((P) => K(u, P), [u]), Y = o.useCallback((P) => K(g, P), [g]), re = o.useCallback((P) => K(m, P), [m]), we = o.useCallback((P) => K(v, P), [v]), ne = o.useCallback((P) => K(w, P), [w]), Q = o.useCallback((P) => (O(D), K(b, {
     ...P,
     mobileMode: P.target.mobileMode
   })), [b]), oe = o.useCallback(
@@ -3143,7 +3157,7 @@ const hi = (i) => /* @__PURE__ */ o.createElement(
   return /* @__PURE__ */ o.createElement(
     Ns.Provider,
     {
-      value: (P) => ({ ...P, popupClass: `k-dropdowngrid-popup ${p.popupClass}` })
+      value: (P) => ({ ...P, popupClass: `k-dropdowngrid-popup ${c.popupClass}` })
     },
     /* @__PURE__ */ o.createElement(
       bs,
@@ -3152,8 +3166,8 @@ const hi = (i) => /* @__PURE__ */ o.createElement(
         list: Le,
         popupSettings: {
           width: x,
-          ...p,
-          className: p.className
+          ...c,
+          className: c.className
         },
         ref: n,
         header: F,
@@ -3186,7 +3200,7 @@ const hi = (i) => /* @__PURE__ */ o.createElement(
 }), fi = {
   ...dt.propTypes,
   columns: l.any.isRequired
-}, ze = {
+}, He = {
   columns: [],
   popupSettings: {},
   width: "200px",
@@ -3196,7 +3210,7 @@ const hi = (i) => /* @__PURE__ */ o.createElement(
 };
 ts.displayName = "KendoMultiColumnComboBox";
 ts.propTypes = fi;
-ts.defaultProps = ze;
+ts.defaultProps = He;
 function Is(i, t, e) {
   const [s, n] = o.useState(t);
   return o.useEffect(
@@ -3234,14 +3248,14 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
     ...hs,
     ...e
   }, n = o.useMemo(() => Fe(), []), a = s.id || n, {
-    data: c,
-    dataItemKey: p,
+    data: p,
+    dataItemKey: c,
     popupSettings: d,
     style: r,
     opened: h,
-    disabled: g,
-    onOpen: u = De,
-    onClose: f = De,
+    disabled: u,
+    onOpen: g = De,
+    onClose: m = De,
     placeholder: v,
     label: b,
     name: w,
@@ -3251,13 +3265,13 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
     valid: O,
     required: _,
     validityStyles: C
-  } = s, F = $t(s.tabIndex, g), x = o.useRef(null), E = o.useRef(null), M = o.useRef(null), K = o.useRef(null), U = o.useRef(null), j = o.useRef(null), Y = o.useRef(!1), [re, we] = o.useState(void 0), ne = s.value !== void 0, Q = ne ? s.value : re !== void 0 ? re : s.defaultValue, oe = G(Q), Le = oe ? V(Q, s.textField) : "", P = Ii({ validationMessage: N, valid: O, required: _ }, oe), z = o.useCallback(() => E.current && E.current.focus(), []);
+  } = s, F = $t(s.tabIndex, u), x = o.useRef(null), E = o.useRef(null), M = o.useRef(null), K = o.useRef(null), U = o.useRef(null), j = o.useRef(null), Y = o.useRef(!1), [re, we] = o.useState(void 0), ne = s.value !== void 0, Q = ne ? s.value : re !== void 0 ? re : s.defaultValue, oe = G(Q), Le = oe ? V(Q, s.textField) : "", P = Ii({ validationMessage: N, valid: O, required: _ }, oe), H = o.useCallback(() => E.current && E.current.focus(), []);
   o.useImperativeHandle(
     x,
     () => ({
       props: s,
       element: E.current,
-      focus: z
+      focus: H
     })
   ), o.useImperativeHandle(t, () => x.current);
   const L = fs(E, s.dir), me = d.width !== void 0 ? d.width : r.width !== void 0 ? r.width : hs.popupSettings.width, Ne = {
@@ -3280,20 +3294,20 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
   const ct = o.useCallback(
     (I) => {
       if (!A) {
-        if (u) {
+        if (g) {
           const T = { ...I };
-          u.call(void 0, T);
+          g.call(void 0, T);
         }
         h === void 0 && Pe(!0);
       }
     },
-    [A, h, u]
+    [A, h, g]
   ), xe = o.useCallback(
     (I) => {
       if (A) {
-        if (f) {
+        if (m) {
           const T = { ...I };
-          f.call(void 0, T);
+          m.call(void 0, T);
         }
         h === void 0 && (Pe(!1), ue && setTimeout(() => {
           var T;
@@ -3301,7 +3315,7 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
         }, 300));
       }
     },
-    [A, h, f, ue]
+    [A, h, m, ue]
   ), Nt = o.useCallback(
     (I) => {
       if (!I.isDefaultPrevented() && x.current) {
@@ -3314,15 +3328,15 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
         (A ? xe : ct)(T);
       }
     },
-    [A, h, u, f]
+    [A, h, g, m]
   ), se = o.useCallback(
     (I) => {
       Y.current = !0, I(), window.setTimeout(() => Y.current = !1, 0);
     },
     []
-  ), He = o.useCallback(
+  ), ze = o.useCallback(
     (I) => {
-      var k, H;
+      var k, z;
       const { keyCode: T, altKey: $ } = I, de = j.current && j.current.element;
       if (!x.current || I.isDefaultPrevented() && ((k = M.current) == null ? void 0 : k.element) === I.target)
         return;
@@ -3332,10 +3346,10 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
         target: x.current
       };
       if (A)
-        if (T === m.esc || $ && T === m.up)
+        if (T === f.esc || $ && T === f.up)
           I.preventDefault(), xe(y);
-        else if (de && de.querySelector(".k-focus") && (T === m.up || T === m.down || T === m.left || T === m.right || T === m.home || T === m.end)) {
-          if (T === m.up && ((H = M.current) != null && H.element)) {
+        else if (de && de.querySelector(".k-focus") && (T === f.up || T === f.down || T === f.left || T === f.right || T === f.home || T === f.end)) {
+          if (T === f.up && ((z = M.current) != null && z.element)) {
             const ee = Array.from(de.querySelectorAll(".k-treeview-item")), ye = [...ee].reverse().find((Ie) => !!(Ie && Ie.querySelector(".k-focus")));
             if (ye && ee.indexOf(ye) === 0)
               return se(() => {
@@ -3345,19 +3359,19 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
           }
           se(De);
         } else
-          T === m.down && se(() => {
+          T === f.down && se(() => {
             var ee;
             q(((ee = M.current) == null ? void 0 : ee.element) || de);
           });
       else
-        $ && T === m.down ? (I.preventDefault(), ct(y)) : A || T === m.esc && ut(I);
+        $ && T === f.down ? (I.preventDefault(), ct(y)) : A || T === f.esc && ut(I);
     },
-    [A, h, u, f]
+    [A, h, g, m]
   ), _e = o.useCallback(
     (I) => {
       const { keyCode: T, altKey: $ } = I;
-      $ || T !== m.up && T !== m.down || (I.preventDefault(), se(
-        T === m.up ? () => {
+      $ || T !== f.up && T !== f.down || (I.preventDefault(), se(
+        T === f.up ? () => {
           q(E.current);
         } : () => {
           q(j.current && j.current.element);
@@ -3375,7 +3389,7 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
       var I;
       !X && A && !h ? xe({ target: x.current }) : e.filterable ? q((I = M.current) == null ? void 0 : I.element) : q(j.current && j.current.element);
     },
-    [f, e.filterable, X, h, A]
+    [m, e.filterable, X, h, A]
   ), Z = o.useCallback(
     () => {
       X && q(E.current);
@@ -3409,7 +3423,7 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
         ue || xe(T);
       }
     },
-    [X, e.onBlur, A, h, f]
+    [X, e.onBlur, A, h, m]
   ), _t = o.useCallback(
     () => {
       X && se(De), ue && setTimeout(() => {
@@ -3433,7 +3447,7 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
     [e.onChange, ne]
   ), ht = o.useCallback(
     (I) => {
-      if (R(I.item, Q, p) || !x.current)
+      if (R(I.item, Q, c) || !x.current)
         return;
       const { item: T, itemHierarchicalIndex: $, nativeEvent: de, syntheticEvent: y } = I, k = {
         syntheticEvent: y,
@@ -3442,7 +3456,7 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
       };
       pt(k, T, $), xe(k);
     },
-    [ne, Q, e.onChange, p, A, h, f]
+    [ne, Q, e.onChange, c, A, h, m]
   ), ut = o.useCallback(
     (I) => {
       if (!x.current)
@@ -3454,7 +3468,7 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
       };
       pt(T, null), xe(T), I.preventDefault();
     },
-    [ne, e.onChange, A, h, f]
+    [ne, e.onChange, A, h, m]
   ), gt = o.useCallback(
     (I) => {
       if (I.syntheticEvent.stopPropagation(), e.onExpandChange && x.current) {
@@ -3501,13 +3515,13 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
       windowWidth: W,
       mobileFilter: I
     };
-    return /* @__PURE__ */ o.createElement(es, { ...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" }, c.length > 0 ? /* @__PURE__ */ o.createElement(
+    return /* @__PURE__ */ o.createElement(es, { ...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(
       Ct,
       {
         ref: j,
         tabIndex: F,
         data: Xe,
-        focusIdField: p,
+        focusIdField: c,
         textField: s.textField,
         selectField: S,
         expandField: s.expandField,
@@ -3527,16 +3541,16 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
     },
     []
   ), Xe = o.useMemo(
-    () => ne || !oe ? c : Ds(
-      c,
+    () => ne || !oe ? p : Ds(
+      p,
       D,
       (I) => Ts(
         I,
         D,
-        { [S]: R(I, Q, p) }
+        { [S]: R(I, Q, c) }
       )
     ),
-    [c, Q, ne, oe, S, D]
+    [p, Q, ne, oe, S, D]
   ), Ze = s.listNoData || ks, ft = s.valueHolder || yi, et = vs(), mt = !C || P.valid, { size: ge, rounded: be, fillMode: Ee } = s, ae = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
     "span",
     {
@@ -3556,15 +3570,15 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
       style: b ? { ...r, width: void 0 } : r,
       dir: L,
       ref: E,
-      onKeyDown: g ? void 0 : He,
+      onKeyDown: u ? void 0 : ze,
       onMouseDown: _t,
-      onClick: g ? void 0 : Nt,
+      onClick: u ? void 0 : Nt,
       onFocus: Ot,
       onBlur: Pt,
       role: "combobox",
       "aria-haspopup": "tree",
       "aria-expanded": A,
-      "aria-disabled": g,
+      "aria-disabled": u,
       "aria-label": b,
       "aria-labelledby": s.ariaLabelledBy,
       "aria-describedby": s.ariaDescribedBy,
@@ -3572,7 +3586,7 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
     },
     /* @__PURE__ */ o.createElement("span", { className: "k-input-inner" }, /* @__PURE__ */ o.createElement(ft, { item: Q }, Le || v)),
     s.loading && /* @__PURE__ */ o.createElement(ke, { className: "k-input-loading-icon", name: "loading" }),
-    oe && !g && /* @__PURE__ */ o.createElement(
+    oe && !u && /* @__PURE__ */ o.createElement(
       "span",
       {
         onClick: ut,
@@ -3639,13 +3653,13 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
           fillMode: Ee
         }
       ),
-      c.length > 0 ? /* @__PURE__ */ o.createElement(
+      p.length > 0 ? /* @__PURE__ */ o.createElement(
         Ct,
         {
           ref: j,
           tabIndex: F,
           data: Xe,
-          focusIdField: p,
+          focusIdField: c,
           textField: s.textField,
           selectField: S,
           expandField: s.expandField,
@@ -3667,7 +3681,7 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
       editorValue: Le,
       editorPlaceholder: v,
       editorValid: mt,
-      editorDisabled: g,
+      editorDisabled: u,
       editorId: a,
       style: { width: r ? r.width : void 0 },
       children: ae,
@@ -3755,14 +3769,14 @@ const xi = "Please select a value from the list!", { sizeMap: us, roundedMap: Si
   qe(je);
   const s = o.useMemo(() => Fe(), []), n = e.id || s, {
     data: a = [],
-    dataItemKey: c,
-    popupSettings: p = {},
+    dataItemKey: p,
+    popupSettings: c = {},
     style: d = {},
     opened: r,
     disabled: h,
-    onOpen: g = De,
-    onClose: u = De,
-    placeholder: f,
+    onOpen: u = De,
+    onClose: g = De,
+    placeholder: m,
     label: v,
     name: b,
     checkField: w = Re.checkField,
@@ -3774,7 +3788,7 @@ const xi = "Please select a value from the list!", { sizeMap: us, roundedMap: Si
     value: C,
     required: F = Re.required,
     validityStyles: x = Re.validityStyles
-  } = e, E = $t(e.tabIndex, h), M = o.useRef(null), K = o.useRef(null), U = o.useRef(null), j = o.useRef(null), Y = o.useRef(null), re = o.useRef(null), we = o.useRef(!1), ne = o.useRef([]), Q = o.useRef(null), [oe, Le] = o.useState(), [P, z] = o.useState(!1), [L, me] = o.useState(!1), [Ce, Ne] = o.useState(), [Oe, Pe] = o.useState([]), [A, X] = o.useState(""), J = !!(Ce && Ce <= Se && e.adaptive), W = r !== void 0 ? r : P, Ye = !!(Array.isArray(C) && C.length), ue = Ei({ validationMessage: N, valid: O, required: F }, Ye), ve = fs(K, e.dir), Mt = p.width !== void 0 ? p.width : d.width !== void 0 ? d.width : Re.popupSettings.width, ct = {
+  } = e, E = $t(e.tabIndex, h), M = o.useRef(null), K = o.useRef(null), U = o.useRef(null), j = o.useRef(null), Y = o.useRef(null), re = o.useRef(null), we = o.useRef(!1), ne = o.useRef([]), Q = o.useRef(null), [oe, Le] = o.useState(), [P, H] = o.useState(!1), [L, me] = o.useState(!1), [Ce, Ne] = o.useState(), [Oe, Pe] = o.useState([]), [A, X] = o.useState(""), J = !!(Ce && Ce <= Se && e.adaptive), W = r !== void 0 ? r : P, Ye = !!(Array.isArray(C) && C.length), ue = Ei({ validationMessage: N, valid: O, required: F }, Ye), ve = fs(K, e.dir), Mt = c.width !== void 0 ? c.width : d.width !== void 0 ? d.width : Re.popupSettings.width, ct = {
     width: Is(K, Mt),
     ...ve !== void 0 ? { direction: ve } : {}
   }, xe = o.useCallback(() => K.current && K.current.focus(), []);
@@ -3806,54 +3820,54 @@ const xi = "Please select a value from the list!", { sizeMap: us, roundedMap: Si
     [C, W]
   );
   const se = o.useCallback(
-    (y, k, H) => {
+    (y, k, z) => {
       if (e.onChange) {
         const ee = {
           items: k,
-          operation: H,
+          operation: z,
           ...y
         };
         e.onChange.call(void 0, ee);
       }
     },
     [e.onChange]
-  ), He = o.useCallback(
+  ), ze = o.useCallback(
     (y) => {
-      if (R(y.item, C, c) || !M.current)
+      if (R(y.item, C, p) || !M.current)
         return;
-      const { item: k, nativeEvent: H, syntheticEvent: ee } = y, ye = {
+      const { item: k, nativeEvent: z, syntheticEvent: ee } = y, ye = {
         syntheticEvent: ee,
-        nativeEvent: H,
+        nativeEvent: z,
         target: M.current
       };
       se(ye, [k], "toggle");
     },
-    [C, c, se]
+    [C, p, se]
   ), _e = o.useCallback(
     (y) => {
       if (!W) {
-        if (g) {
+        if (u) {
           const k = { ...y };
-          g.call(void 0, k);
+          u.call(void 0, k);
         }
-        r === void 0 && (z(!0), Pe(C || []), J && setTimeout(() => {
+        r === void 0 && (H(!0), Pe(C || []), J && setTimeout(() => {
           var k;
           Z((k = j.current) == null ? void 0 : k.element);
         }, 300));
       }
     },
-    [W, r, g, J, j]
+    [W, r, u, J, j]
   ), q = o.useCallback(
     (y) => {
       if (W) {
-        if (u) {
+        if (g) {
           const k = { ...y };
-          u.call(void 0, k);
+          g.call(void 0, k);
         }
-        r === void 0 && z(!1);
+        r === void 0 && H(!1);
       }
     },
-    [W, r, u]
+    [W, r, g]
   ), he = o.useCallback(
     (y) => {
       we.current = !0, y(), window.setTimeout(() => we.current = !1, 0);
@@ -3897,13 +3911,13 @@ const xi = "Please select a value from the list!", { sizeMap: us, roundedMap: Si
           target: M.current
         };
         if (e.onBlur) {
-          const H = { ...k };
-          e.onBlur.call(void 0, H);
+          const z = { ...k };
+          e.onBlur.call(void 0, z);
         }
         J || q(k);
       }
     },
-    [L, e.onBlur, W, r, u]
+    [L, e.onBlur, W, r, g]
   ), ht = o.useCallback(
     () => {
       L && he(De);
@@ -3925,7 +3939,7 @@ const xi = "Please select a value from the list!", { sizeMap: us, roundedMap: Si
   ), gt = o.useCallback(
     (y) => {
       var Ie, ns;
-      const { keyCode: k, altKey: H } = y, ee = re.current && re.current.element;
+      const { keyCode: k, altKey: z } = y, ee = re.current && re.current.element;
       if (!M.current || y.isDefaultPrevented() && ((Ie = U.current) == null ? void 0 : Ie.element) === y.target)
         return;
       const ye = {
@@ -3933,17 +3947,17 @@ const xi = "Please select a value from the list!", { sizeMap: us, roundedMap: Si
         nativeEvent: y.nativeEvent,
         target: M.current
       };
-      if (C && C.length > 0 && (k === m.left || k === m.right || k === m.home || k === m.end || k === m.delete)) {
+      if (C && C.length > 0 && (k === f.left || k === f.right || k === f.home || k === f.end || k === f.delete)) {
         const te = ne.current;
-        let ce = oe ? te.findIndex((xs) => xt(xs, oe, c)) : -1, pe;
+        let ce = oe ? te.findIndex((xs) => xt(xs, oe, p)) : -1, pe;
         const Bt = ce !== -1;
-        k === m.left ? (Bt ? ce = Math.max(0, ce - 1) : ce = te.length - 1, pe = te[ce]) : k === m.right ? ce === te.length - 1 ? pe = void 0 : Bt && (ce = Math.min(te.length - 1, ce + 1), pe = te[ce]) : k === m.home ? pe = te[0] : k === m.end ? pe = te[te.length - 1] : k === m.delete && Bt && se(ye, te[ce].data, "delete"), pe !== oe && Le(pe);
+        k === f.left ? (Bt ? ce = Math.max(0, ce - 1) : ce = te.length - 1, pe = te[ce]) : k === f.right ? ce === te.length - 1 ? pe = void 0 : Bt && (ce = Math.min(te.length - 1, ce + 1), pe = te[ce]) : k === f.home ? pe = te[0] : k === f.end ? pe = te[te.length - 1] : k === f.delete && Bt && se(ye, te[ce].data, "delete"), pe !== oe && Le(pe);
       }
       if (W)
-        if (k === m.esc || H && k === m.up)
+        if (k === f.esc || z && k === f.up)
           y.preventDefault(), q(ye);
-        else if (ee && ee.querySelector(".k-focus") && (k === m.up || k === m.down || k === m.left || k === m.right || k === m.home || k === m.end)) {
-          if (k === m.up && ((ns = U.current) != null && ns.element)) {
+        else if (ee && ee.querySelector(".k-focus") && (k === f.up || k === f.down || k === f.left || k === f.right || k === f.home || k === f.end)) {
+          if (k === f.up && ((ns = U.current) != null && ns.element)) {
             const te = Array.from(ee.querySelectorAll(".k-treeview-item")), ce = [...te].reverse().find((pe) => !!(pe && pe.querySelector(".k-focus")));
             if (ce && te.indexOf(ce) === 0)
               return he(() => {
@@ -3953,19 +3967,19 @@ const xi = "Please select a value from the list!", { sizeMap: us, roundedMap: Si
           }
           he(De);
         } else
-          k === m.down && he(() => {
+          k === f.down && he(() => {
             var te;
             Z(((te = U.current) == null ? void 0 : te.element) || ee);
           });
       else
-        H && k === m.down && (y.preventDefault(), _e(ye));
+        z && k === f.down && (y.preventDefault(), _e(ye));
     },
-    [W, q, Z, he, _e, oe, c, C, se]
+    [W, q, Z, he, _e, oe, p, C, se]
   ), Je = o.useCallback(
     (y) => {
-      const { keyCode: k, altKey: H } = y;
-      H || k !== m.up && k !== m.down || (y.preventDefault(), he(
-        k === m.up ? () => {
+      const { keyCode: k, altKey: z } = y;
+      z || k !== f.up && k !== f.down || (y.preventDefault(), he(
+        k === f.up ? () => {
           Z(K.current);
         } : () => {
           Z(re.current && re.current.element);
@@ -3987,8 +4001,8 @@ const xi = "Please select a value from the list!", { sizeMap: us, roundedMap: Si
     [se, q]
   ), Rt = o.useCallback(
     (y, k) => {
-      var H;
-      q({ target: M.current }), L || Z((H = U.current) == null ? void 0 : H.element), se({
+      var z;
+      q({ target: M.current }), L || Z((z = U.current) == null ? void 0 : z.element), se({
         syntheticEvent: k,
         nativeEvent: k.nativeEvent,
         target: M.current
@@ -3998,8 +4012,8 @@ const xi = "Please select a value from the list!", { sizeMap: us, roundedMap: Si
   ), Xe = o.useCallback(
     (y) => {
       if (e.onExpandChange && M.current) {
-        const { item: k, itemHierarchicalIndex: H, nativeEvent: ee, syntheticEvent: ye } = y, Ie = {
-          level: wi(H),
+        const { item: k, itemHierarchicalIndex: z, nativeEvent: ee, syntheticEvent: ye } = y, Ie = {
+          level: wi(z),
           item: k,
           nativeEvent: ee,
           syntheticEvent: ye,
@@ -4012,13 +4026,13 @@ const xi = "Please select a value from the list!", { sizeMap: us, roundedMap: Si
   ), Ze = o.useCallback(
     (y) => {
       if (e.onFilterChange && M.current) {
-        const H = {
+        const z = {
           filter: { field: e.textField, operator: "contains", value: y.target.value },
           syntheticEvent: y.syntheticEvent,
           nativeEvent: y.nativeEvent,
           target: M.current
         };
-        e.onFilterChange.call(void 0, H), e.filter === void 0 && X(y.target.value);
+        e.onFilterChange.call(void 0, z), e.filter === void 0 && X(y.target.value);
       }
     },
     [e.onFilterChange, e.filter, e.textField]
@@ -4049,14 +4063,14 @@ const xi = "Please select a value from the list!", { sizeMap: us, roundedMap: Si
     ) : null, k = {
       adaptiveTitle: e.adaptiveTitle,
       expand: W,
-      onClose: (H) => e.onCancel ? ft(H) : Qe(H),
+      onClose: (z) => e.onCancel ? ft(z) : Qe(z),
       windowWidth: Ce,
       mobileFilter: y,
       footer: {
         cancelText: be.toLanguageString(ot, le[ot]),
-        onCancel: (H) => e.onCancel ? ft(H) : Qe(H),
+        onCancel: (z) => e.onCancel ? ft(z) : Qe(z),
         applyText: be.toLanguageString(nt, le[nt]),
-        onApply: (H) => q(H)
+        onApply: (z) => q(z)
       }
     };
     return /* @__PURE__ */ o.createElement(es, { ...k }, /* @__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(
@@ -4065,15 +4079,15 @@ const xi = "Please select a value from the list!", { sizeMap: us, roundedMap: Si
         ref: re,
         tabIndex: E,
         data: a,
-        focusIdField: c,
+        focusIdField: p,
         textField: e.textField,
         checkField: w,
         checkIndeterminateField: S,
         expandField: e.expandField,
         childrenField: D,
         expandIcons: !0,
-        onItemClick: He,
-        onCheckChange: He,
+        onItemClick: ze,
+        onCheckChange: ze,
         onExpandChange: Xe,
         checkboxes: !0,
         size: ae,
@@ -4135,10 +4149,10 @@ const xi = "Please select a value from the list!", { sizeMap: us, roundedMap: Si
           onTagDelete: Rt,
           data: $,
           guid: n,
-          focused: oe ? ne.current.find((y) => xt(y, oe, c)) : void 0,
+          focused: oe ? ne.current.find((y) => xt(y, oe, p)) : void 0,
           size: ae
         }
-      ) : f
+      ) : m
     ),
     /* @__PURE__ */ o.createElement("span", { className: "k-input-inner" }, /* @__PURE__ */ o.createElement("span", { className: "k-input-value-text" }, " ")),
     e.loading && /* @__PURE__ */ o.createElement(ke, { className: "k-input-loading-icon", name: "loading" }),
@@ -4164,17 +4178,17 @@ const xi = "Please select a value from the list!", { sizeMap: us, roundedMap: Si
       jt,
       {
         popupClass: B(
-          p.popupClass,
+          c.popupClass,
           "k-multiselecttree-popup"
         ),
-        className: B(p.className, { "k-rtl": ve === "rtl" }),
+        className: B(c.className, { "k-rtl": ve === "rtl" }),
         style: ct,
-        animate: p.animate,
+        animate: c.animate,
         anchor: K.current,
         show: W,
         onOpen: Ot,
         onClose: Pt,
-        appendTo: p.appendTo,
+        appendTo: c.appendTo,
         ref: Q
       },
       e.filterable && /* @__PURE__ */ o.createElement(
@@ -4196,15 +4210,15 @@ const xi = "Please select a value from the list!", { sizeMap: us, roundedMap: Si
           ref: re,
           tabIndex: E,
           data: a,
-          focusIdField: c,
+          focusIdField: p,
           textField: e.textField,
           checkField: w,
           checkIndeterminateField: S,
           expandField: e.expandField,
           childrenField: D,
           expandIcons: !0,
-          onItemClick: He,
-          onCheckChange: He,
+          onItemClick: ze,
+          onCheckChange: ze,
           onExpandChange: Xe,
           checkboxes: !0,
           size: ae,
@@ -4219,7 +4233,7 @@ const xi = "Please select a value from the list!", { sizeMap: us, roundedMap: Si
     {
       label: v,
       editorValue: Ye,
-      editorPlaceholder: f,
+      editorPlaceholder: m,
       editorValid: Ee,
       editorDisabled: h,
       editorId: n,
@@ -4300,50 +4314,50 @@ const tt = (i, t) => {
     dataItemKey: s,
     value: n,
     subItemsField: a = "items",
-    operation: c
-  } = t, p = kt(s), d = tt(n, p);
-  if (c === "clear")
+    operation: p
+  } = t, c = kt(s), d = tt(n, c);
+  if (p === "clear")
     return [];
-  if (c === "delete") {
-    const O = tt(e, p);
-    return n.filter((_) => !O[p(_)]);
+  if (p === "delete") {
+    const O = tt(e, c);
+    return n.filter((_) => !O[c(_)]);
   }
-  const r = e[0], h = p(r), g = kt(a), u = [...i], f = [];
+  const r = e[0], h = c(r), u = kt(a), g = [...i], m = [];
   let v = [], b;
-  for (; u.length; ) {
-    const O = u.pop();
-    if (h === p(O)) {
-      v = f.map((_) => _.item), b = O;
+  for (; g.length; ) {
+    const O = g.pop();
+    if (h === c(O)) {
+      v = m.map((_) => _.item), b = O;
       break;
     } else {
-      f && f.length && f[f.length - 1].parentPosition === u.length && f.pop();
-      const _ = g(O);
-      _ && _.length && (f.push({ item: O, parentPosition: u.length }), u.push(..._));
+      m && m.length && m[m.length - 1].parentPosition === g.length && m.pop();
+      const _ = u(O);
+      _ && _.length && (m.push({ item: O, parentPosition: g.length }), g.push(..._));
     }
   }
-  const w = [...g(b) || []];
+  const w = [...u(b) || []];
   let S = [];
   for (; w.length; ) {
     const O = w.pop();
     S.push(O);
-    const _ = g(O);
+    const _ = u(O);
     _ && _.length && w.push(..._);
   }
   const D = !d[h], N = [];
   if (D) {
-    N.push(...n), N.push(b), N.push(...S.filter((C) => !d[p(C)]));
-    const O = v.filter((C) => !d[p(C)]), _ = tt(N, p);
+    N.push(...n), N.push(b), N.push(...S.filter((C) => !d[c(C)]));
+    const O = v.filter((C) => !d[c(C)]), _ = tt(N, c);
     for (let C = O.length - 1; C > -1; C--) {
-      const F = O[C], x = g(F);
-      if (x.filter((M) => _[p(M)]).length < x.length)
+      const F = O[C], x = u(F);
+      if (x.filter((M) => _[c(M)]).length < x.length)
         break;
-      N.push(F), _[p(F)] = !0;
+      N.push(F), _[c(F)] = !0;
     }
   } else {
-    const O = p(b), _ = tt(S, p), C = tt(v, p);
+    const O = c(b), _ = tt(S, c), C = tt(v, c);
     N.push(
       ...n.filter((F) => {
-        const x = p(F);
+        const x = c(F);
         return !_[x] && O !== x && !C[x];
       })
     );