@progress/kendo-react-dropdowns 16.1.0 → 16.2.0-develop.10

package/DropDownList/DropDownList.mjs

@@ -7,7 +7,7 @@
  */
 import * as i from "react";
 import C from "prop-types";
-import { getLicenseMessage as Xt, usePropsContext as Zt, validatePackage as en, useUnstyled as tn, useId as nn, useWebMcpRegister as rn, useKendoPaste as on, canUseDOM as et, useAdaptiveModeContext as sn, classNames as E, uDropDownList as P, getTabIndex as an, IconWrap as ln, createPropsContext as dn, Keys as y, WatermarkOverlay as cn, sizeMap as un, svgIconPropType as pn } from "@progress/kendo-react-common";
+import { getLicenseMessage as Xt, usePropsContext as Zt, validatePackage as en, useUnstyled as tn, useId as nn, useWebMcpRegister as rn, useKendoPaste as on, canUseDOM as et, useAdaptiveModeContext as sn, classNames as E, uDropDownList as F, getTabIndex as an, IconWrap as ln, createPropsContext as dn, Keys as y, WatermarkOverlay as cn, sizeMap as un, svgIconPropType as pn } from "@progress/kendo-react-common";
 import { FloatingLabel as fn } from "@progress/kendo-react-labels";
 import { chevronDownIcon as mn } from "@progress/kendo-svg-icons";
 import vn from "../common/ListContainer.mjs";
@@ -16,7 +16,7 @@ import tt from "../common/GroupStickyHeader.mjs";
 import hn from "../common/ListDefaultItem.mjs";
 import In from "../common/List.mjs";
 import lt from "../common/DropDownBase.mjs";
-import { getFilteredData as k, getItemIndexByText as yn, areSame as F, getItemValue as ee, isPresent as nt, itemIndexStartsWith as wn, sameCharsOnly as xn, shuffleData as Dn, matchText as rt } from "../common/utils.mjs";
+import { getFilteredData as k, getItemIndexByText as yn, areSame as L, getItemValue as ee, isPresent as nt, itemIndexStartsWith as wn, sameCharsOnly as xn, shuffleData as Dn, matchText as rt } from "../common/utils.mjs";
 import { packageMetadata as ot } from "../package-metadata.mjs";
 import { Button as Sn } from "@progress/kendo-react-buttons";
 import { useLocalization as Cn } from "@progress/kendo-react-intl";
@@ -32,7 +32,7 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
     ignoreCase: G = z.ignoreCase,
     size: H = z.size,
     rounded: Ke = z.rounded,
-    fillMode: ce = z.fillMode
+    fillMode: ue = z.fillMode
   } = t;
   if (t.filterable || t.virtual) {
     const e = [];
@@ -41,7 +41,7 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
       features: e
     });
   }
-  const K = tn(), ue = nn(t.id), pe = () => {
+  const K = tn(), pe = nn(t.id), fe = () => {
     var e;
     if (et)
       return ((e = T.current) == null ? void 0 : e.ownerDocument) || window.document;
@@ -50,22 +50,22 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
     (e = r == null ? void 0 : r.current) != null && e.wrapper && ((n = r == null ? void 0 : r.current) == null || n.wrapper.focus({ preventScroll: !0 }));
   }, b = () => {
     let e;
-    return V.current !== void 0 && V.current !== null ? e = V.current : t.value !== void 0 ? e = t.value : m.value !== void 0 && m.value !== null ? e = m.value : t.defaultValue !== void 0 && t.defaultValue !== null && (e = t.defaultValue), !nt(e) && t.defaultItem !== void 0 && t.defaultItem !== null && (e = t.defaultItem), e;
+    return B.current !== void 0 && B.current !== null ? e = B.current : t.value !== void 0 ? e = t.value : m.value !== void 0 && m.value !== null ? e = m.value : t.defaultValue !== void 0 && t.defaultValue !== null && (e = t.defaultValue), !nt(e) && t.defaultItem !== void 0 && t.defaultItem !== null && (e = t.defaultItem), e;
   }, vt = () => {
     const { dataItemKey: e } = t, n = k(t), o = b();
-    return n.findIndex((l) => F(l, o, e));
-  }, fe = () => t.required !== void 0 ? t.required : z.required, me = () => {
-    const e = t.validationMessage !== void 0, n = b(), o = !fe() || n !== null && n !== "" && n !== void 0, l = t.valid !== void 0 ? t.valid : o;
+    return n.findIndex((a) => L(a, o, e));
+  }, te = () => t.required !== void 0 ? t.required : z.required, me = () => {
+    const e = t.validationMessage !== void 0, n = b(), o = !te() || n !== null && n !== "" && n !== void 0, a = t.valid !== void 0 ? t.valid : o;
     return {
       customError: e,
-      valid: l,
+      valid: a,
       valueMissing: n === null
     };
-  }, gt = () => t.validityStyles !== void 0 ? t.validityStyles : z.validityStyles, te = (e) => {
-    ne.current = !0, e.focus(), window.setTimeout(() => ne.current = !1, 30);
+  }, gt = () => t.validityStyles !== void 0 ? t.validityStyles : z.validityStyles, ne = (e) => {
+    re.current = !0, e.focus(), window.setTimeout(() => re.current = !1, 30);
   }, ve = () => {
-    Y.current && te(Y.current), t.adaptive && setTimeout(() => {
-      Y.current && te(Y.current);
+    Y.current && ne(Y.current), t.adaptive && setTimeout(() => {
+      Y.current && ne(Y.current);
     }, 300);
   }, ht = i.useCallback((e) => {
     for (const n of e)
@@ -75,54 +75,59 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
     (e = we.current) != null && e.setCustomValidity && we.current.setCustomValidity(
       me().valid ? "" : t.validationMessage || En
     );
-  }, A = (e, n) => {
+  }, V = (e, n) => {
     const o = b();
-    F(o, e, t.dataItemKey) || (t.value === void 0 && (n.data.value = e), r.current.updateComponentArgs({ value: e }), V.current = e, n.events.push({ type: "onChange" }));
+    L(o, e, t.dataItemKey) || (t.value === void 0 && (n.data.value = e), r.current.updateComponentArgs({ value: e }), B.current = e, n.events.push({ type: "onChange" }));
   }, M = (e) => {
     var n;
-    (n = r == null ? void 0 : r.current) == null || n.applyState(e), V.current = void 0;
+    (n = r == null ? void 0 : r.current) == null || n.applyState(e), B.current = void 0;
   }, $ = (e, n) => {
     var u;
-    const { virtual: o, dataItemKey: l, defaultItem: a } = t, c = k(t), f = o ? o.skip : 0, v = b(), d = e === -1 && a !== void 0 ? a : c[e - f], p = !F(d, v, l);
-    A(d, n), p && ((u = r == null ? void 0 : r.current) == null || u.triggerPageChangeCornerItems(d, n));
-  }, B = (e, n, o) => {
+    const { virtual: o, dataItemKey: a, defaultItem: l } = t, c = k(t), f = o ? o.skip : 0, v = b(), d = e === -1 && l !== void 0 ? l : c[e - f], p = !L(d, v, a);
+    V(d, n), p && ((u = r == null ? void 0 : r.current) == null || u.triggerPageChangeCornerItems(d, n));
+  }, A = (e, n, o) => {
     var S, h;
-    const { defaultItem: l, dataItemKey: a, virtual: c = { skip: 0, total: 0, pageSize: 0 } } = t, f = b(), v = k(t), d = (S = r == null ? void 0 : r.current) == null ? void 0 : S.vs, p = v.findIndex((x) => F(x, f, a)), u = (h = r == null ? void 0 : r.current) == null ? void 0 : h.navigation.navigate({
+    const { defaultItem: a, dataItemKey: l, virtual: c = { skip: 0, total: 0, pageSize: 0 } } = t, f = b(), v = k(t), d = (S = r == null ? void 0 : r.current) == null ? void 0 : S.vs, p = v.findIndex((x) => L(x, f, l)), u = (h = r == null ? void 0 : r.current) == null ? void 0 : h.navigation.navigate({
       current: c.skip + p,
       max: (d != null && d.enabled ? c.total : v.length) - 1,
-      min: l !== void 0 ? -1 : 0,
+      min: a !== void 0 ? -1 : 0,
       keyCode: n,
       skipItems: o || void 0
     });
     u !== void 0 && $(u, e), M(e);
   }, It = (e) => {
     T.current = e, r.current.wrapper = e;
-  }, yt = (e) => /* @__PURE__ */ i.createElement(
-    "select",
-    {
-      name: t.name,
-      ref: (n) => {
-        we.current = n;
+  }, yt = (e) => {
+    const n = t.defaultItem !== void 0 && L(e, t.defaultItem, t.dataItemKey);
+    let o = e;
+    return n ? o = "" : t.valueMap && (o = t.valueMap(e)), /* @__PURE__ */ i.createElement(
+      "select",
+      {
+        name: t.name,
+        required: te() && t.valid !== !0,
+        ref: (a) => {
+          we.current = a;
+        },
+        tabIndex: -1,
+        "aria-hidden": !0,
+        title: t.label,
+        style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
       },
-      tabIndex: -1,
-      "aria-hidden": !0,
-      title: t.label,
-      style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
-    },
-    /* @__PURE__ */ i.createElement("option", { value: t.valueMap ? t.valueMap.call(void 0, e) : e })
-  ), ge = () => {
+      /* @__PURE__ */ i.createElement("option", { value: o })
+    );
+  }, ge = () => {
     const {
       textField: e,
       dataItemKey: n,
       virtual: o = { skip: 0 },
-      focusedItemIndex: l = wn,
-      filterable: a,
+      focusedItemIndex: a = wn,
+      filterable: l,
       skipDisabledItems: c = !0
     } = t, f = b(), v = k(t), d = t.filter ? t.filter : m.text;
-    return c && e && !d && !f ? v.findIndex((p) => !p.disabled) : nt(f) && d === void 0 || a && d === "" ? v.findIndex((p) => F(p, f, n)) : d ? xe.current ? l(v, d, e) : v.findIndex((p) => F(p, f, n)) : o.skip === 0 ? 0 : -1;
+    return c && e && !d && !f ? v.findIndex((p) => !p.disabled) : nt(f) && d === void 0 || l && d === "" ? v.findIndex((p) => L(p, f, n)) : d ? xe.current ? a(v, d, e) : v.findIndex((p) => L(p, f, n)) : o.skip === 0 ? 0 : -1;
   }, Te = (e, n) => n !== void 0 && n !== -1 && e && e.length > 0 && e[n].disabled, he = () => {
     const e = k(t), n = r.current.initState(), o = ge();
-    Te(e, o) && (A(null, n), M(n));
+    Te(e, o) && (V(null, n), M(n));
   }, Ie = (e) => {
     if (e.isPropagationStopped())
       return;
@@ -133,34 +138,30 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
     const {
       filterable: n,
       disabled: o,
-      defaultItem: l,
-      leftRightKeysNavigation: a = !0,
+      defaultItem: a,
+      leftRightKeysNavigation: l = !0,
       virtual: c = { skip: 0, total: 0, pageSize: 0 },
       dataItemKey: f,
       groupField: v = "",
       textField: d,
       skipDisabledItems: p = !0
-    } = t, u = k(t), S = b(), h = u.findIndex((w) => F(w, S, f)), x = t.opened !== void 0 ? t.opened : m.opened, s = e.keyCode, N = s === y.home || s === y.end, L = s === y.up || s === y.down, _ = !x && (e.altKey && s === y.down || s === y.enter || s === y.space), Z = x && (e.altKey && s === y.up || s === y.esc), ae = a && (s === y.left || s === y.right), le = L || ae && !n || N, D = r.current.initState();
+    } = t, u = k(t), S = b(), h = u.findIndex((w) => L(w, S, f)), x = t.opened !== void 0 ? t.opened : m.opened, s = e.keyCode, N = s === y.home || s === y.end, P = s === y.up || s === y.down, _ = !x && (e.altKey && s === y.down || s === y.enter || s === y.space), Z = x && (e.altKey && s === y.up || s === y.esc), le = l && (s === y.left || s === y.right), de = P || le && !n || N, D = r.current.initState();
     if (D.syntheticEvent = e, !o) {
       if (N && r.current.vs.enabled)
-        s === y.home ? c.skip !== 0 ? (r.current.triggerOnPageChange(D, 0, c.pageSize), W.current = !0) : A(u[0], D) : c.skip < c.total - c.pageSize ? (r.current.triggerOnPageChange(
-          D,
-          c.total - c.pageSize,
-          c.pageSize
-        ), W.current = !0) : A(u[u.length - 1], D);
+        s === y.home ? c.skip !== 0 ? (r.current.triggerOnPageChange(D, 0, c.pageSize), W.current = !0) : V(u[0], D) : c.skip < c.total - c.pageSize ? (r.current.triggerOnPageChange(D, c.total - c.pageSize, c.pageSize), W.current = !0) : V(u[u.length - 1], D);
       else if (x && s === y.pageUp)
         e.preventDefault(), r.current.scrollPopupByPageSize(-1);
       else if (x && s === y.pageDown)
         e.preventDefault(), r.current.scrollPopupByPageSize(1);
       else if (x && s === y.enter) {
         const w = ge();
-        Te(u, w) ? (A(null, D), M(D)) : $(w, D), r.current.togglePopup(D), e.preventDefault();
+        Te(u, w) ? (V(null, D), M(D)) : $(w, D), r.current.togglePopup(D), e.preventDefault();
       } else if (_ || Z)
         Z && he(), r.current.togglePopup(D), e.preventDefault();
-      else if (le) {
+      else if (de) {
         if (xe.current = !1, v !== "" && d)
           if (!p && x)
-            B(D, s);
+            A(D, s);
           else {
             let w;
             if (s === y.down || s === y.right) {
@@ -168,7 +169,7 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
               w = g && u.indexOf(g);
             } else if (s === y.up || s === y.left) {
               let g;
-              if (h === 0 && l)
+              if (h === 0 && a)
                 w = -1;
               else if (h === -1)
                 g = u, w = u.findIndex((I) => !I.disabled);
@@ -182,11 +183,11 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
             }
             if (w !== void 0) {
               const g = w - h;
-              B(D, s, g);
-            } else w === void 0 && h === u.length - 1 && B(D, s);
+              A(D, s, g);
+            } else w === void 0 && h === u.length - 1 && A(D, s);
           }
         else if (!p && x || N)
-          B(D, s);
+          A(D, s);
         else if (d) {
           let w;
           if (s === y.down || s === y.right) {
@@ -194,7 +195,7 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
             w = g && u.indexOf(g);
           } else if (s === y.up || s === y.left) {
             let g;
-            if (h === 0 && l)
+            if (h === 0 && a)
               w = -1;
             else if (h === -1)
               g = u, w = u.findIndex((I) => !I.disabled);
@@ -208,10 +209,10 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
           }
           if (w !== void 0) {
             const g = w - h;
-            B(D, s, g);
-          } else w === void 0 && h === u.length - 1 && B(D, s);
+            A(D, s, g);
+          } else w === void 0 && h === u.length - 1 && A(D, s);
         } else
-          B(D, s);
+          A(D, s);
         e.preventDefault();
       }
       M(D);
@@ -232,7 +233,7 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
         onKeyDown: Oe,
         size: e ? "large" : H,
         rounded: Ke,
-        fillMode: ce,
+        fillMode: ue,
         renderListFilterWrapper: !0,
         placeholder: be.toLanguageString(
           st,
@@ -242,33 +243,33 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
     );
   }, xt = (e) => {
     const n = r.current.initState();
-    n.syntheticEvent = e, r.current.togglePopup(n), A(t.defaultItem, n), M(n);
+    n.syntheticEvent = e, r.current.togglePopup(n), V(t.defaultItem, n), M(n);
   }, Dt = () => {
-    const { textField: e, defaultItem: n, dataItemKey: o } = t, l = b();
+    const { textField: e, defaultItem: n, dataItemKey: o } = t, a = b();
     return n !== void 0 && /* @__PURE__ */ i.createElement(
       hn,
       {
         defaultItem: n,
         textField: e,
-        selected: F(l, n, o),
+        selected: L(a, n, o),
         key: "defaultitemkey",
         onClick: xt
       }
     );
   }, St = (e, n) => {
     var o;
-    (o = r == null ? void 0 : r.current) == null || o.handleItemClick(e, n), V.current = void 0;
+    (o = r == null ? void 0 : r.current) == null || o.handleItemClick(e, n), B.current = void 0;
   }, Ct = (e) => {
     const { vs: n, list: o } = r.current;
     n.scrollHandler(e);
-    const { groupField: l } = t;
-    let a = k(t);
-    if (!(!l || !a.length) && l) {
-      const c = Be.current = Be.current || (n.enabled ? n.itemHeight : o ? o.children[0].offsetHeight : 0), v = e.target.scrollTop - n.skip * c;
-      a = r.current.getGroupedDataModernMode(a, l);
-      let d = a[0][l];
-      for (let p = 1; p < a.length && !(c * p > v); p++)
-        a[p] && a[p][l] && (d = a[p][l]);
+    const { groupField: a } = t;
+    let l = k(t);
+    if (!(!a || !l.length) && a) {
+      const c = Ae.current = Ae.current || (n.enabled ? n.itemHeight : o ? o.children[0].offsetHeight : 0), v = e.target.scrollTop - n.skip * c;
+      l = r.current.getGroupedDataModernMode(l, a);
+      let d = l[0][a];
+      for (let p = 1; p < l.length && !(c * p > v); p++)
+        l[p] && l[p][a] && (d = l[p][a]);
       d !== m.group && J({ group: d });
     }
   }, He = () => {
@@ -277,8 +278,8 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
       textField: e,
       dataItemKey: n,
       virtual: o = { skip: 0, total: void 0 },
-      groupHeaderItemRender: l,
-      listNoDataRender: a,
+      groupHeaderItemRender: a,
+      listNoDataRender: l,
       itemRender: c
     } = t, f = k(t), v = K && K.uDropDownList, d = r.current.vs, p = o.skip, u = t.opened !== void 0 ? t.opened : m.opened, S = r.current.getPopupSettings(), h = `translateY(${d.translate}px)`, x = b();
     return /* @__PURE__ */ i.createElement(
@@ -298,14 +299,14 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
           d.list = r.current.list = N;
         },
         wrapperStyle: { maxHeight: q ? void 0 : S.height },
-        wrapperCssClass: E(P.listContent({ c: v })),
+        wrapperCssClass: E(F.listContent({ c: v })),
         listStyle: d.enabled ? { transform: h } : void 0,
         key: "listkey",
         skip: p,
         onClick: St,
         itemRender: c,
-        groupHeaderItemRender: l,
-        noDataRender: a,
+        groupHeaderItemRender: a,
+        noDataRender: l,
         onScroll: Ct,
         wrapperRef: d.scrollerRef,
         scroller: (s = r == null ? void 0 : r.current) == null ? void 0 : s.renderScrollElement(),
@@ -313,7 +314,7 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
       }
     );
   }, bt = () => {
-    const { groupField: e } = t, n = k(t), o = t.opened !== void 0 ? t.opened : m.opened, l = K && K.uDropDownList, a = {
+    const { groupField: e } = t, n = k(t), o = t.opened !== void 0 ? t.opened : m.opened, a = K && K.uDropDownList, l = {
       title: t.adaptiveTitle || t.label,
       subTitle: t.adaptiveSubtitle,
       expand: o,
@@ -322,22 +323,22 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
       mobileFilter: ze(!0)
     };
     let { group: c } = m;
-    return c === void 0 && e !== void 0 && (c = ee(n[0], e)), /* @__PURE__ */ i.createElement(kn, { ...a }, /* @__PURE__ */ i.createElement(bn, null, /* @__PURE__ */ i.createElement("div", { className: E(P.listContainer({ c: l, popup: !1 })) }, Pt())));
+    return c === void 0 && e !== void 0 && (c = ee(n[0], e)), /* @__PURE__ */ i.createElement(kn, { ...l }, /* @__PURE__ */ i.createElement(bn, null, /* @__PURE__ */ i.createElement("div", { className: E(F.listContainer({ c: a, popup: !1 })) }, Pt())));
   }, kt = () => {
     m.focused && window.setTimeout(() => {
-      m.focused && r.current.wrapper && te(r.current.wrapper);
+      m.focused && r.current.wrapper && ne(r.current.wrapper);
     });
   }, Et = (e) => {
     "onMouseDownOutside" in (t.popupSettings || {}) && t.popupSettings.onMouseDownOutside.call(void 0, e);
   }, Lt = () => {
-    const { header: e, footer: n, dir: o, groupField: l, groupStickyHeaderItemRender: a, list: c } = t, f = k(t), v = r.current, d = v.getPopupSettings(), p = t.opened !== void 0 ? t.opened : m.opened, u = d.width !== void 0 ? d.width : Ce != null ? Ce : v.popupWidth, S = K && K.uDropDownList, h = {
+    const { header: e, footer: n, dir: o, groupField: a, groupStickyHeaderItemRender: l, list: c } = t, f = k(t), v = r.current, d = v.getPopupSettings(), p = t.opened !== void 0 ? t.opened : m.opened, u = d.width !== void 0 ? d.width : Ce != null ? Ce : v.popupWidth, S = K && K.uDropDownList, h = {
       dir: o !== void 0 ? o : v.dirCalculated,
       width: u,
       popupSettings: {
         ...d,
         popupClass: E(
           d.popupClass,
-          P.listContainer({
+          F.listContainer({
             c: S,
             popup: !0
           })
@@ -351,11 +352,11 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
       itemsCount: [f.length]
     };
     let { group: x } = m;
-    return x === void 0 && l !== void 0 && (x = ee(f[0], l)), /* @__PURE__ */ i.createElement(vn, { ...h }, ze(!1), e && /* @__PURE__ */ i.createElement("div", { className: E(P.listHeader({ c: S })) }, e), /* @__PURE__ */ i.createElement(
+    return x === void 0 && a !== void 0 && (x = ee(f[0], a)), /* @__PURE__ */ i.createElement(vn, { ...h }, ze(!1), e && /* @__PURE__ */ i.createElement("div", { className: E(F.listHeader({ c: S })) }, e), /* @__PURE__ */ i.createElement(
       "div",
       {
         className: E(
-          P.list({
+          F.list({
             c: S,
             size: H,
             virtual: r.current.vs.enabled
@@ -363,50 +364,50 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
         )
       },
       Dt(),
-      !c && x && f.length !== 0 && /* @__PURE__ */ i.createElement(tt, { group: x, render: a }),
+      !c && x && f.length !== 0 && /* @__PURE__ */ i.createElement(tt, { group: x, render: l }),
       He()
-    ), n && /* @__PURE__ */ i.createElement("div", { className: E(P.listFooter({ c: S })) }, n), Me && /* @__PURE__ */ i.createElement(cn, { message: ut }));
+    ), n && /* @__PURE__ */ i.createElement("div", { className: E(F.listFooter({ c: S })) }, n), Me && /* @__PURE__ */ i.createElement(cn, { message: ut }));
   }, Pt = () => {
-    const { header: e, footer: n, groupStickyHeaderItemRender: o, groupField: l, list: a } = t, c = k(t), f = K && K.uDropDownList;
+    const { header: e, footer: n, groupStickyHeaderItemRender: o, groupField: a, list: l } = t, c = k(t), f = K && K.uDropDownList;
     let { group: v } = m;
-    return v === void 0 && l !== void 0 && (v = ee(c[0], l)), /* @__PURE__ */ i.createElement(i.Fragment, null, e && /* @__PURE__ */ i.createElement("div", { className: E(P.listHeader({ c: f })) }, e), /* @__PURE__ */ i.createElement(
+    return v === void 0 && a !== void 0 && (v = ee(c[0], a)), /* @__PURE__ */ i.createElement(i.Fragment, null, e && /* @__PURE__ */ i.createElement("div", { className: E(F.listHeader({ c: f })) }, e), /* @__PURE__ */ i.createElement(
       "div",
       {
         className: E("k-list", {
           [`k-list-${q ? "lg" : un[H] || H}`]: q || H
         })
       },
-      !a && v && c.length !== 0 && /* @__PURE__ */ i.createElement(tt, { group: v, render: o }),
+      !l && v && c.length !== 0 && /* @__PURE__ */ i.createElement(tt, { group: v, render: o }),
       He()
     ), n && /* @__PURE__ */ i.createElement("div", { className: "k-list-footer" }, n));
   }, Ft = (e) => {
-    const { dataItemKey: n } = t, o = k(t), l = b();
-    let a = o.map((L, _) => ({ item: L, itemIndex: _ }));
+    const { dataItemKey: n } = t, o = k(t), a = b();
+    let l = o.map((P, _) => ({ item: P, itemIndex: _ }));
     const c = U.current.word, f = U.current.last, v = xn(c, f);
-    let d = a.length, p = Math.max(
+    let d = l.length, p = Math.max(
       0,
-      o.findIndex((L) => F(L, l, n))
+      o.findIndex((P) => L(P, a, n))
     ), u;
-    t.defaultItem && (u = { item: t.defaultItem, itemIndex: -1 }, d += 1, p += 1), p += v ? 1 : 0, a = Dn(a, p, u);
+    t.defaultItem && (u = { item: t.defaultItem, itemIndex: -1 }, d += 1, p += 1), p += v ? 1 : 0, l = Dn(l, p, u);
     let S, h, x, s = 0;
     const { textField: N } = t;
     for (; s < d; ) {
-      if (S = ee(a[s].item, N), h = v && rt(S, f, G), x = rt(S, c, G), h || x) {
-        s = a[s].itemIndex;
+      if (S = ee(l[s].item, N), h = v && rt(S, f, G), x = rt(S, c, G), h || x) {
+        s = l[s].itemIndex;
         break;
       }
       s++;
     }
     if (s !== d) {
-      const L = r.current.initState();
-      L.syntheticEvent = e, $(s, L), M(L), V.current = void 0;
+      const P = r.current.initState();
+      P.syntheticEvent = e, $(s, P), M(P), B.current = void 0;
     }
   }, Mt = (e) => {
-    clearTimeout(Ae.current), t.filterable || (Ae.current = window.setTimeout(() => U.current.word = "", pt), Ft(e));
+    clearTimeout(Ve.current), t.filterable || (Ve.current = window.setTimeout(() => U.current.word = "", pt), Ft(e));
   }, Kt = (e) => {
-    ne.current || r.current.handleFocus(e);
+    re.current || r.current.handleFocus(e);
   }, Nt = (e) => {
-    if (ne.current || !m.focused)
+    if (re.current || !m.focused)
       return;
     const n = t.opened !== void 0 ? t.opened : m.opened, o = r.current.initState();
     o.syntheticEvent = e, o.data.focused = !1, o.events.push({ type: "onBlur" }), n && he(), n && !q && r.current.togglePopup(o), M(o);
@@ -454,7 +455,7 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
     ct,
     () => ye.current
   ), rn("dropdownlist", ye, t, t.webMcp);
-  const Ae = i.useRef(null), U = i.useRef({ word: "", last: "" }), ne = i.useRef(!1), V = i.useRef(null), W = i.useRef(!1), xe = i.useRef(!1), R = i.useRef({}), De = i.useRef({}), r = i.useRef(
+  const Ve = i.useRef(null), U = i.useRef({ word: "", last: "" }), re = i.useRef(!1), B = i.useRef(null), W = i.useRef(!1), xe = i.useRef(!1), R = i.useRef({}), De = i.useRef({}), r = i.useRef(
     new lt({
       props: t,
       setState: () => {
@@ -467,23 +468,23 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
       handleItemSelect: () => {
       }
     })
-  ), Be = i.useRef(0), j = i.useRef(null), [m, zt] = i.useState({}), [Se, Ht] = i.useState(), [, Ve] = i.useReducer((e) => e, !0), [Ce, At] = i.useState(), be = Cn(), We = t.name || t.id, Bt = i.useCallback(
+  ), Ae = i.useRef(0), j = i.useRef(null), [m, zt] = i.useState({}), [Se, Ht] = i.useState(), [, Be] = i.useReducer((e) => e, !0), [Ce, Vt] = i.useState(), be = Cn(), We = t.name || t.id, At = i.useCallback(
     (e) => {
       if (e == null || !r.current)
         return;
-      const n = k(t), { textField: o } = t, l = String(e), a = yn(n, l, o, !1, G), c = a !== -1 ? n[a] : void 0;
+      const n = k(t), { textField: o } = t, a = String(e), l = yn(n, a, o, !1, G), c = l !== -1 ? n[l] : void 0;
       if (c !== void 0) {
         const f = r.current.initState();
         f.syntheticEvent = {
           target: T.current
-        }, A(c, f), M(f);
+        }, V(c, f), M(f);
       }
     },
     [t, G]
   );
   on(T, {
     fieldName: We,
-    onValueChange: Bt,
+    onValueChange: At,
     enabled: !!We
   });
   const J = (e) => {
@@ -494,94 +495,94 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
       props: t,
       setState: J,
       state: m,
-      forceUpdate: Ve,
+      forceUpdate: Be,
       element: T.current,
       handleItemSelect: $,
       value: b()
     });
-  }, [J, m, Ve, $, b]), i.useEffect(() => {
-    var u, S, h, x, s, N, L, _, Z, ae, le, D, w;
-    const { dataItemKey: e, virtual: n, groupField: o = "", textField: l } = t, a = k(t), c = R.current.virtual ? R.current.virtual.total : 0, f = t.opened !== void 0 ? t.opened : m.opened, v = R.current.opened !== void 0 ? R.current.opened : De.current.opened, d = !v && f;
+  }, [J, m, Be, $, b]), i.useEffect(() => {
+    var u, S, h, x, s, N, P, _, Z, le, de, D, w;
+    const { dataItemKey: e, virtual: n, groupField: o = "", textField: a } = t, l = k(t), c = R.current.virtual ? R.current.virtual.total : 0, f = t.opened !== void 0 ? t.opened : m.opened, v = R.current.opened !== void 0 ? R.current.opened : De.current.opened, d = !v && f;
     (u = r == null ? void 0 : r.current) == null || u.didUpdate();
     const p = (S = r == null ? void 0 : r.current) == null ? void 0 : S.getPopupSettings();
     if (f && (p == null ? void 0 : p.width) === void 0 && T.current) {
       const g = T.current.offsetWidth;
-      At((I) => I !== g ? g : I);
+      Vt((I) => I !== g ? g : I);
     }
     if (p != null && p.animate || d && ve(), n && n.total !== c)
       (h = r == null ? void 0 : r.current) == null || h.vs.calcScrollElementHeight(), (x = r == null ? void 0 : r.current) == null || x.vs.reset();
     else {
       const g = b(), I = R.current.value !== void 0 ? R.current.value : De.current.value;
-      let de = a.findIndex((Le) => F(Le, g, e));
-      o !== "" && g && l && (de = (N = (s = r == null ? void 0 : r.current) == null ? void 0 : s.getGroupedDataModernMode(a, o)) == null ? void 0 : N.map((Le) => Le[l]).indexOf(g[l]));
-      const Qt = !F(I, g, e);
-      d && n ? (L = r == null ? void 0 : r.current) == null || L.scrollToVirtualItem(n, de) : d && !n ? (ve(), a && a.length !== 0 && ((_ = r == null ? void 0 : r.current) == null || _.resetGroupStickyHeader(a[0][o], {
+      let ce = l.findIndex((Le) => L(Le, g, e));
+      o !== "" && g && a && (ce = (N = (s = r == null ? void 0 : r.current) == null ? void 0 : s.getGroupedDataModernMode(l, o)) == null ? void 0 : N.map((Le) => Le[a]).indexOf(g[a]));
+      const Qt = !L(I, g, e);
+      d && n ? (P = r == null ? void 0 : r.current) == null || P.scrollToVirtualItem(n, ce) : d && !n ? (ve(), l && l.length !== 0 && ((_ = r == null ? void 0 : r.current) == null || _.resetGroupStickyHeader(l[0][o], {
         setState: J,
         group: m.group,
         state: m
-      })), (Z = r == null ? void 0 : r.current) == null || Z.scrollToItem(de)) : f && v && g && Qt && !W.current ? (le = r == null ? void 0 : r.current) == null || le.scrollToItem(de, (ae = r == null ? void 0 : r.current) == null ? void 0 : ae.vs.enabled) : f && v && W.current && (W.current && n && n.skip === 0 ? (D = r == null ? void 0 : r.current) == null || D.vs.reset() : W.current && n && n.skip === n.total - n.pageSize && ((w = r == null ? void 0 : r.current) == null || w.vs.scrollToEnd()));
+      })), (Z = r == null ? void 0 : r.current) == null || Z.scrollToItem(ce)) : f && v && g && Qt && !W.current ? (de = r == null ? void 0 : r.current) == null || de.scrollToItem(ce, (le = r == null ? void 0 : r.current) == null ? void 0 : le.vs.enabled) : f && v && W.current && (W.current && n && n.skip === 0 ? (D = r == null ? void 0 : r.current) == null || D.vs.reset() : W.current && n && n.skip === n.total - n.pageSize && ((w = r == null ? void 0 : r.current) == null || w.vs.scrollToEnd()));
     }
     W.current = !1, De.current = m, R.current = t, Ne();
   }), i.useEffect(() => {
     var e, n;
-    return j.current = et && window.ResizeObserver && new window.ResizeObserver(ht.bind(void 0)), (e = r == null ? void 0 : r.current) == null || e.didMount(), Ne(), (n = pe()) != null && n.body && j.current && j.current.observe(pe().body), () => {
+    return j.current = et && window.ResizeObserver && new window.ResizeObserver(ht.bind(void 0)), (e = r == null ? void 0 : r.current) == null || e.didMount(), Ne(), (n = fe()) != null && n.body && j.current && j.current.observe(fe().body), () => {
       var o;
-      (o = pe()) != null && o.body && j.current && j.current.disconnect();
+      (o = fe()) != null && o.body && j.current && j.current.disconnect();
     };
   }, []);
-  const Re = ue + "-accessibility-id", qe = ue + "-listbox-id", Ue = ue + "-guid", Vt = be.toLanguageString(
+  const Re = pe + "-accessibility-id", qe = pe + "-listbox-id", Ue = pe + "-guid", Bt = be.toLanguageString(
     it,
     Pe[it]
   ), {
-    style: re,
+    style: oe,
     className: Wt,
     label: ke,
     dir: Rt,
     virtual: O,
     adaptive: Pn,
     dataItemKey: qt,
-    disabled: oe,
+    disabled: ie,
     loading: _e,
     iconClassName: Ge,
     svgIcon: Ut,
     valueRender: $e
-  } = t, Q = t.opened !== void 0 ? t.opened : m.opened, ie = b(), Ee = ee(ie, t.textField), Ye = !gt() || me().valid, se = r.current, _t = se.vs, X = K && K.uDropDownList;
+  } = t, Q = t.opened !== void 0 ? t.opened : m.opened, se = b(), Ee = ee(se, t.textField), Ye = !gt() || me().valid, ae = r.current, _t = ae.vs, X = K && K.uDropDownList;
   _t.enabled = O !== void 0;
   const je = sn(), q = !!(Se && je && Se <= je.medium && t.adaptive);
-  O !== void 0 && (se.vs.skip = O.skip, se.vs.total = O.total, se.vs.pageSize = O.pageSize);
-  const Gt = k(t), { focused: $t } = m, Je = Gt.findIndex((e) => F(e, ie, qt)), Yt = (Ze = O == null ? void 0 : O.skip) != null ? Ze : 0, jt = Q && Je >= 0 ? `k-${Ue}-item-${Je + Yt + 1}` : void 0, Qe = /* @__PURE__ */ i.createElement("span", { id: Re, className: E(P.inputInner({ c: X })) }, Ee && /* @__PURE__ */ i.createElement("span", { className: E(P.inputText({ c: X })) }, Ee)), Jt = $e !== void 0 ? $e.call(void 0, Qe, ie) : Qe, Xe = /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
+  O !== void 0 && (ae.vs.skip = O.skip, ae.vs.total = O.total, ae.vs.pageSize = O.pageSize);
+  const Gt = k(t), { focused: $t } = m, Je = Gt.findIndex((e) => L(e, se, qt)), Yt = (Ze = O == null ? void 0 : O.skip) != null ? Ze : 0, jt = Q && Je >= 0 ? `k-${Ue}-item-${Je + Yt + 1}` : void 0, Qe = /* @__PURE__ */ i.createElement("span", { id: Re, className: E(F.inputInner({ c: X })) }, Ee && /* @__PURE__ */ i.createElement("span", { className: E(F.inputText({ c: X })) }, Ee)), Jt = $e !== void 0 ? $e.call(void 0, Qe, se) : Qe, Xe = /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
     "span",
     {
       ref: It,
       className: E(
-        P.wrapper({
+        F.wrapper({
           c: X,
           size: H,
           rounded: Ke,
-          fillMode: ce,
+          fillMode: ue,
           focused: $t,
-          disabled: oe,
+          disabled: ie,
           invalid: !Ye,
           loading: _e,
-          required: fe()
+          required: te()
         }),
         Wt
       ),
-      style: ke ? { ...re, width: void 0 } : re,
+      style: ke ? { ...oe, width: void 0 } : oe,
       dir: Rt,
       onMouseDown: Q ? (e) => {
-        e.target.nodeName !== "INPUT" && (te(r.current.wrapper), e.preventDefault());
+        e.target.nodeName !== "INPUT" && (ne(r.current.wrapper), e.preventDefault());
       } : void 0,
       onFocus: q ? (e) => Ie(e) : Kt,
       onBlur: Nt,
-      tabIndex: an(ft, oe),
+      tabIndex: an(ft, ie),
       accessKey: t.accessKey,
       onKeyDown: Oe,
       onKeyPress: Tt,
-      onClick: oe ? void 0 : Ie,
+      onClick: ie ? void 0 : Ie,
       role: "combobox",
-      "aria-required": fe() || void 0,
-      "aria-disabled": oe || void 0,
+      "aria-required": te() || void 0,
+      "aria-disabled": ie || void 0,
       "aria-haspopup": "listbox",
       "aria-expanded": Q || !1,
       "aria-activedescendant": jt,
@@ -593,22 +594,22 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
       title: t.title
     },
     Jt,
-    _e && /* @__PURE__ */ i.createElement(ln, { className: E(P.loadingIcon({ c: X })), name: "loading" }),
+    _e && /* @__PURE__ */ i.createElement(ln, { className: E(F.loadingIcon({ c: X })), name: "loading" }),
     /* @__PURE__ */ i.createElement(
       Sn,
       {
         tabIndex: -1,
         type: "button",
-        "aria-label": Vt,
+        "aria-label": Bt,
         size: H,
-        fillMode: ce,
-        className: E(P.inputButton({ c: X })),
+        fillMode: ue,
+        className: E(F.inputButton({ c: X })),
         iconClass: Ge,
         svgIcon: Ge ? void 0 : Ut || mn,
         onMouseDown: (e) => m.focused && e.preventDefault()
       }
     ),
-    yt(ie),
+    yt(se),
     !q && Lt()
   ), q && bt());
   return ke ? /* @__PURE__ */ i.createElement(
@@ -618,7 +619,7 @@ const En = "Please select a value from the list!", Fe = i.forwardRef((dt, ct) =>
       editorValue: Ee,
       editorValid: Ye,
       editorDisabled: t.disabled,
-      style: { width: re ? re.width : void 0 },
+      style: { width: oe ? oe.width : void 0 },
       children: Xe
     }
   ) : Xe;