@progress/kendo-react-dropdowns 14.5.0-develop.14 → 14.5.0-develop.16

package/DropDownList/DropDownList.mjs

@@ -7,86 +7,87 @@
  */
 import * as i from "react";
 import C from "prop-types";
-import { getLicenseMessage as Qt, usePropsContext as Xt, validatePackage as Zt, useUnstyled as Rt, useId as en, useWebMcpRegister as tn, useKendoPaste as nn, canUseDOM as tt, useAdaptiveModeContext as rn, classNames as L, uDropDownList as P, getTabIndex as on, IconWrap as sn, createPropsContext as an, Keys as h, WatermarkOverlay as ln, sizeMap as dn, svgIconPropType as cn } from "@progress/kendo-react-common";
-import { FloatingLabel as un } from "@progress/kendo-react-labels";
-import { chevronDownIcon as pn } from "@progress/kendo-svg-icons";
-import mn from "../common/ListContainer.mjs";
-import fn from "../common/ListFilter.mjs";
-import nt from "../common/GroupStickyHeader.mjs";
-import gn from "../common/ListDefaultItem.mjs";
-import vn from "../common/List.mjs";
-import dt from "../common/DropDownBase.mjs";
-import { getFilteredData as E, getItemIndexByText as hn, areSame as F, getItemValue as ne, isPresent as rt, itemIndexStartsWith as In, sameCharsOnly as yn, shuffleData as wn, matchText as ot } from "../common/utils.mjs";
-import { packageMetadata as it } from "../package-metadata.mjs";
-import { Button as xn } from "@progress/kendo-react-buttons";
-import { useLocalization as Dn } from "@progress/kendo-react-intl";
-import { dropDownListArrowBtnAriaLabel as st, messages as at, dropDownListAdaptiveFilterPlaceholder as lt } from "../messages/index.mjs";
-import { ActionSheetContent as Sn } from "@progress/kendo-react-layout";
-import { AdaptiveMode as Cn } from "../common/AdaptiveMode.mjs";
-const kn = "Please select a value from the list!", Me = i.forwardRef((ct, ut) => {
-  let Ke = !1;
-  const pt = Qt(it), n = Xt(En, ct), {
-    delay: mt = O.delay,
-    tabIndex: ft = O.tabIndex,
-    ignoreCase: J = O.ignoreCase,
-    size: z = O.size,
-    rounded: Ne = O.rounded,
-    fillMode: fe = O.fillMode
+import { getLicenseMessage as en, usePropsContext as tn, validatePackage as nn, useUnstyled as rn, useId as on, useWebMcpRegister as sn, useKendoPaste as an, canUseDOM as ot, useAdaptiveModeContext as ln, classNames as L, uDropDownList as P, getTabIndex as dn, IconWrap as cn, createPropsContext as un, Keys as h, WatermarkOverlay as pn, sizeMap as mn, svgIconPropType as fn } from "@progress/kendo-react-common";
+import { FloatingLabel as gn } from "@progress/kendo-react-labels";
+import { chevronDownIcon as vn } from "@progress/kendo-svg-icons";
+import hn from "../common/ListContainer.mjs";
+import In from "../common/ListFilter.mjs";
+import it from "../common/GroupStickyHeader.mjs";
+import yn from "../common/ListDefaultItem.mjs";
+import wn from "../common/List.mjs";
+import pt from "../common/DropDownBase.mjs";
+import { getFilteredData as E, getItemIndexByText as xn, areSame as F, getItemValue as re, isPresent as st, itemIndexStartsWith as Sn, sameCharsOnly as Dn, shuffleData as Cn, matchText as at } from "../common/utils.mjs";
+import { packageMetadata as lt } from "../package-metadata.mjs";
+import { Button as kn } from "@progress/kendo-react-buttons";
+import { useLocalization as En } from "@progress/kendo-react-intl";
+import { dropDownListArrowBtnAriaLabel as dt, messages as Me, dropDownListAdaptiveFilterPlaceholder as ct, listAriaLabel as ut } from "../messages/index.mjs";
+import { ActionSheetContent as Ln } from "@progress/kendo-react-layout";
+import { AdaptiveMode as bn } from "../common/AdaptiveMode.mjs";
+const Pn = "Please select a value from the list!", Ke = i.forwardRef((mt, ft) => {
+  var tt;
+  let Ne = !1;
+  const gt = en(lt), n = tn(Fn, mt), {
+    delay: vt = z.delay,
+    tabIndex: ht = z.tabIndex,
+    ignoreCase: J = z.ignoreCase,
+    size: H = z.size,
+    rounded: Te = z.rounded,
+    fillMode: fe = z.fillMode
   } = n;
   if (n.filterable || n.virtual) {
     const e = [];
-    n.filterable && e.push("filterable"), n.virtual && e.push("virtualization"), Ke = !Zt(it, {
+    n.filterable && e.push("filterable"), n.virtual && e.push("virtualization"), Ne = !nn(lt, {
       component: "DropDownList",
       features: e
     });
   }
-  const K = Rt(), ge = en(n.id), ve = () => {
+  const K = rn(), ge = on(n.id), ve = () => {
     var e;
-    if (tt)
-      return ((e = B.current) == null ? void 0 : e.ownerDocument) || window.document;
-  }, gt = () => {
+    if (ot)
+      return ((e = V.current) == null ? void 0 : e.ownerDocument) || window.document;
+  }, It = () => {
     var e, r;
     (e = t == null ? void 0 : t.current) != null && e.wrapper && ((r = t == null ? void 0 : t.current) == null || r.wrapper.focus({ preventScroll: !0 }));
   }, k = () => {
     let e;
-    return A.current !== void 0 && A.current !== null ? e = A.current : n.value !== void 0 ? e = n.value : m.value !== void 0 && m.value !== null ? e = m.value : n.defaultValue !== void 0 && n.defaultValue !== null && (e = n.defaultValue), !rt(e) && n.defaultItem !== void 0 && n.defaultItem !== null && (e = n.defaultItem), e;
-  }, vt = () => {
+    return W.current !== void 0 && W.current !== null ? e = W.current : n.value !== void 0 ? e = n.value : m.value !== void 0 && m.value !== null ? e = m.value : n.defaultValue !== void 0 && n.defaultValue !== null && (e = n.defaultValue), !st(e) && n.defaultItem !== void 0 && n.defaultItem !== null && (e = n.defaultItem), e;
+  }, yt = () => {
     const { dataItemKey: e } = n, r = E(n), o = k();
     return r.findIndex((l) => F(l, o, e));
-  }, he = () => n.required !== void 0 ? n.required : O.required, Ie = () => {
+  }, he = () => n.required !== void 0 ? n.required : z.required, Ie = () => {
     const e = n.validationMessage !== void 0, r = k(), o = !he() || r !== null && r !== "" && r !== void 0, l = n.valid !== void 0 ? n.valid : o;
     return {
       customError: e,
       valid: l,
       valueMissing: r === null
     };
-  }, ht = () => n.validityStyles !== void 0 ? n.validityStyles : O.validityStyles, re = (e) => {
-    oe.current = !0, e.focus(), window.setTimeout(() => oe.current = !1, 30);
+  }, wt = () => n.validityStyles !== void 0 ? n.validityStyles : z.validityStyles, oe = (e) => {
+    ie.current = !0, e.focus(), window.setTimeout(() => ie.current = !1, 30);
   }, ye = () => {
-    X.current && re(X.current), n.adaptive && setTimeout(() => {
-      X.current && re(X.current);
+    X.current && oe(X.current), n.adaptive && setTimeout(() => {
+      X.current && oe(X.current);
     }, 300);
-  }, It = i.useCallback((e) => {
+  }, xt = i.useCallback((e) => {
     for (const r of e)
-      Ht(r.target.clientWidth);
-  }, []), Te = () => {
+      Wt(r.target.clientWidth);
+  }, []), Oe = () => {
     var e;
     (e = Ce.current) != null && e.setCustomValidity && Ce.current.setCustomValidity(
-      Ie().valid ? "" : n.validationMessage || kn
+      Ie().valid ? "" : n.validationMessage || Pn
     );
-  }, V = (e, r) => {
+  }, A = (e, r) => {
     const o = k();
-    F(o, e, n.dataItemKey) || (n.value === void 0 && (r.data.value = e), t.current.updateComponentArgs({ value: e }), A.current = e, r.events.push({ type: "onChange" }));
+    F(o, e, n.dataItemKey) || (n.value === void 0 && (r.data.value = e), t.current.updateComponentArgs({ value: e }), W.current = e, r.events.push({ type: "onChange" }));
   }, M = (e) => {
     var r;
-    (r = t == null ? void 0 : t.current) == null || r.applyState(e), A.current = void 0;
+    (r = t == null ? void 0 : t.current) == null || r.applyState(e), W.current = void 0;
   }, Q = (e, r) => {
     var u;
     const { virtual: o, dataItemKey: l, defaultItem: a } = n, c = E(n), p = o ? o.skip : 0, f = k(), d = e === -1 && a !== void 0 ? a : c[e - p], g = !F(d, f, l);
-    V(d, r), g && ((u = t == null ? void 0 : t.current) == null || u.triggerPageChangeCornerItems(d, r));
-  }, H = (e, r, o) => {
-    var S, v;
-    const { defaultItem: l, dataItemKey: a, virtual: c = { skip: 0, total: 0, pageSize: 0 } } = n, p = k(), f = E(n), d = (S = t == null ? void 0 : t.current) == null ? void 0 : S.vs, g = f.findIndex((I) => F(I, p, a)), u = (v = t == null ? void 0 : t.current) == null ? void 0 : v.navigation.navigate({
+    A(d, r), g && ((u = t == null ? void 0 : t.current) == null || u.triggerPageChangeCornerItems(d, r));
+  }, B = (e, r, o) => {
+    var D, v;
+    const { defaultItem: l, dataItemKey: a, virtual: c = { skip: 0, total: 0, pageSize: 0 } } = n, p = k(), f = E(n), d = (D = t == null ? void 0 : t.current) == null ? void 0 : D.vs, g = f.findIndex((I) => F(I, p, a)), u = (v = t == null ? void 0 : t.current) == null ? void 0 : v.navigation.navigate({
       current: c.skip + g,
       max: (d != null && d.enabled ? c.total : f.length) - 1,
       min: l !== void 0 ? -1 : 0,
@@ -94,9 +95,9 @@ const kn = "Please select a value from the list!", Me = i.forwardRef((ct, ut) =>
       skipItems: o || void 0
     });
     u !== void 0 && Q(u, e), M(e);
-  }, yt = (e) => {
-    B.current = e, t.current.wrapper = e;
-  }, wt = (e) => /* @__PURE__ */ i.createElement(
+  }, St = (e) => {
+    V.current = e, t.current.wrapper = e;
+  }, Dt = (e) => /* @__PURE__ */ i.createElement(
     "select",
     {
       name: n.name,
@@ -114,21 +115,21 @@ const kn = "Please select a value from the list!", Me = i.forwardRef((ct, ut) =>
       textField: e,
       dataItemKey: r,
       virtual: o = { skip: 0 },
-      focusedItemIndex: l = In,
+      focusedItemIndex: l = Sn,
       filterable: a,
       skipDisabledItems: c = !0
     } = n, p = k(), f = E(n), d = n.filter ? n.filter : m.text;
-    return c && e && !d && !p ? f.findIndex((g) => !g.disabled) : rt(p) && d === void 0 || a && d === "" ? f.findIndex((g) => F(g, p, r)) : d ? ke.current ? l(f, d, e) : f.findIndex((g) => F(g, p, r)) : o.skip === 0 ? 0 : -1;
-  }, Oe = (e, r) => r !== void 0 && r !== -1 && e && e.length > 0 && e[r].disabled, xe = () => {
+    return c && e && !d && !p ? f.findIndex((g) => !g.disabled) : st(p) && d === void 0 || a && d === "" ? f.findIndex((g) => F(g, p, r)) : d ? ke.current ? l(f, d, e) : f.findIndex((g) => F(g, p, r)) : o.skip === 0 ? 0 : -1;
+  }, ze = (e, r) => r !== void 0 && r !== -1 && e && e.length > 0 && e[r].disabled, xe = () => {
     const e = E(n), r = t.current.initState(), o = we();
-    Oe(e, o) && (V(null, r), M(r));
-  }, De = (e) => {
+    ze(e, o) && (A(null, r), M(r));
+  }, Se = (e) => {
     if (e.isPropagationStopped())
       return;
     const r = t.current.initState();
     r.syntheticEvent = e, m.focused || (r.data.focused = !0), xe(), t.current.togglePopup(r), M(r);
-  }, ze = (e) => {
-    var T, pe, G, me, j, Re, et;
+  }, He = (e) => {
+    var O, pe, G, me, j, nt, rt;
     e && e.target instanceof Element && e.target.nodeName === "INPUT" && e.stopPropagation && e.stopPropagation();
     const {
       filterable: r,
@@ -140,139 +141,139 @@ const kn = "Please select a value from the list!", Me = i.forwardRef((ct, ut) =>
       groupField: f = "",
       textField: d,
       skipDisabledItems: g = !0
-    } = n, u = E(n), S = k(), v = u.findIndex((w) => F(w, S, p)), I = n.opened !== void 0 ? n.opened : m.opened, s = e.keyCode, N = s === h.home || s === h.end, b = s === h.up || s === h.down, Y = !I && (e.altKey && s === h.down || s === h.enter || s === h.space), te = I && (e.altKey && s === h.up || s === h.esc), ce = a && (s === h.left || s === h.right), ue = b || ce && !r || N, y = t.current.initState();
+    } = n, u = E(n), D = k(), v = u.findIndex((w) => F(w, D, p)), I = n.opened !== void 0 ? n.opened : m.opened, s = e.keyCode, N = s === h.home || s === h.end, b = s === h.up || s === h.down, Y = !I && (e.altKey && s === h.down || s === h.enter || s === h.space), ne = I && (e.altKey && s === h.up || s === h.esc), ce = a && (s === h.left || s === h.right), ue = b || ce && !r || N, y = t.current.initState();
     if (y.syntheticEvent = e, !o) {
-      if (N && ((T = t == null ? void 0 : t.current) != null && T.vs.enabled))
-        s === h.home ? c.skip !== 0 ? ((pe = t == null ? void 0 : t.current) == null || pe.triggerOnPageChange(y, 0, c.pageSize), W.current = !0) : V(u[0], y) : c.skip < c.total - c.pageSize ? ((G = t == null ? void 0 : t.current) == null || G.triggerOnPageChange(
+      if (N && ((O = t == null ? void 0 : t.current) != null && O.vs.enabled))
+        s === h.home ? c.skip !== 0 ? ((pe = t == null ? void 0 : t.current) == null || pe.triggerOnPageChange(y, 0, c.pageSize), q.current = !0) : A(u[0], y) : c.skip < c.total - c.pageSize ? ((G = t == null ? void 0 : t.current) == null || G.triggerOnPageChange(
           y,
           c.total - c.pageSize,
           c.pageSize
-        ), W.current = !0) : V(u[u.length - 1], y);
+        ), q.current = !0) : A(u[u.length - 1], y);
       else if (I && s === h.pageUp)
         e.preventDefault(), (me = t == null ? void 0 : t.current) == null || me.scrollPopupByPageSize(-1);
       else if (I && s === h.pageDown)
         e.preventDefault(), (j = t == null ? void 0 : t.current) == null || j.scrollPopupByPageSize(1);
       else if (I && s === h.enter) {
         const w = we();
-        Oe(u, w) ? (V(null, y), M(y)) : Q(w, y), (Re = t == null ? void 0 : t.current) == null || Re.togglePopup(y), e.preventDefault();
-      } else if (Y || te)
-        te && xe(), (et = t == null ? void 0 : t.current) == null || et.togglePopup(y), e.preventDefault();
+        ze(u, w) ? (A(null, y), M(y)) : Q(w, y), (nt = t == null ? void 0 : t.current) == null || nt.togglePopup(y), e.preventDefault();
+      } else if (Y || ne)
+        ne && xe(), (rt = t == null ? void 0 : t.current) == null || rt.togglePopup(y), e.preventDefault();
       else if (ue) {
         if (ke.current = !1, f !== "" && d)
           if (!g && I)
-            H(y, s);
+            B(y, s);
           else {
             let w;
             if (s === h.down || s === h.right) {
-              const x = u.slice(v + 1).find((D) => !D.disabled);
+              const x = u.slice(v + 1).find((S) => !S.disabled);
               w = x && u.indexOf(x);
             } else if (s === h.up || s === h.left) {
               let x;
               if (v === 0 && l)
                 w = -1;
               else if (v === -1)
-                x = u, w = u.findIndex((D) => !D.disabled);
+                x = u, w = u.findIndex((S) => !S.disabled);
               else {
                 x = u.slice(0, v);
-                let D = x.pop();
-                for (; D && D.disabled; )
-                  D = x.pop();
-                w = D && u.indexOf(D);
+                let S = x.pop();
+                for (; S && S.disabled; )
+                  S = x.pop();
+                w = S && u.indexOf(S);
               }
             }
             if (w !== void 0) {
               const x = w - v;
-              H(y, s, x);
-            } else w === void 0 && v === u.length - 1 && H(y, s);
+              B(y, s, x);
+            } else w === void 0 && v === u.length - 1 && B(y, s);
           }
         else if (!g && I || N)
-          H(y, s);
+          B(y, s);
         else if (d) {
           let w;
           if (s === h.down || s === h.right) {
-            const x = u.slice(v + 1).find((D) => !D.disabled);
+            const x = u.slice(v + 1).find((S) => !S.disabled);
             w = x && u.indexOf(x);
           } else if (s === h.up || s === h.left) {
             let x;
             if (v === 0 && l)
               w = -1;
             else if (v === -1)
-              x = u, w = u.findIndex((D) => !D.disabled);
+              x = u, w = u.findIndex((S) => !S.disabled);
             else {
               x = u.slice(0, v);
-              let D = x.pop();
-              for (; D && D.disabled; )
-                D = x.pop();
-              w = D && u.indexOf(D);
+              let S = x.pop();
+              for (; S && S.disabled; )
+                S = x.pop();
+              w = S && u.indexOf(S);
             }
           }
           if (w !== void 0) {
             const x = w - v;
-            H(y, s, x);
-          } else w === void 0 && v === u.length - 1 && H(y, s);
+            B(y, s, x);
+          } else w === void 0 && v === u.length - 1 && B(y, s);
         } else
-          H(y, s);
+          B(y, s);
         e.preventDefault();
       }
       M(y);
     }
-  }, xt = (e) => {
+  }, Ct = (e) => {
     const r = t.current.initState();
     r.syntheticEvent = e.syntheticEvent, n.filter === void 0 && (r.data.text = e.target.value), t.current.filterChanged(e.target.value, r), ke.current = !0, M(r), R({ group: void 0, text: String(e.target.value) });
-  }, Ve = (e) => {
+  }, Ae = (e) => {
     const r = n.filter !== void 0 ? n.filter : m.text;
     return n.filterable && /* @__PURE__ */ i.createElement(
-      fn,
+      In,
       {
         value: r,
         ref: (o) => {
           X.current = o && o.element;
         },
-        onChange: xt,
-        onKeyDown: ze,
-        size: e ? "large" : z,
-        rounded: Ne,
+        onChange: Ct,
+        onKeyDown: He,
+        size: e ? "large" : H,
+        rounded: Te,
         fillMode: fe,
         renderListFilterWrapper: !0,
-        placeholder: qe.toLanguageString(
-          lt,
-          at[lt]
+        placeholder: be.toLanguageString(
+          ct,
+          Me[ct]
         )
       }
     );
-  }, Dt = (e) => {
+  }, kt = (e) => {
     var o;
     const r = t.current.initState();
-    r.syntheticEvent = e, (o = t == null ? void 0 : t.current) == null || o.togglePopup(r), V(n.defaultItem, r), M(r);
-  }, St = () => {
+    r.syntheticEvent = e, (o = t == null ? void 0 : t.current) == null || o.togglePopup(r), A(n.defaultItem, r), M(r);
+  }, Et = () => {
     const { textField: e, defaultItem: r, dataItemKey: o } = n, l = k();
     return r !== void 0 && /* @__PURE__ */ i.createElement(
-      gn,
+      yn,
       {
         defaultItem: r,
         textField: e,
         selected: F(l, r, o),
         key: "defaultitemkey",
-        onClick: Dt
+        onClick: kt
       }
     );
-  }, Ct = (e, r) => {
+  }, Lt = (e, r) => {
     var o;
-    (o = t == null ? void 0 : t.current) == null || o.handleItemClick(e, r), A.current = void 0;
-  }, kt = (e) => {
+    (o = t == null ? void 0 : t.current) == null || o.handleItemClick(e, r), W.current = void 0;
+  }, bt = (e) => {
     const { vs: r, list: o } = t.current;
     r.scrollHandler(e);
     const { groupField: l } = n;
     let a = E(n);
     if (!(!l || !a.length) && l) {
-      const c = Ae.current = Ae.current || (r.enabled ? r.itemHeight : o ? o.children[0].offsetHeight : 0), f = e.target.scrollTop - r.skip * c;
+      const c = We.current = We.current || (r.enabled ? r.itemHeight : o ? o.children[0].offsetHeight : 0), f = e.target.scrollTop - r.skip * c;
       a = t.current.getGroupedDataModernMode(a, l);
       let d = a[0][l];
       for (let g = 1; g < a.length && !(c * g > f); g++)
         a[g] && a[g][l] && (d = a[g][l]);
       d !== m.group && R({ group: d });
     }
-  }, He = () => {
+  }, Be = () => {
     var s;
     const {
       textField: e,
@@ -281,56 +282,57 @@ const kn = "Please select a value from the list!", Me = i.forwardRef((ct, ut) =>
       groupHeaderItemRender: l,
       listNoDataRender: a,
       itemRender: c
-    } = n, p = E(n), f = K && K.uDropDownList, d = t.current.vs, g = o.skip, u = n.opened !== void 0 ? n.opened : m.opened, S = t.current.getPopupSettings(), v = `translateY(${d.translate}px)`, I = k();
+    } = n, p = E(n), f = K && K.uDropDownList, d = t.current.vs, g = o.skip, u = n.opened !== void 0 ? n.opened : m.opened, D = t.current.getPopupSettings(), v = `translateY(${d.translate}px)`, I = k();
     return /* @__PURE__ */ i.createElement(
-      vn,
+      wn,
       {
-        id: be,
+        id: Ge,
         show: u,
         data: p.slice(),
         focusedIndex: we(),
         value: I,
         textField: e,
         valueField: r,
-        optionsGuid: Ge,
+        optionsGuid: $e,
         groupField: n.groupField,
+        ariaLabel: be.toLanguageString(ut, Me[ut]),
         listRef: (N) => {
           d.list = t.current.list = N;
         },
-        wrapperStyle: { maxHeight: _ ? void 0 : S.height },
+        wrapperStyle: { maxHeight: _ ? void 0 : D.height },
         wrapperCssClass: L(P.listContent({ c: f })),
         listStyle: d.enabled ? { transform: v } : void 0,
         key: "listkey",
         skip: g,
-        onClick: Ct,
+        onClick: Lt,
         itemRender: c,
         groupHeaderItemRender: l,
         noDataRender: a,
-        onScroll: kt,
+        onScroll: bt,
         wrapperRef: d.scrollerRef,
         scroller: (s = t == null ? void 0 : t.current) == null ? void 0 : s.renderScrollElement(),
         ariaSetSize: o.total
       }
     );
-  }, Et = () => {
+  }, Pt = () => {
     const { groupField: e } = n, r = E(n), o = n.opened !== void 0 ? n.opened : m.opened, l = K && K.uDropDownList, a = {
       title: n.adaptiveTitle || n.label,
       subTitle: n.adaptiveSubtitle,
       expand: o,
-      onClose: (p) => De(p),
+      onClose: (p) => Se(p),
       windowWidth: Le,
-      mobileFilter: Ve(!0)
+      mobileFilter: Ae(!0)
     };
     let { group: c } = m;
-    return c === void 0 && e !== void 0 && (c = ne(r[0], e)), /* @__PURE__ */ i.createElement(Cn, { ...a }, /* @__PURE__ */ i.createElement(Sn, null, /* @__PURE__ */ i.createElement("div", { className: L(P.listContainer({ c: l, popup: !1 })) }, Ft())));
-  }, Lt = () => {
+    return c === void 0 && e !== void 0 && (c = re(r[0], e)), /* @__PURE__ */ i.createElement(bn, { ...a }, /* @__PURE__ */ i.createElement(Ln, null, /* @__PURE__ */ i.createElement("div", { className: L(P.listContainer({ c: l, popup: !1 })) }, Nt())));
+  }, Ft = () => {
     m.focused && window.setTimeout(() => {
-      m.focused && t.current.wrapper && re(t.current.wrapper);
+      m.focused && t.current.wrapper && oe(t.current.wrapper);
     });
-  }, bt = (e) => {
+  }, Mt = (e) => {
     "onMouseDownOutside" in (n.popupSettings || {}) && n.popupSettings.onMouseDownOutside.call(void 0, e);
-  }, Pt = () => {
-    const { header: e, footer: r, dir: o, groupField: l, groupStickyHeaderItemRender: a, list: c } = n, p = E(n), f = t.current, d = f.getPopupSettings(), g = n.opened !== void 0 ? n.opened : m.opened, u = d.width !== void 0 ? d.width : f.popupWidth, S = K && K.uDropDownList, v = {
+  }, Kt = () => {
+    const { header: e, footer: r, dir: o, groupField: l, groupStickyHeaderItemRender: a, list: c } = n, p = E(n), f = t.current, d = f.getPopupSettings(), g = n.opened !== void 0 ? n.opened : m.opened, u = d.width !== void 0 ? d.width : f.popupWidth, D = K && K.uDropDownList, v = {
       dir: o !== void 0 ? o : f.dirCalculated,
       width: u,
       popupSettings: {
@@ -338,60 +340,60 @@ const kn = "Please select a value from the list!", Me = i.forwardRef((ct, ut) =>
         popupClass: L(
           d.popupClass,
           P.listContainer({
-            c: S,
+            c: D,
             popup: !0
           })
         ),
-        anchor: d.anchor || B.current,
+        anchor: d.anchor || V.current,
         show: g,
         onOpen: ye,
-        onClose: Lt,
-        onMouseDownOutside: bt
+        onClose: Ft,
+        onMouseDownOutside: Mt
       },
       itemsCount: [p.length]
     };
     let { group: I } = m;
-    return I === void 0 && l !== void 0 && (I = ne(p[0], l)), /* @__PURE__ */ i.createElement(mn, { ...v }, Ve(!1), e && /* @__PURE__ */ i.createElement("div", { className: L(P.listHeader({ c: S })) }, e), /* @__PURE__ */ i.createElement(
+    return I === void 0 && l !== void 0 && (I = re(p[0], l)), /* @__PURE__ */ i.createElement(hn, { ...v }, Ae(!1), e && /* @__PURE__ */ i.createElement("div", { className: L(P.listHeader({ c: D })) }, e), /* @__PURE__ */ i.createElement(
       "div",
       {
         className: L(
           P.list({
-            c: S,
-            size: z,
+            c: D,
+            size: H,
             virtual: t.current.vs.enabled
           })
         )
       },
-      St(),
-      !c && I && p.length !== 0 && /* @__PURE__ */ i.createElement(nt, { group: I, render: a }),
-      He()
-    ), r && /* @__PURE__ */ i.createElement("div", { className: L(P.listFooter({ c: S })) }, r), Ke && /* @__PURE__ */ i.createElement(ln, { message: pt }));
-  }, Ft = () => {
+      Et(),
+      !c && I && p.length !== 0 && /* @__PURE__ */ i.createElement(it, { group: I, render: a }),
+      Be()
+    ), r && /* @__PURE__ */ i.createElement("div", { className: L(P.listFooter({ c: D })) }, r), Ne && /* @__PURE__ */ i.createElement(pn, { message: gt }));
+  }, Nt = () => {
     const { header: e, footer: r, groupStickyHeaderItemRender: o, groupField: l, list: a } = n, c = E(n), p = K && K.uDropDownList;
     let { group: f } = m;
-    return f === void 0 && l !== void 0 && (f = ne(c[0], l)), /* @__PURE__ */ i.createElement(i.Fragment, null, e && /* @__PURE__ */ i.createElement("div", { className: L(P.listHeader({ c: p })) }, e), /* @__PURE__ */ i.createElement(
+    return f === void 0 && l !== void 0 && (f = re(c[0], l)), /* @__PURE__ */ i.createElement(i.Fragment, null, e && /* @__PURE__ */ i.createElement("div", { className: L(P.listHeader({ c: p })) }, e), /* @__PURE__ */ i.createElement(
       "div",
       {
         className: L("k-list", {
-          [`k-list-${_ ? "lg" : dn[z] || z}`]: _ || z
+          [`k-list-${_ ? "lg" : mn[H] || H}`]: _ || H
         })
       },
-      !a && f && c.length !== 0 && /* @__PURE__ */ i.createElement(nt, { group: f, render: o }),
-      He()
+      !a && f && c.length !== 0 && /* @__PURE__ */ i.createElement(it, { group: f, render: o }),
+      Be()
     ), r && /* @__PURE__ */ i.createElement("div", { className: "k-list-footer" }, r));
-  }, Mt = (e) => {
+  }, Tt = (e) => {
     const { dataItemKey: r } = n, o = E(n), l = k();
     let a = o.map((b, Y) => ({ item: b, itemIndex: Y }));
-    const c = $.current.word, p = $.current.last, f = yn(c, p);
+    const c = $.current.word, p = $.current.last, f = Dn(c, p);
     let d = a.length, g = Math.max(
       0,
       o.findIndex((b) => F(b, l, r))
     ), u;
-    n.defaultItem && (u = { item: n.defaultItem, itemIndex: -1 }, d += 1, g += 1), g += f ? 1 : 0, a = wn(a, g, u);
-    let S, v, I, s = 0;
+    n.defaultItem && (u = { item: n.defaultItem, itemIndex: -1 }, d += 1, g += 1), g += f ? 1 : 0, a = Cn(a, g, u);
+    let D, v, I, s = 0;
     const { textField: N } = n;
     for (; s < d; ) {
-      if (S = ne(a[s].item, N), v = f && ot(S, p, J), I = ot(S, c, J), v || I) {
+      if (D = re(a[s].item, N), v = f && at(D, p, J), I = at(D, c, J), v || I) {
         s = a[s].itemIndex;
         break;
       }
@@ -399,37 +401,37 @@ const kn = "Please select a value from the list!", Me = i.forwardRef((ct, ut) =>
     }
     if (s !== d) {
       const b = t.current.initState();
-      b.syntheticEvent = e, Q(s, b), M(b), A.current = void 0;
+      b.syntheticEvent = e, Q(s, b), M(b), W.current = void 0;
     }
-  }, Kt = (e) => {
-    clearTimeout(Be.current), n.filterable || (Be.current = window.setTimeout(() => $.current.word = "", mt), Mt(e));
-  }, Nt = (e) => {
-    oe.current || t.current.handleFocus(e);
-  }, Tt = (e) => {
-    if (oe.current || !m.focused)
+  }, Ot = (e) => {
+    clearTimeout(Ve.current), n.filterable || (Ve.current = window.setTimeout(() => $.current.word = "", vt), Tt(e));
+  }, zt = (e) => {
+    ie.current || t.current.handleFocus(e);
+  }, Ht = (e) => {
+    if (ie.current || !m.focused)
       return;
     const r = n.opened !== void 0 ? n.opened : m.opened, o = t.current.initState();
     o.syntheticEvent = e, o.data.focused = !1, o.events.push({ type: "onBlur" }), r && xe(), r && !_ && t.current.togglePopup(o), M(o);
-  }, Ot = (e) => {
+  }, At = (e) => {
     if (n.filterable || e.which === 0 || e.keyCode === h.enter)
       return;
     let r = String.fromCharCode(e.charCode || e.keyCode);
     J && (r = r.toLowerCase()), r === " " && e.preventDefault(), $.current = {
       word: $.current.word + r,
       last: $.current.last + r
-    }, Kt(e);
-  }, zt = () => {
+    }, Ot(e);
+  }, Bt = () => {
     const e = t.current.initState();
     e.data.opened = m.opened, t.current.togglePopup(e), M(e);
-  }, Se = i.useRef(null), B = i.useRef(null), Ce = i.useRef(null), X = i.useRef(null);
+  }, De = i.useRef(null), V = i.useRef(null), Ce = i.useRef(null), X = i.useRef(null);
   i.useImperativeHandle(
-    Se,
+    De,
     () => ({
       get element() {
-        return B.current;
+        return V.current;
       },
       get index() {
-        return vt();
+        return yt();
       },
       get name() {
         return n.name;
@@ -446,16 +448,16 @@ const kn = "Please select a value from the list!", Me = i.forwardRef((ct, ut) =>
       get opened() {
         return m.opened;
       },
-      focus: gt,
+      focus: It,
       props: n,
-      togglePopup: zt
+      togglePopup: Bt
     })
   ), i.useImperativeHandle(
-    ut,
-    () => Se.current
-  ), tn("dropdownlist", Se, n, n.webMcp);
-  const Be = i.useRef(null), $ = i.useRef({ word: "", last: "" }), oe = i.useRef(!1), A = i.useRef(null), W = i.useRef(!1), ke = i.useRef(!1), q = i.useRef({}), Ee = i.useRef({}), t = i.useRef(
-    new dt({
+    ft,
+    () => De.current
+  ), sn("dropdownlist", De, n, n.webMcp);
+  const Ve = i.useRef(null), $ = i.useRef({ word: "", last: "" }), ie = i.useRef(!1), W = i.useRef(null), q = i.useRef(!1), ke = i.useRef(!1), U = i.useRef({}), Ee = i.useRef({}), t = i.useRef(
+    new pt({
       props: n,
       setState: () => {
       },
@@ -467,23 +469,23 @@ const kn = "Please select a value from the list!", Me = i.forwardRef((ct, ut) =>
       handleItemSelect: () => {
       }
     })
-  ), Ae = i.useRef(0), Z = i.useRef(null), [m, Vt] = i.useState({}), [Le, Ht] = i.useState(), [, We] = i.useReducer((e) => e, !0), qe = Dn(), Ue = n.name || n.id, Bt = i.useCallback(
+  ), We = i.useRef(0), Z = i.useRef(null), [m, Vt] = i.useState({}), [Le, Wt] = i.useState(), [, qe] = i.useReducer((e) => e, !0), be = En(), Ue = n.name || n.id, qt = i.useCallback(
     (e) => {
       if (e == null || !t.current)
         return;
-      const r = E(n), { textField: o } = n, l = String(e), a = hn(r, l, o, !1, J), c = a !== -1 ? r[a] : void 0;
+      const r = E(n), { textField: o } = n, l = String(e), a = xn(r, l, o, !1, J), c = a !== -1 ? r[a] : void 0;
       if (c !== void 0) {
         const p = t.current.initState();
         p.syntheticEvent = {
-          target: B.current
-        }, V(c, p), M(p);
+          target: V.current
+        }, A(c, p), M(p);
       }
     },
     [n, J]
   );
-  nn(B, {
+  an(V, {
     fieldName: Ue,
-    onValueChange: Bt,
+    onValueChange: qt,
     enabled: !!Ue
   });
   const R = (e) => {
@@ -494,135 +496,134 @@ const kn = "Please select a value from the list!", Me = i.forwardRef((ct, ut) =>
       props: n,
       setState: R,
       state: m,
-      forceUpdate: We,
-      element: B.current,
+      forceUpdate: qe,
+      element: V.current,
       handleItemSelect: Q,
       value: k()
     });
-  }, [R, m, We, Q, k]), i.useEffect(() => {
-    var g, u, S, v, I, s, N, b, Y, te, ce, ue, y;
-    const { dataItemKey: e, virtual: r, groupField: o = "", textField: l } = n, a = E(n), c = q.current.virtual ? q.current.virtual.total : 0, p = n.opened !== void 0 ? n.opened : m.opened, f = q.current.opened !== void 0 ? q.current.opened : Ee.current.opened, d = !f && p;
+  }, [R, m, qe, Q, k]), i.useEffect(() => {
+    var g, u, D, v, I, s, N, b, Y, ne, ce, ue, y;
+    const { dataItemKey: e, virtual: r, groupField: o = "", textField: l } = n, a = E(n), c = U.current.virtual ? U.current.virtual.total : 0, p = n.opened !== void 0 ? n.opened : m.opened, f = U.current.opened !== void 0 ? U.current.opened : Ee.current.opened, d = !f && p;
     if ((g = t == null ? void 0 : t.current) == null || g.didUpdate(), (u = t == null ? void 0 : t.current) != null && u.getPopupSettings().animate || d && ye(), r && r.total !== c)
-      (S = t == null ? void 0 : t.current) == null || S.vs.calcScrollElementHeight(), (v = t == null ? void 0 : t.current) == null || v.vs.reset();
+      (D = t == null ? void 0 : t.current) == null || D.vs.calcScrollElementHeight(), (v = t == null ? void 0 : t.current) == null || v.vs.reset();
     else {
-      const T = k(), pe = q.current.value !== void 0 ? q.current.value : Ee.current.value;
-      let G = a.findIndex((j) => F(j, T, e));
-      o !== "" && T && l && (G = (s = (I = t == null ? void 0 : t.current) == null ? void 0 : I.getGroupedDataModernMode(a, o)) == null ? void 0 : s.map((j) => j[l]).indexOf(T[l]));
-      const me = !F(pe, T, e);
+      const O = k(), pe = U.current.value !== void 0 ? U.current.value : Ee.current.value;
+      let G = a.findIndex((j) => F(j, O, e));
+      o !== "" && O && l && (G = (s = (I = t == null ? void 0 : t.current) == null ? void 0 : I.getGroupedDataModernMode(a, o)) == null ? void 0 : s.map((j) => j[l]).indexOf(O[l]));
+      const me = !F(pe, O, e);
       d && r ? (N = t == null ? void 0 : t.current) == null || N.scrollToVirtualItem(r, G) : d && !r ? (ye(), a && a.length !== 0 && ((b = t == null ? void 0 : t.current) == null || b.resetGroupStickyHeader(a[0][o], {
         setState: R,
         group: m.group,
         state: m
-      })), (Y = t == null ? void 0 : t.current) == null || Y.scrollToItem(G)) : p && f && T && me && !W.current ? (ce = t == null ? void 0 : t.current) == null || ce.scrollToItem(G, (te = t == null ? void 0 : t.current) == null ? void 0 : te.vs.enabled) : p && f && W.current && (W.current && r && r.skip === 0 ? (ue = t == null ? void 0 : t.current) == null || ue.vs.reset() : W.current && r && r.skip === r.total - r.pageSize && ((y = t == null ? void 0 : t.current) == null || y.vs.scrollToEnd()));
+      })), (Y = t == null ? void 0 : t.current) == null || Y.scrollToItem(G)) : p && f && O && me && !q.current ? (ce = t == null ? void 0 : t.current) == null || ce.scrollToItem(G, (ne = t == null ? void 0 : t.current) == null ? void 0 : ne.vs.enabled) : p && f && q.current && (q.current && r && r.skip === 0 ? (ue = t == null ? void 0 : t.current) == null || ue.vs.reset() : q.current && r && r.skip === r.total - r.pageSize && ((y = t == null ? void 0 : t.current) == null || y.vs.scrollToEnd()));
     }
-    W.current = !1, Ee.current = m, q.current = n, Te();
+    q.current = !1, Ee.current = m, U.current = n, Oe();
   }), i.useEffect(() => {
     var e, r;
-    return Z.current = tt && window.ResizeObserver && new window.ResizeObserver(It.bind(void 0)), (e = t == null ? void 0 : t.current) == null || e.didMount(), Te(), (r = ve()) != null && r.body && Z.current && Z.current.observe(ve().body), () => {
+    return Z.current = ot && window.ResizeObserver && new window.ResizeObserver(xt.bind(void 0)), (e = t == null ? void 0 : t.current) == null || e.didMount(), Oe(), (r = ve()) != null && r.body && Z.current && Z.current.observe(ve().body), () => {
       var o;
       (o = ve()) != null && o.body && Z.current && Z.current.disconnect();
     };
   }, []);
-  const _e = ge + "-accessibility-id", be = ge + "-listbox-id", Ge = ge + "-guid", At = qe.toLanguageString(
-    st,
-    at[st]
+  const _e = ge + "-accessibility-id", Ge = ge + "-listbox-id", $e = ge + "-guid", Ut = be.toLanguageString(
+    dt,
+    Me[dt]
   ), {
-    style: ie,
-    className: Wt,
+    style: se,
+    className: _t,
     label: Pe,
-    dir: qt,
-    virtual: U,
-    adaptive: Ln,
-    dataItemKey: Ut,
-    disabled: se,
-    loading: $e,
-    iconClassName: Ye,
-    svgIcon: _t,
-    valueRender: je
-  } = n, ae = n.opened !== void 0 ? n.opened : m.opened, le = k(), Fe = ne(le, n.textField), Je = !ht() || Ie().valid, de = t.current, Gt = de.vs, ee = K && K.uDropDownList;
-  Gt.enabled = U !== void 0;
-  const Qe = rn(), _ = !!(Le && Qe && Le <= Qe.medium && n.adaptive);
-  U !== void 0 && (de.vs.skip = U.skip, de.vs.total = U.total, de.vs.pageSize = U.pageSize);
-  const $t = E(n), { focused: Yt } = m, jt = $t.findIndex((e) => F(e, le, Ut)), Xe = /* @__PURE__ */ i.createElement("span", { id: _e, className: L(P.inputInner({ c: ee })) }, Fe && /* @__PURE__ */ i.createElement("span", { className: L(P.inputText({ c: ee })) }, Fe)), Jt = je !== void 0 ? je.call(void 0, Xe, le) : Xe, Ze = /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
+    dir: Gt,
+    virtual: T,
+    adaptive: Mn,
+    dataItemKey: $t,
+    disabled: ae,
+    loading: Ye,
+    iconClassName: je,
+    svgIcon: Yt,
+    valueRender: Je
+  } = n, ee = n.opened !== void 0 ? n.opened : m.opened, le = k(), Fe = re(le, n.textField), Qe = !wt() || Ie().valid, de = t.current, jt = de.vs, te = K && K.uDropDownList;
+  jt.enabled = T !== void 0;
+  const Xe = ln(), _ = !!(Le && Xe && Le <= Xe.medium && n.adaptive);
+  T !== void 0 && (de.vs.skip = T.skip, de.vs.total = T.total, de.vs.pageSize = T.pageSize);
+  const Jt = E(n), { focused: Qt } = m, Ze = Jt.findIndex((e) => F(e, le, $t)), Xt = (tt = T == null ? void 0 : T.skip) != null ? tt : 0, Zt = ee && Ze >= 0 ? `k-${$e}-item-${Ze + Xt + 1}` : void 0, Re = /* @__PURE__ */ i.createElement("span", { id: _e, className: L(P.inputInner({ c: te })) }, Fe && /* @__PURE__ */ i.createElement("span", { className: L(P.inputText({ c: te })) }, Fe)), Rt = Je !== void 0 ? Je.call(void 0, Re, le) : Re, et = /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
     "span",
     {
-      ref: yt,
+      ref: St,
       className: L(
         P.wrapper({
-          c: ee,
-          size: z,
-          rounded: Ne,
+          c: te,
+          size: H,
+          rounded: Te,
           fillMode: fe,
-          focused: Yt,
-          disabled: se,
-          invalid: !Je,
-          loading: $e,
+          focused: Qt,
+          disabled: ae,
+          invalid: !Qe,
+          loading: Ye,
           required: he()
         }),
-        Wt
+        _t
       ),
-      style: Pe ? { ...ie, width: void 0 } : ie,
-      dir: qt,
-      onMouseDown: ae ? (e) => {
-        e.target.nodeName !== "INPUT" && (re(t.current.wrapper), e.preventDefault());
+      style: Pe ? { ...se, width: void 0 } : se,
+      dir: Gt,
+      onMouseDown: ee ? (e) => {
+        e.target.nodeName !== "INPUT" && (oe(t.current.wrapper), e.preventDefault());
       } : void 0,
-      onFocus: _ ? (e) => De(e) : Nt,
-      onBlur: Tt,
-      tabIndex: on(ft, se),
+      onFocus: _ ? (e) => Se(e) : zt,
+      onBlur: Ht,
+      tabIndex: dn(ht, ae),
       accessKey: n.accessKey,
-      onKeyDown: ze,
-      onKeyPress: Ot,
-      onClick: se ? void 0 : De,
+      onKeyDown: He,
+      onKeyPress: At,
+      onClick: ae ? void 0 : Se,
       role: "combobox",
-      "aria-required": he(),
-      "aria-disabled": se || void 0,
+      "aria-required": he() || void 0,
+      "aria-disabled": ae || void 0,
       "aria-haspopup": "listbox",
-      "aria-expanded": ae || !1,
-      "aria-owns": be,
-      "aria-activedescendant": ae ? "option-" + Ge + "-" + (jt + (U ? U.skip : 0)) : void 0,
+      "aria-expanded": ee || !1,
+      "aria-activedescendant": Zt,
       "aria-label": n.ariaLabel || n.label,
       "aria-labelledby": n.ariaLabelledBy,
-      "aria-describedby": n.ariaDescribedBy || _e,
-      "aria-controls": ae ? be : void 0,
+      "aria-describedby": n.ariaDescribedBy || (ee ? _e : void 0),
+      "aria-controls": ee ? Ge : void 0,
       id: n.id,
       title: n.title
     },
-    Jt,
-    $e && /* @__PURE__ */ i.createElement(sn, { className: L(P.loadingIcon({ c: ee })), name: "loading" }),
+    Rt,
+    Ye && /* @__PURE__ */ i.createElement(cn, { className: L(P.loadingIcon({ c: te })), name: "loading" }),
     /* @__PURE__ */ i.createElement(
-      xn,
+      kn,
       {
         tabIndex: -1,
         type: "button",
-        "aria-label": At,
-        size: z,
+        "aria-label": Ut,
+        size: H,
         fillMode: fe,
-        className: L(P.inputButton({ c: ee })),
-        iconClass: Ye,
-        svgIcon: Ye ? void 0 : _t || pn,
+        className: L(P.inputButton({ c: te })),
+        iconClass: je,
+        svgIcon: je ? void 0 : Yt || vn,
         onMouseDown: (e) => m.focused && e.preventDefault()
       }
     ),
-    wt(le),
-    !_ && Pt()
-  ), _ && Et());
+    Dt(le),
+    !_ && Kt()
+  ), _ && Pt());
   return Pe ? /* @__PURE__ */ i.createElement(
-    un,
+    gn,
     {
       label: Pe,
       editorValue: Fe,
-      editorValid: Je,
+      editorValid: Qe,
       editorDisabled: n.disabled,
-      style: { width: ie ? ie.width : void 0 },
-      children: Ze
+      style: { width: se ? se.width : void 0 },
+      children: et
     }
-  ) : Ze;
+  ) : et;
 });
-Me.propTypes = {
+Ke.propTypes = {
   delay: C.number,
   ignoreCase: C.bool,
   iconClassName: C.string,
-  svgIcon: cn,
+  svgIcon: fn,
   defaultItem: C.any,
   valueRender: C.func,
   valueMap: C.func,
@@ -638,21 +639,21 @@ Me.propTypes = {
   list: C.any,
   skipDisabledItems: C.bool
 };
-const O = {
+const z = {
   delay: 500,
   tabIndex: 0,
   ignoreCase: !0,
-  ...dt.defaultProps,
+  ...pt.defaultProps,
   required: !1,
   size: void 0,
   rounded: void 0,
   fillMode: void 0
 };
-Me.displayName = "KendoReactDropDownList";
-const En = an();
-Me.displayName = "KendoReactDropDownList";
+Ke.displayName = "KendoReactDropDownList";
+const Fn = un();
+Ke.displayName = "KendoReactDropDownList";
 export {
-  Me as DropDownList,
-  En as DropDownListPropsContext,
-  O as dropDownListDefaultProps
+  Ke as DropDownList,
+  Fn as DropDownListPropsContext,
+  z as dropDownListDefaultProps
 };