@progress/kendo-react-dropdowns 9.2.0-develop.2 → 9.2.0-develop.4

package/DropDownList/DropDownList.mjs

@@ -1,39 +1,38 @@
 /**
  * @license
  *-------------------------------------------------------------------------------------------
- * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
 "use client";
 import * as i from "react";
 import k from "prop-types";
-import { validatePackage as Yt, useUnstyled as $t, useId as jt, usePropsContext as Jt, canUseDOM as tt, classNames as C, uDropDownList as M, getTabIndex as Qt, IconWrap as Xt, svgIconPropType as Zt, createPropsContext as Rt, Keys as w, uDropDownsActionSheet as J } from "@progress/kendo-react-common";
+import { validatePackage as Yt, useUnstyled as $t, useId as jt, usePropsContext as Jt, canUseDOM as tt, classNames as C, uDropDownList as P, getTabIndex as Qt, IconWrap as Xt, svgIconPropType as Zt, createPropsContext as Rt, Keys as w, ADAPTIVE_SMALL_BREAKPOINT as nt, uDropDownsActionSheet as J, ADAPTIVE_MEDIUM_BREAKPOINT as rt } from "@progress/kendo-react-common";
 import { FloatingLabel as en } from "@progress/kendo-react-labels";
 import { caretAltDownIcon as tn, xIcon as nn } from "@progress/kendo-svg-icons";
 import rn from "../common/ListContainer.mjs";
 import on from "../common/ListFilter.mjs";
-import nt from "../common/GroupStickyHeader.mjs";
+import ot from "../common/GroupStickyHeader.mjs";
 import an from "../common/ListDefaultItem.mjs";
 import sn from "../common/List.mjs";
 import dt from "../common/DropDownBase.mjs";
-import { getFilteredData as P, areSame as N, getItemValue as fe, isPresent as rt, itemIndexStartsWith as ln, sameCharsOnly as dn, shuffleData as cn, matchText as ot } from "../common/utils.mjs";
+import { getFilteredData as M, areSame as N, getItemValue as fe, isPresent as it, itemIndexStartsWith as ln, sameCharsOnly as dn, shuffleData as cn, matchText as at } from "../common/utils.mjs";
 import { packageMetadata as un } from "../package-metadata.mjs";
-import { Button as it } from "@progress/kendo-react-buttons";
+import { Button as st } from "@progress/kendo-react-buttons";
 import { useLocalization as pn } from "@progress/kendo-react-intl";
-import { dropDownListArrowBtnAriaLabel as at, messages as mn } from "../messages/index.mjs";
-import { MOBILE_SMALL_DEVISE as st, MOBILE_MEDIUM_DEVISE as lt } from "../common/constants.mjs";
+import { dropDownListArrowBtnAriaLabel as lt, messages as mn } from "../messages/index.mjs";
 import { ActionSheet as fn, ActionSheetHeader as gn, ActionSheetContent as vn } from "@progress/kendo-react-layout";
 const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) => {
   Yt(un);
   const F = $t(), ge = jt(E.id), r = Jt(hn, E), {
-    delay: ut = O.delay,
-    tabIndex: pt = O.tabIndex,
-    ignoreCase: ve = O.ignoreCase,
-    size: Q = O.size,
-    rounded: Fe = O.rounded,
-    fillMode: Ie = O.fillMode,
-    groupMode: wn = O.groupMode
+    delay: ut = A.delay,
+    tabIndex: pt = A.tabIndex,
+    ignoreCase: ve = A.ignoreCase,
+    size: Q = A.size,
+    rounded: Fe = A.rounded,
+    fillMode: Ie = A.fillMode,
+    groupMode: wn = A.groupMode
   } = r, he = () => {
     if (tt)
       return q.current && q.current.ownerDocument || window.document;
@@ -42,20 +41,20 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
     (e = t == null ? void 0 : t.current) != null && e.wrapper && ((n = t == null ? void 0 : t.current) == null || n.wrapper.focus({ preventScroll: !0 }));
   }, L = () => {
     let e;
-    return V.current !== void 0 && V.current !== null ? e = V.current : r.value !== void 0 ? e = r.value : m.value !== void 0 && m.value !== null ? e = m.value : r.defaultValue !== void 0 && r.defaultValue !== null && (e = r.defaultValue), !rt(e) && r.defaultItem !== void 0 && r.defaultItem !== null && (e = r.defaultItem), e;
+    return V.current !== void 0 && V.current !== null ? e = V.current : r.value !== void 0 ? e = r.value : m.value !== void 0 && m.value !== null ? e = m.value : r.defaultValue !== void 0 && r.defaultValue !== null && (e = r.defaultValue), !it(e) && r.defaultItem !== void 0 && r.defaultItem !== null && (e = r.defaultItem), e;
   }, ft = () => {
-    const { dataItemKey: e } = r, n = P(E), a = L();
+    const { dataItemKey: e } = r, n = M(E), a = L();
     return n.findIndex((c) => N(c, a, e));
-  }, we = () => r.required !== void 0 ? r.required : O.required, ye = () => {
+  }, we = () => r.required !== void 0 ? r.required : A.required, ye = () => {
     const e = r.validationMessage !== void 0, n = L(), a = !we() || n !== null && n !== "" && n !== void 0, c = r.valid !== void 0 ? r.valid : a;
     return {
       customError: e,
       valid: c,
       valueMissing: n === null
     };
-  }, gt = () => r.validityStyles !== void 0 ? r.validityStyles : O.validityStyles, ne = (e) => {
+  }, gt = () => r.validityStyles !== void 0 ? r.validityStyles : A.validityStyles, ne = (e) => {
     oe.current = !0, e.focus(), window.setTimeout(() => oe.current = !1, 30);
-  }, Se = () => {
+  }, De = () => {
     Z.current && ne(Z.current), r.adaptive && setTimeout(() => {
       Z.current && ne(Z.current);
     }, 300);
@@ -74,11 +73,11 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
     (n = t == null ? void 0 : t.current) == null || n.applyState(e), V.current = void 0;
   }, X = (e, n) => {
     var l;
-    const { virtual: a, dataItemKey: c, defaultItem: d } = r, u = P(E), I = a ? a.skip : 0, f = L(), o = e === -1 && d !== void 0 ? d : u[e - I], p = !N(o, f, c);
+    const { virtual: a, dataItemKey: c, defaultItem: d } = r, u = M(E), I = a ? a.skip : 0, f = L(), o = e === -1 && d !== void 0 ? d : u[e - I], p = !N(o, f, c);
     U(o, n), p && ((l = t == null ? void 0 : t.current) == null || l.triggerPageChangeCornerItems(o, n));
-  }, A = (e, n, a) => {
-    var S, g;
-    const { defaultItem: c, dataItemKey: d, virtual: u = { skip: 0, total: 0, pageSize: 0 } } = r, I = L(), f = P(E), o = (S = t == null ? void 0 : t.current) == null ? void 0 : S.vs, p = f.findIndex((h) => N(h, I, d)), l = (g = t == null ? void 0 : t.current) == null ? void 0 : g.navigation.navigate({
+  }, z = (e, n, a) => {
+    var D, g;
+    const { defaultItem: c, dataItemKey: d, virtual: u = { skip: 0, total: 0, pageSize: 0 } } = r, I = L(), f = M(E), o = (D = t == null ? void 0 : t.current) == null ? void 0 : D.vs, p = f.findIndex((h) => N(h, I, d)), l = (g = t == null ? void 0 : t.current) == null ? void 0 : g.navigation.navigate({
       current: u.skip + p,
       max: (o != null && o.enabled ? u.total : f.length) - 1,
       min: c !== void 0 ? -1 : 0,
@@ -101,7 +100,7 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
       style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
     },
     /* @__PURE__ */ i.createElement("option", { value: r.valueMap ? r.valueMap.call(void 0, e) : e })
-  ), De = () => {
+  ), Se = () => {
     const {
       textField: e,
       dataItemKey: n,
@@ -109,18 +108,18 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
       focusedItemIndex: c = ln,
       filterable: d,
       skipDisabledItems: u = !0
-    } = r, I = L(), f = P(E), o = r.filter ? r.filter : m.text;
-    return u && e && !o && !I ? f.findIndex((p) => !p.disabled && p[e]) : rt(I) && o === void 0 || d && o === "" ? f.findIndex((p) => N(p, I, n)) : o ? Ee.current ? c(f, o, e) : f.findIndex((p) => N(p, I, n)) : a.skip === 0 ? 0 : -1;
+    } = r, I = L(), f = M(E), o = r.filter ? r.filter : m.text;
+    return u && e && !o && !I ? f.findIndex((p) => !p.disabled && p[e]) : it(I) && o === void 0 || d && o === "" ? f.findIndex((p) => N(p, I, n)) : o ? Ee.current ? c(f, o, e) : f.findIndex((p) => N(p, I, n)) : a.skip === 0 ? 0 : -1;
   }, Te = (e, n) => n !== void 0 && n !== -1 && e && e.length > 0 && e[n].disabled, xe = () => {
-    const e = P(E), n = t.current.initState(), a = De();
+    const e = M(E), n = t.current.initState(), a = Se();
     Te(e, a) && (U(null, n), K(n));
   }, Ce = (e) => {
     if (e.isPropagationStopped())
       return;
     const n = t.current.initState();
     n.syntheticEvent = e, m.focused || (n.data.focused = !0), xe(), t.current.togglePopup(n), K(n);
-  }, Oe = (e) => {
-    var z, pe, W, me, j, Re, et;
+  }, Ae = (e) => {
+    var O, pe, W, me, j, Re, et;
     e && e.target instanceof Element && e.target.nodeName === "INPUT" && e.stopPropagation && e.stopPropagation();
     const {
       filterable: n,
@@ -132,27 +131,27 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
       groupField: f = "",
       textField: o,
       skipDisabledItems: p = !0
-    } = r, l = P(E), S = L(), g = l.findIndex((x) => N(x, S, I)), h = r.opened !== void 0 ? r.opened : m.opened, s = e.keyCode, T = s === w.home || s === w.end, b = s === w.up || s === w.down, $ = !h && (e.altKey && s === w.down || s === w.enter || s === w.space), te = h && (e.altKey && s === w.up || s === w.esc), ce = d && (s === w.left || s === w.right), ue = b || ce && !n || T, D = t.current.initState();
-    if (D.syntheticEvent = e, !a) {
-      if (T && ((z = t == null ? void 0 : t.current) != null && z.vs.enabled))
-        s === w.home ? u.skip !== 0 ? ((pe = t == null ? void 0 : t.current) == null || pe.triggerOnPageChange(D, 0, u.pageSize), H.current = !0) : U(l[0], D) : u.skip < u.total - u.pageSize ? ((W = t == null ? void 0 : t.current) == null || W.triggerOnPageChange(
-          D,
+    } = r, l = M(E), D = L(), g = l.findIndex((x) => N(x, D, I)), h = r.opened !== void 0 ? r.opened : m.opened, s = e.keyCode, T = s === w.home || s === w.end, b = s === w.up || s === w.down, $ = !h && (e.altKey && s === w.down || s === w.enter || s === w.space), te = h && (e.altKey && s === w.up || s === w.esc), ce = d && (s === w.left || s === w.right), ue = b || ce && !n || T, S = t.current.initState();
+    if (S.syntheticEvent = e, !a) {
+      if (T && ((O = t == null ? void 0 : t.current) != null && O.vs.enabled))
+        s === w.home ? u.skip !== 0 ? ((pe = t == null ? void 0 : t.current) == null || pe.triggerOnPageChange(S, 0, u.pageSize), H.current = !0) : U(l[0], S) : u.skip < u.total - u.pageSize ? ((W = t == null ? void 0 : t.current) == null || W.triggerOnPageChange(
+          S,
           u.total - u.pageSize,
           u.pageSize
-        ), H.current = !0) : U(l[l.length - 1], D);
+        ), H.current = !0) : U(l[l.length - 1], S);
       else if (h && s === w.pageUp)
         e.preventDefault(), (me = t == null ? void 0 : t.current) == null || me.scrollPopupByPageSize(-1);
       else if (h && s === w.pageDown)
         e.preventDefault(), (j = t == null ? void 0 : t.current) == null || j.scrollPopupByPageSize(1);
       else if (h && s === w.enter) {
-        const x = De();
-        Te(l, x) ? (U(null, D), K(D)) : X(x, D), (Re = t == null ? void 0 : t.current) == null || Re.togglePopup(D), e.preventDefault();
+        const x = Se();
+        Te(l, x) ? (U(null, S), K(S)) : X(x, S), (Re = t == null ? void 0 : t.current) == null || Re.togglePopup(S), e.preventDefault();
       } else if ($ || te)
-        te && xe(), (et = t == null ? void 0 : t.current) == null || et.togglePopup(D), e.preventDefault();
+        te && xe(), (et = t == null ? void 0 : t.current) == null || et.togglePopup(S), e.preventDefault();
       else if (ue) {
         if (Ee.current = !1, f !== "" && o)
           if (!p && h)
-            A(D, s);
+            z(S, s);
           else {
             let x;
             if (s === w.down || s === w.right) {
@@ -174,12 +173,12 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
             }
             if (x !== void 0) {
               const y = x - g;
-              A(D, s, y);
+              z(S, s, y);
             } else
-              x === void 0 && l.findIndex((y) => y[o] === S[o]) === l.length - 1 && A(D, s);
+              x === void 0 && l.findIndex((y) => y[o] === D[o]) === l.length - 1 && z(S, s);
           }
         else if (!p && h || T)
-          A(D, s);
+          z(S, s);
         else if (o) {
           let x;
           if (s === w.down || s === w.right) {
@@ -201,19 +200,19 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
           }
           if (x !== void 0) {
             const y = x - g;
-            A(D, s, y);
+            z(S, s, y);
           } else
-            x === void 0 && l.findIndex((y) => y[o] === S[o]) === l.length - 1 && A(D, s);
+            x === void 0 && l.findIndex((y) => y[o] === D[o]) === l.length - 1 && z(S, s);
         } else
-          A(D, s);
+          z(S, s);
         e.preventDefault();
       }
-      K(D);
+      K(S);
     }
   }, wt = (e) => {
     const n = t.current.initState();
     n.syntheticEvent = e.syntheticEvent, r.filter === void 0 && (n.data.text = e.target.value), t.current.filterChanged(e.target.value, n), Ee.current = !0, K(n), Y({ group: void 0, text: String(e.target.value) });
-  }, ze = () => {
+  }, Oe = () => {
     const e = r.filter !== void 0 ? r.filter : m.text;
     return r.filterable && /* @__PURE__ */ i.createElement(
       on,
@@ -221,7 +220,7 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
         value: e,
         ref: (n) => Z.current = n && n.element,
         onChange: wt,
-        onKeyDown: Oe,
+        onKeyDown: Ae,
         size: Q,
         rounded: Fe,
         fillMode: Ie,
@@ -232,7 +231,7 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
     var a;
     const n = t.current.initState();
     n.syntheticEvent = e, (a = t == null ? void 0 : t.current) == null || a.togglePopup(n), U(r.defaultItem, n), K(n);
-  }, Ae = () => {
+  }, ze = () => {
     const { textField: e, defaultItem: n, dataItemKey: a } = r, c = L();
     return n !== void 0 && /* @__PURE__ */ i.createElement(
       an,
@@ -244,14 +243,14 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
         onClick: yt
       }
     );
-  }, St = (e, n) => {
+  }, Dt = (e, n) => {
     var a;
     (a = t == null ? void 0 : t.current) == null || a.handleItemClick(e, n), V.current = void 0;
-  }, Dt = (e) => {
+  }, St = (e) => {
     const { vs: n, list: a } = t.current;
     n.scrollHandler(e);
     const { groupField: c } = r;
-    let d = P(E);
+    let d = M(E);
     if (!(!c || !d.length) && c) {
       const u = _e.current = _e.current || (n.enabled ? n.itemHeight : a ? a.children[0].offsetHeight : 0), f = e.target.scrollTop - n.skip * u;
       d = t.current.getGroupedDataModernMode(d, c);
@@ -269,14 +268,14 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
       groupHeaderItemRender: c,
       listNoDataRender: d,
       itemRender: u
-    } = r, I = P(E), f = F && F.uDropDownList, o = t.current.vs, p = a.skip, l = r.opened !== void 0 ? r.opened : m.opened, S = t.current.getPopupSettings(), g = `translateY(${o.translate}px)`, h = L();
+    } = r, I = M(E), f = F && F.uDropDownList, o = t.current.vs, p = a.skip, l = r.opened !== void 0 ? r.opened : m.opened, D = t.current.getPopupSettings(), g = `translateY(${o.translate}px)`, h = L();
     return /* @__PURE__ */ i.createElement(
       sn,
       {
         id: ke,
         show: l,
         data: I.slice(),
-        focusedIndex: De(),
+        focusedIndex: Se(),
         value: h,
         textField: e,
         valueField: n,
@@ -284,16 +283,16 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
         groupField: r.groupField,
         groupMode: "modern",
         listRef: (T) => o.list = t.current.list = T,
-        wrapperStyle: { maxHeight: S.height },
-        wrapperCssClass: C(M.listContent({ c: f })),
+        wrapperStyle: { maxHeight: D.height },
+        wrapperCssClass: C(P.listContent({ c: f })),
         listStyle: o.enabled ? { transform: g } : void 0,
         key: "listkey",
         skip: p,
-        onClick: St,
+        onClick: Dt,
         itemRender: u,
         groupHeaderItemRender: c,
         noDataRender: d,
-        onScroll: Dt,
+        onScroll: St,
         wrapperRef: o.scrollerRef,
         scroller: (s = t == null ? void 0 : t.current) == null ? void 0 : s.renderScrollElement(),
         ariaSetSize: a.total
@@ -301,23 +300,23 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
     );
   }, xt = () => {
     var h;
-    const { windowWidth: e = 0 } = m, { header: n, footer: a, adaptiveTitle: c, groupField: d, groupStickyHeaderItemRender: u, list: I } = r, f = P(E), o = r.opened !== void 0 ? r.opened : m.opened, p = F && F.uDropDownList, l = F && F.uDropDownsActionSheet, S = {
+    const { windowWidth: e = 0 } = m, { header: n, footer: a, adaptiveTitle: c, groupField: d, groupStickyHeaderItemRender: u, list: I } = r, f = M(E), o = r.opened !== void 0 ? r.opened : m.opened, p = F && F.uDropDownList, l = F && F.uDropDownsActionSheet, D = {
       navigatable: !1,
       navigatableElements: [],
       expand: o,
       animation: !0,
       onClose: (s) => Ce(s),
-      animationStyles: e <= st ? { top: 0, width: "100%", height: "100%" } : void 0,
+      animationStyles: e <= nt ? { top: 0, width: "100%", height: "100%" } : void 0,
       className: C(
         J.wrapper({
           c: l,
-          isFullScreen: e <= st
+          isFullScreen: e <= nt
         })
       )
     };
     let { group: g } = m;
-    return g === void 0 && d !== void 0 && (g = fe(f[0], d)), /* @__PURE__ */ i.createElement(fn, { ...S }, /* @__PURE__ */ i.createElement(gn, { className: C(J.header({ c: l })) }, /* @__PURE__ */ i.createElement("div", { className: C(J.titleBar({ c: l })) }, /* @__PURE__ */ i.createElement("div", { className: C(J.title({ c: l })) }, /* @__PURE__ */ i.createElement("div", null, c)), /* @__PURE__ */ i.createElement("div", { className: C(J.actions({ c: l })) }, /* @__PURE__ */ i.createElement(
-      it,
+    return g === void 0 && d !== void 0 && (g = fe(f[0], d)), /* @__PURE__ */ i.createElement(fn, { ...D }, /* @__PURE__ */ i.createElement(gn, { className: C(J.header({ c: l })) }, /* @__PURE__ */ i.createElement("div", { className: C(J.titleBar({ c: l })) }, /* @__PURE__ */ i.createElement("div", { className: C(J.title({ c: l })) }, /* @__PURE__ */ i.createElement("div", null, c)), /* @__PURE__ */ i.createElement("div", { className: C(J.actions({ c: l })) }, /* @__PURE__ */ i.createElement(
+      st,
       {
         tabIndex: 0,
         "aria-label": "Cancel",
@@ -328,20 +327,20 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
         icon: "x",
         svgIcon: nn
       }
-    ))), /* @__PURE__ */ i.createElement("div", { className: C(J.titleBarGroup({ c: l })) }, ze())), /* @__PURE__ */ i.createElement(vn, { overflowHidden: !0 }, n && /* @__PURE__ */ i.createElement("div", { className: C(M.listHeader({ c: p })) }, n), /* @__PURE__ */ i.createElement(
+    ))), /* @__PURE__ */ i.createElement("div", { className: C(J.titleBarGroup({ c: l })) }, Oe())), /* @__PURE__ */ i.createElement(vn, { overflowHidden: !0 }, n && /* @__PURE__ */ i.createElement("div", { className: C(P.listHeader({ c: p })) }, n), /* @__PURE__ */ i.createElement(
       "div",
       {
         className: C(
-          M.list({
+          P.list({
             c: p,
             size: Q,
             virtual: (h = t == null ? void 0 : t.current) == null ? void 0 : h.vs.enabled
           })
         )
       },
-      Ae(),
+      ze(),
       !I && g && f.length !== 0 && /* @__PURE__ */ i.createElement(
-        nt,
+        ot,
         {
           group: g,
           groupMode: "modern",
@@ -349,7 +348,7 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
         }
       ),
       Ve()
-    ), a && /* @__PURE__ */ i.createElement("div", { className: C(M.listFooter({ c: p })) }, a)));
+    ), a && /* @__PURE__ */ i.createElement("div", { className: C(P.listFooter({ c: p })) }, a)));
   }, Ct = () => {
     m.focused && window.setTimeout(() => {
       m.focused && t.current.wrapper && ne(t.current.wrapper);
@@ -358,43 +357,43 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
     var n;
     (n = r.popupSettings) != null && n.onMouseDownOutside && r.popupSettings.onMouseDownOutside.call(void 0, e);
   }, kt = () => {
-    const { header: e, footer: n, dir: a, groupField: c, groupStickyHeaderItemRender: d, list: u } = r, I = P(E), f = t.current, o = f.getPopupSettings(), p = r.opened !== void 0 ? r.opened : m.opened, l = o.width !== void 0 ? o.width : f.popupWidth, S = F && F.uDropDownList, g = {
+    const { header: e, footer: n, dir: a, groupField: c, groupStickyHeaderItemRender: d, list: u } = r, I = M(E), f = t.current, o = f.getPopupSettings(), p = r.opened !== void 0 ? r.opened : m.opened, l = o.width !== void 0 ? o.width : f.popupWidth, D = F && F.uDropDownList, g = {
       dir: a !== void 0 ? a : f.dirCalculated,
       width: l,
       popupSettings: {
         ...o,
         popupClass: C(
           o.popupClass,
-          M.listContainer({
-            c: S
+          P.listContainer({
+            c: D
           })
         ),
         anchor: o.anchor || q.current,
         show: p,
-        onOpen: Se,
+        onOpen: De,
         onClose: Ct,
         onMouseDownOutside: Et
       },
       itemsCount: [I.length]
     };
     let { group: h } = m;
-    return h === void 0 && c !== void 0 && (h = fe(I[0], c)), /* @__PURE__ */ i.createElement(rn, { ...g }, ze(), e && /* @__PURE__ */ i.createElement("div", { className: C(M.listHeader({ c: S })) }, e), /* @__PURE__ */ i.createElement(
+    return h === void 0 && c !== void 0 && (h = fe(I[0], c)), /* @__PURE__ */ i.createElement(rn, { ...g }, Oe(), e && /* @__PURE__ */ i.createElement("div", { className: C(P.listHeader({ c: D })) }, e), /* @__PURE__ */ i.createElement(
       "div",
       {
         className: C(
-          M.list({
-            c: S,
+          P.list({
+            c: D,
             size: Q,
             virtual: t.current.vs.enabled
           })
         )
       },
-      Ae(),
-      !u && h && I.length !== 0 && /* @__PURE__ */ i.createElement(nt, { group: h, groupMode: "modern", render: d }),
+      ze(),
+      !u && h && I.length !== 0 && /* @__PURE__ */ i.createElement(ot, { group: h, groupMode: "modern", render: d }),
       Ve()
-    ), n && /* @__PURE__ */ i.createElement("div", { className: C(M.listFooter({ c: S })) }, n));
+    ), n && /* @__PURE__ */ i.createElement("div", { className: C(P.listFooter({ c: D })) }, n));
   }, Lt = (e) => {
-    const { dataItemKey: n } = r, a = P(E), c = L();
+    const { dataItemKey: n } = r, a = M(E), c = L();
     let d = a.map((b, $) => ({ item: b, itemIndex: $ }));
     const u = G.current.word, I = G.current.last, f = dn(u, I);
     let o = d.length, p = Math.max(
@@ -402,10 +401,10 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
       a.findIndex((b) => N(b, c, n))
     ), l;
     r.defaultItem && (l = { item: r.defaultItem, itemIndex: -1 }, o += 1, p += 1), p += f ? 1 : 0, d = cn(d, p, l);
-    let S, g, h, s = 0;
+    let D, g, h, s = 0;
     const { textField: T } = r;
     for (; s < o; s++)
-      if (S = fe(d[s].item, T), g = f && ot(S, I, ve), h = ot(S, u, ve), g || h) {
+      if (D = fe(d[s].item, T), g = f && at(D, I, ve), h = at(D, u, ve), g || h) {
         s = d[s].itemIndex;
         break;
       }
@@ -413,14 +412,14 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
       const b = t.current.initState();
       b.syntheticEvent = e, X(s, b), K(b), V.current = void 0;
     }
-  }, Mt = (e) => {
-    clearTimeout(Be.current), r.filterable || (Be.current = window.setTimeout(() => G.current.word = "", ut), Lt(e));
   }, Pt = (e) => {
+    clearTimeout(Be.current), r.filterable || (Be.current = window.setTimeout(() => G.current.word = "", ut), Lt(e));
+  }, Mt = (e) => {
     oe.current || t.current.handleFocus(e);
   }, bt = (e) => {
     if (oe.current || !m.focused)
       return;
-    const n = r.opened !== void 0 ? r.opened : m.opened, { adaptive: a } = r, { windowWidth: c = 0 } = m, d = c <= lt && a, u = t.current.initState();
+    const n = r.opened !== void 0 ? r.opened : m.opened, { adaptive: a } = r, { windowWidth: c = 0 } = m, d = c <= rt && a, u = t.current.initState();
     u.syntheticEvent = e, u.data.focused = !1, u.events.push({ type: "onBlur" }), n && xe(), n && !d && t.current.togglePopup(u), K(u);
   }, Nt = (e) => {
     if (r.filterable || e.which === 0 || e.keyCode === w.enter)
@@ -429,7 +428,7 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
     ve && (n = n.toLowerCase()), n === " " && e.preventDefault(), G.current = {
       word: G.current.word + n,
       last: G.current.last + n
-    }, Mt(e);
+    }, Pt(e);
   }, Ft = () => {
     const e = t.current.initState();
     e.data.opened = m.opened, t.current.togglePopup(e), K(e);
@@ -493,20 +492,20 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
       value: L()
     });
   }, [Y, m, We, X, L]), i.useEffect(() => {
-    var p, l, S, g, h, s, T, b, $, te, ce, ue, D;
-    const { dataItemKey: e, virtual: n, groupField: a = "", textField: c } = r, d = P(E), u = B.current.virtual ? B.current.virtual.total : 0, I = r.opened !== void 0 ? r.opened : m.opened, f = B.current.opened !== void 0 ? B.current.opened : ie.current.opened, o = !f && I;
-    if ((p = t == null ? void 0 : t.current) == null || p.didUpdate(), (l = t == null ? void 0 : t.current) != null && l.getPopupSettings().animate || o && Se(), n && n.total !== u)
-      (S = t == null ? void 0 : t.current) == null || S.vs.calcScrollElementHeight(), (g = t == null ? void 0 : t.current) == null || g.vs.reset();
+    var p, l, D, g, h, s, T, b, $, te, ce, ue, S;
+    const { dataItemKey: e, virtual: n, groupField: a = "", textField: c } = r, d = M(E), u = B.current.virtual ? B.current.virtual.total : 0, I = r.opened !== void 0 ? r.opened : m.opened, f = B.current.opened !== void 0 ? B.current.opened : ie.current.opened, o = !f && I;
+    if ((p = t == null ? void 0 : t.current) == null || p.didUpdate(), (l = t == null ? void 0 : t.current) != null && l.getPopupSettings().animate || o && De(), n && n.total !== u)
+      (D = t == null ? void 0 : t.current) == null || D.vs.calcScrollElementHeight(), (g = t == null ? void 0 : t.current) == null || g.vs.reset();
     else {
-      const z = L(), pe = B.current.value !== void 0 ? B.current.value : ie.current.value;
-      let W = d.findIndex((j) => N(j, z, e));
-      a !== "" && z && c && (W = (s = (h = t == null ? void 0 : t.current) == null ? void 0 : h.getGroupedDataModernMode(d, a)) == null ? void 0 : s.map((j) => j[c]).indexOf(z[c]));
-      const me = !N(pe, z, e);
-      o && n ? (T = t == null ? void 0 : t.current) == null || T.scrollToVirtualItem(n, W) : o && !n ? (Se(), d && d.length !== 0 && ((b = t == null ? void 0 : t.current) == null || b.resetGroupStickyHeader(d[0][a], {
+      const O = L(), pe = B.current.value !== void 0 ? B.current.value : ie.current.value;
+      let W = d.findIndex((j) => N(j, O, e));
+      a !== "" && O && c && (W = (s = (h = t == null ? void 0 : t.current) == null ? void 0 : h.getGroupedDataModernMode(d, a)) == null ? void 0 : s.map((j) => j[c]).indexOf(O[c]));
+      const me = !N(pe, O, e);
+      o && n ? (T = t == null ? void 0 : t.current) == null || T.scrollToVirtualItem(n, W) : o && !n ? (De(), d && d.length !== 0 && ((b = t == null ? void 0 : t.current) == null || b.resetGroupStickyHeader(d[0][a], {
         setState: Y,
         group: m.group,
         state: m
-      })), ($ = t == null ? void 0 : t.current) == null || $.scrollToItem(W)) : I && f && z && me && !H.current ? (ce = t == null ? void 0 : t.current) == null || ce.scrollToItem(W, (te = t == null ? void 0 : t.current) == null ? void 0 : te.vs.enabled) : I && f && H.current && (H.current && n && n.skip === 0 ? (ue = t == null ? void 0 : t.current) == null || ue.vs.reset() : H.current && n && n.skip === n.total - n.pageSize && ((D = t == null ? void 0 : t.current) == null || D.vs.scrollToEnd()));
+      })), ($ = t == null ? void 0 : t.current) == null || $.scrollToItem(W)) : I && f && O && me && !H.current ? (ce = t == null ? void 0 : t.current) == null || ce.scrollToItem(W, (te = t == null ? void 0 : t.current) == null ? void 0 : te.vs.enabled) : I && f && H.current && (H.current && n && n.skip === 0 ? (ue = t == null ? void 0 : t.current) == null || ue.vs.reset() : H.current && n && n.skip === n.total - n.pageSize && ((S = t == null ? void 0 : t.current) == null || S.vs.scrollToEnd()));
     }
     H.current = !1, ie.current = m, B.current = r, Ke();
   }), i.useEffect(() => {
@@ -516,14 +515,14 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
       (a = he()) != null && a.body && R.current && R.current.disconnect();
     };
   }, []);
-  const Ue = ge + "-accessibility-id", ke = ge + "-listbox-id", qe = ge + "-guid", Ot = Tt.toLanguageString(
-    at,
-    mn[at]
+  const Ue = ge + "-accessibility-id", ke = ge + "-listbox-id", qe = ge + "-guid", At = Tt.toLanguageString(
+    lt,
+    mn[lt]
   ), {
     style: ae,
-    className: zt,
+    className: Ot,
     label: Le,
-    dir: At,
+    dir: zt,
     virtual: _,
     adaptive: Vt,
     dataItemKey: Ht,
@@ -532,14 +531,14 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
     iconClassName: Ye,
     svgIcon: $e,
     valueRender: je
-  } = r, { windowWidth: Bt = 0 } = m, Me = r.opened !== void 0 ? r.opened : m.opened, le = L(), Pe = fe(le, r.textField), Je = !gt() || ye().valid, de = t.current, _t = de.vs, Qe = Bt <= lt && Vt, ee = F && F.uDropDownList;
+  } = r, { windowWidth: Bt = 0 } = m, Pe = r.opened !== void 0 ? r.opened : m.opened, le = L(), Me = fe(le, r.textField), Je = !gt() || ye().valid, de = t.current, _t = de.vs, Qe = Bt <= rt && Vt, ee = F && F.uDropDownList;
   _t.enabled = _ !== void 0, _ !== void 0 && (de.vs.skip = _.skip, de.vs.total = _.total, de.vs.pageSize = _.pageSize);
-  const Wt = P(E), { focused: Ut } = m, qt = Wt.findIndex((e) => N(e, le, Ht)), Xe = /* @__PURE__ */ i.createElement("span", { id: Ue, className: C(M.inputInner({ c: ee })) }, Pe && /* @__PURE__ */ i.createElement("span", { className: C(M.inputText({ c: ee })) }, Pe)), Gt = je !== void 0 ? je.call(void 0, Xe, le) : Xe, Ze = /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
+  const Wt = M(E), { focused: Ut } = m, qt = Wt.findIndex((e) => N(e, le, Ht)), Xe = /* @__PURE__ */ i.createElement("span", { id: Ue, className: C(P.inputInner({ c: ee })) }, Me && /* @__PURE__ */ i.createElement("span", { className: C(P.inputText({ c: ee })) }, Me)), Gt = je !== void 0 ? je.call(void 0, Xe, le) : Xe, Ze = /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
     "span",
     {
       ref: It,
       className: C(
-        M.wrapper({
+        P.wrapper({
           c: ee,
           size: Q,
           rounded: Fe,
@@ -550,27 +549,27 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
           loading: Ge,
           required: we()
         }),
-        zt
+        Ot
       ),
       style: Le ? { ...ae, width: void 0 } : ae,
-      dir: At,
-      onMouseDown: Me ? (e) => {
+      dir: zt,
+      onMouseDown: Pe ? (e) => {
         e.target.nodeName !== "INPUT" && (ne(t.current.wrapper), e.preventDefault());
       } : void 0,
-      onFocus: Pt,
+      onFocus: Mt,
       onBlur: bt,
       tabIndex: Qt(pt, se),
       accessKey: r.accessKey,
-      onKeyDown: Oe,
+      onKeyDown: Ae,
       onKeyPress: Nt,
       onClick: se ? void 0 : Ce,
       role: "combobox",
       "aria-required": we(),
       "aria-disabled": se || void 0,
       "aria-haspopup": "listbox",
-      "aria-expanded": Me || !1,
+      "aria-expanded": Pe || !1,
       "aria-owns": ke,
-      "aria-activedescendant": Me ? "option-" + qe + "-" + (qt + (_ ? _.skip : 0)) : void 0,
+      "aria-activedescendant": Pe ? "option-" + qe + "-" + (qt + (_ ? _.skip : 0)) : void 0,
       "aria-label": r.ariaLabel || r.label,
       "aria-labelledby": r.ariaLabelledBy,
       "aria-describedby": r.ariaDescribedBy || Ue,
@@ -579,17 +578,17 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
       title: r.title
     },
     Gt,
-    Ge && /* @__PURE__ */ i.createElement(Xt, { className: C(M.loadingIcon({ c: ee })), name: "loading" }),
+    Ge && /* @__PURE__ */ i.createElement(Xt, { className: C(P.loadingIcon({ c: ee })), name: "loading" }),
     /* @__PURE__ */ i.createElement(
-      it,
+      st,
       {
         tabIndex: -1,
         type: "button",
-        "aria-label": Ot,
+        "aria-label": At,
         size: Q,
         fillMode: Ie,
         iconClass: Ye,
-        className: C(M.inputButton({ c: ee })),
+        className: C(P.inputButton({ c: ee })),
         rounded: null,
         themeColor: "base",
         icon: Ye ? void 0 : "caret-alt-down",
@@ -604,7 +603,7 @@ const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) =>
     en,
     {
       label: Le,
-      editorValue: Pe,
+      editorValue: Me,
       editorValid: Je,
       editorDisabled: r.disabled,
       style: { width: ae ? ae.width : void 0 },
@@ -632,7 +631,7 @@ Ne.propTypes = {
   list: k.any,
   skipDisabledItems: k.bool
 };
-const O = {
+const A = {
   delay: 500,
   tabIndex: 0,
   ignoreCase: !0,
@@ -649,5 +648,5 @@ Ne.displayName = "KendoReactDropDownList";
 export {
   Ne as DropDownList,
   hn as DropDownListPropsContext,
-  O as dropDownListDefaultProps
+  A as dropDownListDefaultProps
 };