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

package/DropDownList/DropDownList.mjs

@@ -7,50 +7,50 @@
  */
 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, useKendoPaste as tn, canUseDOM as tt, useAdaptiveModeContext as nn, classNames as L, uDropDownList as P, getTabIndex as rn, IconWrap as on, createPropsContext as sn, Keys as h, WatermarkOverlay as an, sizeMap as ln, svgIconPropType as dn } from "@progress/kendo-react-common";
-import { FloatingLabel as cn } from "@progress/kendo-react-labels";
-import { chevronDownIcon as un } from "@progress/kendo-svg-icons";
-import pn from "../common/ListContainer.mjs";
-import mn from "../common/ListFilter.mjs";
+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 fn from "../common/ListDefaultItem.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 gn, areSame as F, getItemValue as ne, isPresent as rt, itemIndexStartsWith as hn, sameCharsOnly as In, shuffleData as yn, matchText as ot } from "../common/utils.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 wn } from "@progress/kendo-react-buttons";
-import { useLocalization as xn } from "@progress/kendo-react-intl";
+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 Dn } from "@progress/kendo-react-layout";
-import { AdaptiveMode as Sn } from "../common/AdaptiveMode.mjs";
-const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) => {
-  let Me = !1;
-  const pt = Qt(it), n = Xt(kn, ct), {
+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: Ke = O.rounded,
+    rounded: Ne = O.rounded,
     fillMode: fe = O.fillMode
   } = n;
   if (n.filterable || n.virtual) {
     const e = [];
-    n.filterable && e.push("filterable"), n.virtual && e.push("virtualization"), Me = !Zt(it, {
+    n.filterable && e.push("filterable"), n.virtual && e.push("virtualization"), Ke = !Zt(it, {
       component: "DropDownList",
       features: e
     });
   }
-  const K = Rt(), ve = en(n.id), ge = () => {
+  const K = Rt(), ge = en(n.id), ve = () => {
     var e;
     if (tt)
       return ((e = B.current) == null ? void 0 : e.ownerDocument) || window.document;
-  }, vt = () => {
+  }, gt = () => {
     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;
-  }, gt = () => {
+  }, vt = () => {
     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 = () => {
@@ -69,10 +69,10 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
   }, It = i.useCallback((e) => {
     for (const r of e)
       Ht(r.target.clientWidth);
-  }, []), Ne = () => {
+  }, []), Te = () => {
     var e;
-    (e = Se.current) != null && e.setCustomValidity && Se.current.setCustomValidity(
-      Ie().valid ? "" : n.validationMessage || Cn
+    (e = Ce.current) != null && e.setCustomValidity && Ce.current.setCustomValidity(
+      Ie().valid ? "" : n.validationMessage || kn
     );
   }, V = (e, r) => {
     const o = k();
@@ -82,12 +82,12 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
     (r = t == null ? void 0 : t.current) == null || r.applyState(e), A.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], v = !F(d, f, l);
-    V(d, r), v && ((u = t == null ? void 0 : t.current) == null || u.triggerPageChangeCornerItems(d, r));
+    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, g;
-    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, v = f.findIndex((I) => F(I, p, a)), u = (g = t == null ? void 0 : t.current) == null ? void 0 : g.navigation.navigate({
-      current: c.skip + v,
+    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({
+      current: c.skip + g,
       max: (d != null && d.enabled ? c.total : f.length) - 1,
       min: l !== void 0 ? -1 : 0,
       keyCode: r,
@@ -101,7 +101,7 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
     {
       name: n.name,
       ref: (r) => {
-        Se.current = r;
+        Ce.current = r;
       },
       tabIndex: -1,
       "aria-hidden": !0,
@@ -114,20 +114,20 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
       textField: e,
       dataItemKey: r,
       virtual: o = { skip: 0 },
-      focusedItemIndex: l = hn,
+      focusedItemIndex: l = In,
       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((v) => !v.disabled) : rt(p) && d === void 0 || a && d === "" ? f.findIndex((v) => F(v, p, r)) : d ? Ce.current ? l(f, d, e) : f.findIndex((v) => F(v, p, r)) : o.skip === 0 ? 0 : -1;
-  }, Te = (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) : 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 = () => {
     const e = E(n), r = t.current.initState(), o = we();
-    Te(e, o) && (V(null, r), M(r));
+    Oe(e, o) && (V(null, r), M(r));
   }, De = (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);
-  }, Oe = (e) => {
+  }, ze = (e) => {
     var T, pe, G, me, j, Re, et;
     e && e.target instanceof Element && e.target.nodeName === "INPUT" && e.stopPropagation && e.stopPropagation();
     const {
@@ -139,8 +139,8 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
       dataItemKey: p,
       groupField: f = "",
       textField: d,
-      skipDisabledItems: v = !0
-    } = n, u = E(n), S = k(), g = 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();
+      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();
     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(
@@ -154,26 +154,26 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
         e.preventDefault(), (j = t == null ? void 0 : t.current) == null || j.scrollPopupByPageSize(1);
       else if (I && s === h.enter) {
         const w = we();
-        Te(u, w) ? (V(null, y), M(y)) : Q(w, y), (Re = t == null ? void 0 : t.current) == null || Re.togglePopup(y), e.preventDefault();
+        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();
       else if (ue) {
-        if (Ce.current = !1, f !== "" && d)
-          if (!v && I)
+        if (ke.current = !1, f !== "" && d)
+          if (!g && I)
             H(y, s);
           else {
             let w;
             if (s === h.down || s === h.right) {
-              const x = u.slice(g + 1).find((D) => !D.disabled);
+              const x = u.slice(v + 1).find((D) => !D.disabled);
               w = x && u.indexOf(x);
             } else if (s === h.up || s === h.left) {
               let x;
-              if (g === 0 && l)
+              if (v === 0 && l)
                 w = -1;
-              else if (g === -1)
+              else if (v === -1)
                 x = u, w = u.findIndex((D) => !D.disabled);
               else {
-                x = u.slice(0, g);
+                x = u.slice(0, v);
                 let D = x.pop();
                 for (; D && D.disabled; )
                   D = x.pop();
@@ -181,25 +181,25 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
               }
             }
             if (w !== void 0) {
-              const x = w - g;
+              const x = w - v;
               H(y, s, x);
-            } else w === void 0 && g === u.length - 1 && H(y, s);
+            } else w === void 0 && v === u.length - 1 && H(y, s);
           }
-        else if (!v && I || N)
+        else if (!g && I || N)
           H(y, s);
         else if (d) {
           let w;
           if (s === h.down || s === h.right) {
-            const x = u.slice(g + 1).find((D) => !D.disabled);
+            const x = u.slice(v + 1).find((D) => !D.disabled);
             w = x && u.indexOf(x);
           } else if (s === h.up || s === h.left) {
             let x;
-            if (g === 0 && l)
+            if (v === 0 && l)
               w = -1;
-            else if (g === -1)
+            else if (v === -1)
               x = u, w = u.findIndex((D) => !D.disabled);
             else {
-              x = u.slice(0, g);
+              x = u.slice(0, v);
               let D = x.pop();
               for (; D && D.disabled; )
                 D = x.pop();
@@ -207,9 +207,9 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
             }
           }
           if (w !== void 0) {
-            const x = w - g;
+            const x = w - v;
             H(y, s, x);
-          } else w === void 0 && g === u.length - 1 && H(y, s);
+          } else w === void 0 && v === u.length - 1 && H(y, s);
         } else
           H(y, s);
         e.preventDefault();
@@ -218,20 +218,20 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
     }
   }, xt = (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), Ce.current = !0, M(r), R({ group: void 0, text: String(e.target.value) });
-  }, ze = (e) => {
+    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) => {
     const r = n.filter !== void 0 ? n.filter : m.text;
     return n.filterable && /* @__PURE__ */ i.createElement(
-      mn,
+      fn,
       {
         value: r,
         ref: (o) => {
           X.current = o && o.element;
         },
         onChange: xt,
-        onKeyDown: Oe,
+        onKeyDown: ze,
         size: e ? "large" : z,
-        rounded: Ke,
+        rounded: Ne,
         fillMode: fe,
         renderListFilterWrapper: !0,
         placeholder: qe.toLanguageString(
@@ -247,7 +247,7 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
   }, St = () => {
     const { textField: e, defaultItem: r, dataItemKey: o } = n, l = k();
     return r !== void 0 && /* @__PURE__ */ i.createElement(
-      fn,
+      gn,
       {
         defaultItem: r,
         textField: e,
@@ -268,11 +268,11 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
       const c = Ae.current = Ae.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 v = 1; v < a.length && !(c * v > f); v++)
-        a[v] && a[v][l] && (d = a[v][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 });
     }
-  }, Ve = () => {
+  }, He = () => {
     var s;
     const {
       textField: e,
@@ -281,11 +281,11 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
       groupHeaderItemRender: l,
       listNoDataRender: a,
       itemRender: c
-    } = n, p = E(n), f = K && K.uDropDownList, d = t.current.vs, v = o.skip, u = n.opened !== void 0 ? n.opened : m.opened, S = t.current.getPopupSettings(), g = `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, S = t.current.getPopupSettings(), v = `translateY(${d.translate}px)`, I = k();
     return /* @__PURE__ */ i.createElement(
       vn,
       {
-        id: Le,
+        id: be,
         show: u,
         data: p.slice(),
         focusedIndex: we(),
@@ -299,9 +299,9 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
         },
         wrapperStyle: { maxHeight: _ ? void 0 : S.height },
         wrapperCssClass: L(P.listContent({ c: f })),
-        listStyle: d.enabled ? { transform: g } : void 0,
+        listStyle: d.enabled ? { transform: v } : void 0,
         key: "listkey",
-        skip: v,
+        skip: g,
         onClick: Ct,
         itemRender: c,
         groupHeaderItemRender: l,
@@ -318,11 +318,11 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
       subTitle: n.adaptiveSubtitle,
       expand: o,
       onClose: (p) => De(p),
-      windowWidth: Ee,
-      mobileFilter: ze(!0)
+      windowWidth: Le,
+      mobileFilter: Ve(!0)
     };
     let { group: c } = m;
-    return c === void 0 && e !== void 0 && (c = ne(r[0], e)), /* @__PURE__ */ i.createElement(Sn, { ...a }, /* @__PURE__ */ i.createElement(Dn, null, /* @__PURE__ */ i.createElement("div", { className: L(P.listContainer({ c: l, popup: !1 })) }, Ft())));
+    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 = () => {
     m.focused && window.setTimeout(() => {
       m.focused && t.current.wrapper && re(t.current.wrapper);
@@ -330,7 +330,7 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
   }, bt = (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(), v = n.opened !== void 0 ? n.opened : m.opened, u = d.width !== void 0 ? d.width : f.popupWidth, S = K && K.uDropDownList, g = {
+    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 = {
       dir: o !== void 0 ? o : f.dirCalculated,
       width: u,
       popupSettings: {
@@ -343,7 +343,7 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
           })
         ),
         anchor: d.anchor || B.current,
-        show: v,
+        show: g,
         onOpen: ye,
         onClose: Lt,
         onMouseDownOutside: bt
@@ -351,7 +351,7 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
       itemsCount: [p.length]
     };
     let { group: I } = m;
-    return I === void 0 && l !== void 0 && (I = ne(p[0], l)), /* @__PURE__ */ i.createElement(pn, { ...g }, ze(!1), e && /* @__PURE__ */ i.createElement("div", { className: L(P.listHeader({ c: S })) }, e), /* @__PURE__ */ i.createElement(
+    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(
       "div",
       {
         className: L(
@@ -364,8 +364,8 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
       },
       St(),
       !c && I && p.length !== 0 && /* @__PURE__ */ i.createElement(nt, { group: I, render: a }),
-      Ve()
-    ), r && /* @__PURE__ */ i.createElement("div", { className: L(P.listFooter({ c: S })) }, r), Me && /* @__PURE__ */ i.createElement(an, { message: pt }));
+      He()
+    ), r && /* @__PURE__ */ i.createElement("div", { className: L(P.listFooter({ c: S })) }, r), Ke && /* @__PURE__ */ i.createElement(ln, { message: pt }));
   }, Ft = () => {
     const { header: e, footer: r, groupStickyHeaderItemRender: o, groupField: l, list: a } = n, c = E(n), p = K && K.uDropDownList;
     let { group: f } = m;
@@ -373,25 +373,25 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
       "div",
       {
         className: L("k-list", {
-          [`k-list-${_ ? "lg" : ln[z] || z}`]: _ || z
+          [`k-list-${_ ? "lg" : dn[z] || z}`]: _ || z
         })
       },
       !a && f && c.length !== 0 && /* @__PURE__ */ i.createElement(nt, { group: f, render: o }),
-      Ve()
+      He()
     ), r && /* @__PURE__ */ i.createElement("div", { className: "k-list-footer" }, r));
   }, Mt = (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 = In(c, p);
-    let d = a.length, v = Math.max(
+    const c = $.current.word, p = $.current.last, f = yn(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, v += 1), v += f ? 1 : 0, a = yn(a, v, u);
-    let S, g, I, s = 0;
+    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;
     const { textField: N } = n;
     for (; s < d; ) {
-      if (S = ne(a[s].item, N), g = f && ot(S, p, J), I = ot(S, c, J), g || I) {
+      if (S = ne(a[s].item, N), v = f && ot(S, p, J), I = ot(S, c, J), v || I) {
         s = a[s].itemIndex;
         break;
       }
@@ -421,15 +421,15 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
   }, zt = () => {
     const e = t.current.initState();
     e.data.opened = m.opened, t.current.togglePopup(e), M(e);
-  }, He = i.useRef(null), B = i.useRef(null), Se = i.useRef(null), X = i.useRef(null);
+  }, Se = i.useRef(null), B = i.useRef(null), Ce = i.useRef(null), X = i.useRef(null);
   i.useImperativeHandle(
-    He,
+    Se,
     () => ({
       get element() {
         return B.current;
       },
       get index() {
-        return gt();
+        return vt();
       },
       get name() {
         return n.name;
@@ -446,15 +446,15 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
       get opened() {
         return m.opened;
       },
-      focus: vt,
+      focus: gt,
       props: n,
       togglePopup: zt
     })
   ), i.useImperativeHandle(
     ut,
-    () => He.current
-  );
-  const Be = i.useRef(null), $ = i.useRef({ word: "", last: "" }), oe = i.useRef(!1), A = i.useRef(null), W = i.useRef(!1), Ce = i.useRef(!1), q = i.useRef({}), ke = i.useRef({}), t = i.useRef(
+    () => 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({
       props: n,
       setState: () => {
@@ -467,11 +467,11 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
       handleItemSelect: () => {
       }
     })
-  ), Ae = i.useRef(0), Z = i.useRef(null), [m, Vt] = i.useState({}), [Ee, Ht] = i.useState(), [, We] = i.useReducer((e) => e, !0), qe = xn(), Ue = n.name || n.id, Bt = i.useCallback(
+  ), 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(
     (e) => {
       if (e == null || !t.current)
         return;
-      const r = E(n), { textField: o } = n, l = String(e), a = gn(r, l, o, !1, J), c = a !== -1 ? r[a] : void 0;
+      const r = E(n), { textField: o } = n, l = String(e), a = hn(r, l, o, !1, J), c = a !== -1 ? r[a] : void 0;
       if (c !== void 0) {
         const p = t.current.initState();
         p.syntheticEvent = {
@@ -481,7 +481,7 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
     },
     [n, J]
   );
-  tn(B, {
+  nn(B, {
     fieldName: Ue,
     onValueChange: Bt,
     enabled: !!Ue
@@ -500,12 +500,12 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
       value: k()
     });
   }, [R, m, We, Q, k]), i.useEffect(() => {
-    var v, u, S, g, 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 : ke.current.opened, d = !f && p;
-    if ((v = t == null ? void 0 : t.current) == null || v.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(), (g = t == null ? void 0 : t.current) == null || g.vs.reset();
+    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;
+    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();
     else {
-      const T = k(), pe = q.current.value !== void 0 ? q.current.value : ke.current.value;
+      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);
@@ -515,35 +515,35 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
         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()));
     }
-    W.current = !1, ke.current = m, q.current = n, Ne();
+    W.current = !1, Ee.current = m, q.current = n, Te();
   }), 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(), Ne(), (r = ge()) != null && r.body && Z.current && Z.current.observe(ge().body), () => {
+    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), () => {
       var o;
-      (o = ge()) != null && o.body && Z.current && Z.current.disconnect();
+      (o = ve()) != null && o.body && Z.current && Z.current.disconnect();
     };
   }, []);
-  const _e = ve + "-accessibility-id", Le = ve + "-listbox-id", Ge = ve + "-guid", At = qe.toLanguageString(
+  const _e = ge + "-accessibility-id", be = ge + "-listbox-id", Ge = ge + "-guid", At = qe.toLanguageString(
     st,
     at[st]
   ), {
     style: ie,
     className: Wt,
-    label: be,
+    label: Pe,
     dir: qt,
     virtual: U,
-    adaptive: En,
+    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(), Pe = ne(le, n.textField), Je = !ht() || Ie().valid, de = t.current, Gt = de.vs, ee = K && K.uDropDownList;
+  } = 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 = nn(), _ = !!(Ee && Qe && Ee <= Qe.medium && n.adaptive);
+  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 })) }, Pe && /* @__PURE__ */ i.createElement("span", { className: L(P.inputText({ c: ee })) }, Pe)), Jt = je !== void 0 ? je.call(void 0, Xe, le) : Xe, Ze = /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
+  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(
     "span",
     {
       ref: yt,
@@ -551,7 +551,7 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
         P.wrapper({
           c: ee,
           size: z,
-          rounded: Ke,
+          rounded: Ne,
           fillMode: fe,
           focused: Yt,
           disabled: se,
@@ -561,16 +561,16 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
         }),
         Wt
       ),
-      style: be ? { ...ie, width: void 0 } : ie,
+      style: Pe ? { ...ie, width: void 0 } : ie,
       dir: qt,
       onMouseDown: ae ? (e) => {
         e.target.nodeName !== "INPUT" && (re(t.current.wrapper), e.preventDefault());
       } : void 0,
       onFocus: _ ? (e) => De(e) : Nt,
       onBlur: Tt,
-      tabIndex: rn(ft, se),
+      tabIndex: on(ft, se),
       accessKey: n.accessKey,
-      onKeyDown: Oe,
+      onKeyDown: ze,
       onKeyPress: Ot,
       onClick: se ? void 0 : De,
       role: "combobox",
@@ -578,19 +578,19 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
       "aria-disabled": se || void 0,
       "aria-haspopup": "listbox",
       "aria-expanded": ae || !1,
-      "aria-owns": Le,
+      "aria-owns": be,
       "aria-activedescendant": ae ? "option-" + Ge + "-" + (jt + (U ? U.skip : 0)) : void 0,
       "aria-label": n.ariaLabel || n.label,
       "aria-labelledby": n.ariaLabelledBy,
       "aria-describedby": n.ariaDescribedBy || _e,
-      "aria-controls": ae ? Le : void 0,
+      "aria-controls": ae ? be : void 0,
       id: n.id,
       title: n.title
     },
     Jt,
-    $e && /* @__PURE__ */ i.createElement(on, { className: L(P.loadingIcon({ c: ee })), name: "loading" }),
+    $e && /* @__PURE__ */ i.createElement(sn, { className: L(P.loadingIcon({ c: ee })), name: "loading" }),
     /* @__PURE__ */ i.createElement(
-      wn,
+      xn,
       {
         tabIndex: -1,
         type: "button",
@@ -599,18 +599,18 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
         fillMode: fe,
         className: L(P.inputButton({ c: ee })),
         iconClass: Ye,
-        svgIcon: Ye ? void 0 : _t || un,
+        svgIcon: Ye ? void 0 : _t || pn,
         onMouseDown: (e) => m.focused && e.preventDefault()
       }
     ),
     wt(le),
     !_ && Pt()
   ), _ && Et());
-  return be ? /* @__PURE__ */ i.createElement(
-    cn,
+  return Pe ? /* @__PURE__ */ i.createElement(
+    un,
     {
-      label: be,
-      editorValue: Pe,
+      label: Pe,
+      editorValue: Fe,
       editorValid: Je,
       editorDisabled: n.disabled,
       style: { width: ie ? ie.width : void 0 },
@@ -618,11 +618,11 @@ const Cn = "Please select a value from the list!", Fe = i.forwardRef((ct, ut) =>
     }
   ) : Ze;
 });
-Fe.propTypes = {
+Me.propTypes = {
   delay: C.number,
   ignoreCase: C.bool,
   iconClassName: C.string,
-  svgIcon: dn,
+  svgIcon: cn,
   defaultItem: C.any,
   valueRender: C.func,
   valueMap: C.func,
@@ -648,11 +648,11 @@ const O = {
   rounded: void 0,
   fillMode: void 0
 };
-Fe.displayName = "KendoReactDropDownList";
-const kn = sn();
-Fe.displayName = "KendoReactDropDownList";
+Me.displayName = "KendoReactDropDownList";
+const En = an();
+Me.displayName = "KendoReactDropDownList";
 export {
-  Fe as DropDownList,
-  kn as DropDownListPropsContext,
+  Me as DropDownList,
+  En as DropDownListPropsContext,
   O as dropDownListDefaultProps
 };

package/DropDownList/DropDownListProps.d.ts

@@ -10,7 +10,7 @@ import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settin
 import { ListGroupItemProps } from '../common/ListGroupItem.js';
 import { GroupStickyHeaderProps } from '../common/GroupStickyHeader.js';
 import { ListItemProps } from '../common/ListItem.js';
-import { DropDownsClassStructure, FormComponentProps, SVGIcon } from '@progress/kendo-react-common';
+import { DropDownsClassStructure, FormComponentProps, SVGIcon, WebMcpProps } from '@progress/kendo-react-common';
 import { DropDownListHandle } from './models/index.js';
 /**
  * Represents the object of the `filterChange` DropDownList event.
@@ -602,6 +602,11 @@ export interface DropDownListProps extends FormComponentProps {
      * ```
      */
     skipDisabledItems?: boolean;
+    /**
+     * Enables Web MCP tool registration for this component.
+     * Requires a parent `WebMcpProvider` from `@progress/kendo-react-webmcp`.
+     */
+    webMcp?: boolean | WebMcpProps;
     /**
      * @hidden
      */