@progress/kendo-react-dropdowns 7.1.0-develop.7 → 7.1.0-develop.8

package/index.mjs

@@ -5,7 +5,7 @@
 "use client";
 import * as o from "react";
 import l from "prop-types";
-import { IconWrap as ke, classNames as V, Keys as f, svgIconPropType as gs, createPropsContext as Be, withIdHOC as St, withPropsContext as wt, validatePackage as We, canUseDOM as Fe, getTabIndex as $t, kendoThemeMaps as qe, getActiveElement as ws, usePropsContext as Gt, getScrollbarWidth as Es, getter as It, setScrollbarWidth as Ds, useId as fs, useRtl as ms, noop as De, mapTree as Ts, extendDataItem as Fs } from "@progress/kendo-react-common";
+import { IconWrap as ke, classNames as B, Keys as f, svgIconPropType as gs, createPropsContext as Be, withIdHOC as St, withPropsContext as wt, validatePackage as We, canUseDOM as Fe, getTabIndex as $t, kendoThemeMaps as qe, getActiveElement as ws, usePropsContext as Gt, getScrollbarWidth as Es, getter as It, setScrollbarWidth as Ds, useId as fs, useRtl as ms, noop as De, mapTree as Ts, extendDataItem as Fs } from "@progress/kendo-react-common";
 import { FloatingLabel as $e } from "@progress/kendo-react-labels";
 import { searchIcon as Ms, caretAltDownIcon as Ut, xIcon as ot, plusIcon as Ns } from "@progress/kendo-svg-icons";
 import { Popup as jt, PopupPropsContext as Os } from "@progress/kendo-react-popup";
@@ -102,7 +102,7 @@ const G = (i) => i != null, Bs = (i, t) => {
   if (t) {
     t = t.toLowerCase();
     for (let n = 0; n < i.length; n++) {
-      const a = (B(i[n], e) || "") + "";
+      const a = (V(i[n], e) || "") + "";
       if (a && a.toLowerCase().startsWith(t)) {
         s = n;
         break;
@@ -112,8 +112,8 @@ const G = (i) => i != null, Bs = (i, t) => {
   return s;
 }, Kt = (i, t, e, s = !1) => {
   const n = (a) => s ? a : a.toLowerCase();
-  return i.findIndex((a) => e ? n(B(a, e)) === n(t) : n(t) === n(a.toString()));
-}, B = (i, t) => {
+  return i.findIndex((a) => e ? n(V(a, e)) === n(t) : n(t) === n(a.toString()));
+}, V = (i, t) => {
   if (t && G(i)) {
     const e = t.split(".");
     let s = i;
@@ -122,6 +122,11 @@ const G = (i) => i != null, Bs = (i, t) => {
     }), s;
   }
   return i;
+}, zi = (i, t, e) => {
+  if (!i)
+    return;
+  const s = i.findIndex((n) => V(n, t) === e);
+  return i[s];
 }, zs = (i = [], t = [], e) => {
   if (i === t)
     return !0;
@@ -136,7 +141,7 @@ const G = (i) => i != null, Bs = (i, t) => {
     const n = i.findIndex((a) => R(a, s, e));
     n !== -1 && i.splice(n, 1);
   });
-}, R = (i, t, e) => i === t || G(i) === G(t) && B(i, e) === B(t, e), as = (i, t, e) => {
+}, R = (i, t, e) => i === t || G(i) === G(t) && V(i, e) === V(t, e), as = (i, t, e) => {
   if (t) {
     const s = Kt(i, t, e, !0);
     return s !== -1 ? i[s] : i[Ve(i, t, e)];
@@ -147,7 +152,7 @@ const G = (i) => i != null, Bs = (i, t) => {
   if (i) {
     const n = t[Ve(t, i, e)];
     if (n) {
-      const a = B(n, e);
+      const a = V(n, e);
       i.toLowerCase() !== a.toLowerCase() && (s = a.substring(i.length));
     }
   }
@@ -168,11 +173,11 @@ class qs extends o.Component {
         onClick: this.props.onClick,
         onMouseDown: Ws,
         style: { position: "unset" },
-        className: V("k-list-optionlabel", {
+        className: B("k-list-optionlabel", {
           "k-selected": t
         })
       },
-      B(e, s) || ""
+      V(e, s) || ""
     );
   }
 }
@@ -196,7 +201,7 @@ class $s extends o.Component {
         role: "option",
         "aria-selected": t,
         "aria-disabled": p ? !0 : void 0,
-        className: V("k-list-item", {
+        className: B("k-list-item", {
           "k-selected": t,
           "k-focus": this.props.focused,
           "k-first": !!e && a === "classic",
@@ -205,7 +210,7 @@ class $s extends o.Component {
         onClick: this.handleClick,
         style: { position: n ? "relative" : "unset" }
       },
-      /* @__PURE__ */ o.createElement("span", { className: "k-list-item-text" }, B(s, this.props.textField).toString()),
+      /* @__PURE__ */ o.createElement("span", { className: "k-list-item-text" }, V(s, this.props.textField).toString()),
       e !== void 0 && a === "classic" ? /* @__PURE__ */ o.createElement("div", { className: "k-list-item-group-label" }, e) : null
     );
     return c !== void 0 ? c.call(void 0, d, this.props) : d;
@@ -262,7 +267,7 @@ class Ge extends o.Component {
     return g.map((S, D) => {
       const N = c + D, O = c + D + w, _ = S.disabled ? !1 : h && (!b && R(S, u, e) || b && u.findIndex((E) => R(E, S, e)) !== -1);
       let C, F, x;
-      return D > 0 && s !== void 0 && (F = B(S, s), x = B(g[D - 1], s), F && x && F !== x && (C = F)), C !== void 0 && n === "modern" && (w += 1), [
+      return D > 0 && s !== void 0 && (F = V(S, s), x = V(g[D - 1], s), F && x && F !== x && (C = F)), C !== void 0 && n === "modern" && (w += 1), [
         C !== void 0 && n === "modern" && /* @__PURE__ */ o.createElement(
           Gs,
           {
@@ -605,7 +610,7 @@ const Ue = {
   name: "@progress/kendo-react-dropdowns",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1705648009,
+  publishDate: 1705940158,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
 }, xt = 500, Se = 768, Js = "Please select a value from the list!", { sizeMap: Bt, roundedMap: Qs } = qe, At = class extends o.Component {
@@ -640,7 +645,7 @@ const Ue = {
         dir: s !== void 0 ? s : r.dirCalculated,
         width: g,
         popupSettings: {
-          popupClass: V(
+          popupClass: B(
             h.popupClass,
             "k-list-container",
             "k-dropdownlist-popup"
@@ -656,10 +661,10 @@ const Ue = {
         itemsCount: [n.length]
       };
       let { group: v } = this.state;
-      return v === void 0 && p !== void 0 && (v = B(n[0], p)), /* @__PURE__ */ o.createElement(Et, { ...m }, this.renderListFilter(), t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), /* @__PURE__ */ o.createElement(
+      return v === void 0 && p !== void 0 && (v = V(n[0], p)), /* @__PURE__ */ o.createElement(Et, { ...m }, this.renderListFilter(), t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), /* @__PURE__ */ o.createElement(
         "div",
         {
-          className: V(
+          className: B(
             "k-list",
             {
               [`k-list-${Bt[a] || a}`]: a,
@@ -762,7 +767,7 @@ const Ue = {
       let u, g, m, v = 0;
       const { textField: b, ignoreCase: w } = this.props;
       for (; v < d; v++)
-        if (u = B(n[v].item, b), g = c && os(u, p, w), m = os(u, a, w), g || m) {
+        if (u = V(n[v].item, b), g = c && os(u, p, w), m = os(u, a, w), g || m) {
           v = n[v].itemIndex;
           break;
         }
@@ -995,7 +1000,7 @@ const Ue = {
    * @hidden
    */
   render() {
-    const i = He(this).toLanguageString(Ht, le[Ht]), { style: t, className: e, label: s, dir: n, virtual: a, size: p, rounded: c, fillMode: d, adaptive: r } = this.props, { windowWidth: h = 0 } = this.state, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.value, m = B(g, this.props.textField), v = !this.validityStyles || this.validity.valid, b = this.base, w = b.vs, S = h <= Se && r;
+    const i = He(this).toLanguageString(Ht, le[Ht]), { style: t, className: e, label: s, dir: n, virtual: a, size: p, rounded: c, fillMode: d, adaptive: r } = this.props, { windowWidth: h = 0 } = this.state, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.value, m = V(g, this.props.textField), v = !this.validityStyles || this.validity.valid, b = this.base, w = b.vs, S = h <= Se && r;
     w.enabled = a !== void 0, a !== void 0 && (b.vs.skip = a.skip, b.vs.total = a.total, b.vs.pageSize = a.pageSize);
     const {
       dataItemKey: D,
@@ -1009,7 +1014,7 @@ const Ue = {
       "span",
       {
         ref: this.componentRef,
-        className: V(
+        className: B(
           "k-dropdownlist k-picker",
           e,
           {
@@ -1112,7 +1117,7 @@ const Ue = {
       className: i <= xt ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
     };
     let { group: u } = this.state;
-    return u === void 0 && a !== void 0 && (u = B(d[0], a)), /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(Yt, { ...h }, /* @__PURE__ */ o.createElement(Jt, { className: "k-text-center" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ o.createElement("div", null, n)), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ o.createElement(
+    return u === void 0 && a !== void 0 && (u = V(d[0], a)), /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(Yt, { ...h }, /* @__PURE__ */ o.createElement(Jt, { className: "k-text-center" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ o.createElement("div", null, n)), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ o.createElement(
       Te,
       {
         tabIndex: 0,
@@ -1127,7 +1132,7 @@ const Ue = {
     ))), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderListFilter())), /* @__PURE__ */ o.createElement(at, { className: "!k-overflow-hidden" }, t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), /* @__PURE__ */ o.createElement(
       "div",
       {
-        className: V(
+        className: B(
           "k-list",
           {
             [`k-list-${Bt[s] || s}`]: s,
@@ -1307,7 +1312,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
       }
       this.applyState(d);
     }, this.renderMobileListFilter = () => {
-      const t = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, e = B(this.value, this.props.textField), s = G(t) ? t : e;
+      const t = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, e = V(this.value, this.props.textField), s = G(t) ? t : e;
       return /* @__PURE__ */ o.createElement(
         Re,
         {
@@ -1410,7 +1415,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
       if (this.props.suggest) {
         const p = n.selectionEnd === a.length;
         let c = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-        G(c) || (c = B(this.value, this.props.textField) || "");
+        G(c) || (c = V(this.value, this.props.textField) || "");
         const d = c && c === a, r = c && c.length > a.length;
         d || r || !p ? this._suggested = "" : this.suggestValue(a);
       }
@@ -1541,12 +1546,12 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
       fillMode: b,
       opened: w = this.state.opened,
       placeholder: S
-    } = this.props, { windowWidth: D = 0 } = this.state, N = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, _ = B(this.value, p), C = G(O) ? O : _, F = n && (!!C || G(this.value)), E = this.base.vs, M = this.props.id || this._inputId, K = D <= Se && c;
+    } = this.props, { windowWidth: D = 0 } = this.state, N = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, _ = V(this.value, p), C = G(O) ? O : _, F = n && (!!C || G(this.value)), E = this.base.vs, M = this.props.id || this._inputId, K = D <= Se && c;
     E.enabled = g !== void 0, g !== void 0 && (E.skip = g.skip, E.total = g.total, E.pageSize = g.pageSize);
     const U = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
       "span",
       {
-        className: V(
+        className: B(
           "k-combobox k-input",
           {
             [`k-input-${vt[m] || m}`]: m,
@@ -1622,7 +1627,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
     return i && t && t[e] && t[e].disabled;
   }
   applyValueOnEnter(i, t) {
-    const { data: e = [], textField: s, allowCustom: n } = this.props, a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, c = B(this.value, s) === i ? this.index : Kt(e, i, s), d = c !== -1;
+    const { data: e = [], textField: s, allowCustom: n } = this.props, a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, c = V(this.value, s) === i ? this.index : Kt(e, i, s), d = c !== -1;
     let r;
     if (this._suggested = "", d)
       r = e[c];
@@ -1633,7 +1638,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
     this.triggerOnChange(r, t), a && this.base.togglePopup(t), this.props.filter === void 0 && this.state.text !== void 0 && (t.data.text = void 0), this.applyState(t);
   }
   applyValueOnRejectSuggestions(i, t) {
-    const { data: e = [], textField: s, allowCustom: n } = this.props, a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = B(this.value, s), c = this.state.windowWidth && this.state.windowWidth <= Se;
+    const { data: e = [], textField: s, allowCustom: n } = this.props, a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = V(this.value, s), c = this.state.windowWidth && this.state.windowWidth <= Se;
     if (this._suggested = "", i === p || i === "" && !G(p))
       return a && !c && this.base.togglePopup(t), this.applyState(t);
     const d = Kt(e, i, s, !0), r = d !== -1;
@@ -1647,7 +1652,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
   renderAdaptiveListContainer() {
     const { windowWidth: i = 0 } = this.state, { header: t, footer: e, size: s, data: n = [], groupField: a, groupMode: p, list: c, virtual: d, adaptiveTitle: r, groupStickyHeaderItemRender: h } = this.props, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
     let { group: g } = this.state;
-    g === void 0 && a !== void 0 && (g = B(n[0], a));
+    g === void 0 && a !== void 0 && (g = V(n[0], a));
     const m = {
       navigatable: !1,
       navigatableElements: [],
@@ -1669,7 +1674,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
         icon: "x",
         svgIcon: ot
       }
-    ))), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderMobileListFilter())), /* @__PURE__ */ o.createElement(at, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ o.createElement("div", { className: V(
+    ))), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderMobileListFilter())), /* @__PURE__ */ o.createElement(at, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ o.createElement("div", { className: B(
       {
         ["k-list"]: !c,
         ["k-list-lg"]: !0,
@@ -1682,7 +1687,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
   renderListContainer() {
     const i = this.base, { dir: t, header: e, footer: s, data: n = [], groupField: a, groupMode: p, size: c, list: d, virtual: r, groupStickyHeaderItemRender: h } = this.props, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = i.getPopupSettings(), m = g.width !== void 0 ? g.width : i.popupWidth;
     let { group: v } = this.state;
-    return v === void 0 && a !== void 0 && (v = B(n[0], a)), /* @__PURE__ */ o.createElement(
+    return v === void 0 && a !== void 0 && (v = V(n[0], a)), /* @__PURE__ */ o.createElement(
       Et,
       {
         width: m,
@@ -1690,7 +1695,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
           animate: g.animate,
           anchor: this.element,
           show: u,
-          popupClass: V(
+          popupClass: B(
             g.popupClass,
             "k-list-container",
             "k-combobox-popup"
@@ -1701,7 +1706,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
         dir: t !== void 0 ? t : this.base.dirCalculated,
         itemsCount: [n.length]
       },
-      /* @__PURE__ */ o.createElement("div", { className: V(
+      /* @__PURE__ */ o.createElement("div", { className: B(
         {
           ["k-list"]: !d,
           [`k-list-${vt[c] || c}`]: !d && c,
@@ -1709,7 +1714,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
           ["k-data-table"]: d,
           [`k-table-${vt[c] || c}`]: d && c
         }
-      ) }, e && /* @__PURE__ */ o.createElement("div", { className: "k-table-header" }, e), !d && v && n.length !== 0 && /* @__PURE__ */ o.createElement(Ae, { group: v, groupMode: p, render: h }), this.renderList(), s && /* @__PURE__ */ o.createElement("div", { className: V(
+      ) }, e && /* @__PURE__ */ o.createElement("div", { className: "k-table-header" }, e), !d && v && n.length !== 0 && /* @__PURE__ */ o.createElement(Ae, { group: v, groupMode: p, render: h }), this.renderList(), s && /* @__PURE__ */ o.createElement("div", { className: B(
         {
           ["k-list-footer"]: !this.props.footerClassName
         },
@@ -1726,7 +1731,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
       groupHeaderItemRender: a,
       data: p = [],
       virtual: c = { skip: 0, total: void 0 }
-    } = this.props, d = i.getPopupSettings(), r = i.vs, h = c.skip, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = `translateY(${r.translate}px)`, m = u ? this.getFocusedIndex() : void 0, v = this.props.filter !== void 0 ? this.props.filter : this.state.text, b = B(this.value, t), w = G(v) && v !== b ? null : this.value, S = this.props.list || Ge;
+    } = this.props, d = i.getPopupSettings(), r = i.vs, h = c.skip, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = `translateY(${r.translate}px)`, m = u ? this.getFocusedIndex() : void 0, v = this.props.filter !== void 0 ? this.props.filter : this.state.text, b = V(this.value, t), w = G(v) && v !== b ? null : this.value, S = this.props.list || Ge;
     return /* @__PURE__ */ o.createElement(
       S,
       {
@@ -1746,7 +1751,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
           r.list = this.base.list = D, this.itemHeight = 0;
         },
         wrapperStyle: this.state.windowWidth && this.state.windowWidth > Se ? { maxHeight: d.height } : {},
-        wrapperCssClass: V(
+        wrapperCssClass: B(
           "k-list-content",
           {
             ["k-list-scroller"]: !c
@@ -1876,7 +1881,7 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
     super(i), this.state = {}, this.base = new ie(this), this._element = null, this._suggested = "", this._input = null, this._isScrolling = !1, this.itemHeight = 0, this.focus = () => {
       this._input && this._input.focus();
     }, this.handleItemSelect = (t, e) => {
-      const { data: s = [] } = this.props, n = B(s[t], this.props.textField);
+      const { data: s = [] } = this.props, n = V(s[t], this.props.textField);
       this.triggerOnChange(n, e);
     }, this.itemFocus = (t, e) => {
       const { data: s = [], textField: n } = this.props, a = s[t];
@@ -2070,7 +2075,7 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
     const b = /* @__PURE__ */ o.createElement(
       "span",
       {
-        className: V(
+        className: B(
           "k-autocomplete k-input",
           s,
           {
@@ -2126,7 +2131,7 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
   applyInputValue(i, t, e) {
     const s = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { data: n = [], textField: a } = this.props, p = this.focusedIndex(), c = n[p];
     if (this._suggested = "", s && e === f.enter && c && !c.disabled) {
-      const d = B(n[this.focusedIndex(i)], a);
+      const d = V(n[this.focusedIndex(i)], a);
       this.triggerOnChange(d, t);
     }
     s && this.togglePopup(t), this.applyState(t);
@@ -2174,7 +2179,7 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
       groupStickyHeaderItemRender: d
     } = this.props, r = i.getPopupSettings(), h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, u = r.width !== void 0 ? r.width : i.popupWidth;
     let { group: g } = this.state;
-    return g === void 0 && p !== void 0 && (g = B(n[0], p)), /* @__PURE__ */ o.createElement(
+    return g === void 0 && p !== void 0 && (g = V(n[0], p)), /* @__PURE__ */ o.createElement(
       Et,
       {
         width: u,
@@ -2182,7 +2187,7 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
           animate: r.animate,
           anchor: this.element,
           show: h,
-          popupClass: V(
+          popupClass: B(
             r.popupClass,
             "k-list-container",
             "k-autocomplete-popup"
@@ -2197,7 +2202,7 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
       /* @__PURE__ */ o.createElement(
         "div",
         {
-          className: V(
+          className: B(
             "k-list",
             {
               [`k-list-${ls[a] || a}`]: a
@@ -2254,7 +2259,7 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
     if (this._suggested = "", i) {
       const { data: t = [], textField: e } = this.props, s = t[Ve(t, i, e)];
       if (s) {
-        const n = B(s, e);
+        const n = V(s, e);
         i.toLowerCase() !== n.toLowerCase() && (this._suggested = n.substring(i.length));
       }
     }
@@ -2513,7 +2518,7 @@ const rs = 500, es = (i) => {
       const { header: t, footer: e, allowCustom: s, size: n, data: a = [], groupStickyHeaderItemRender: p, groupField: c, list: d } = this.props, r = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: h } = this.getFocusedState(), u = s && r && /* @__PURE__ */ o.createElement(
         "div",
         {
-          className: V("k-list", {
+          className: B("k-list", {
             [`k-list-${bt[n] || n}`]: n
           }),
           key: "customitem",
@@ -2523,7 +2528,7 @@ const rs = 500, es = (i) => {
         /* @__PURE__ */ o.createElement(
           "div",
           {
-            className: V("k-list-item k-custom-item", { "k-focus": cs(h) }),
+            className: B("k-list-item k-custom-item", { "k-focus": cs(h) }),
             style: { fontStyle: "italic" }
           },
           r,
@@ -2531,10 +2536,10 @@ const rs = 500, es = (i) => {
         )
       );
       let { group: g } = this.state;
-      return g === void 0 && c !== void 0 && (g = B(a[0], c)), /* @__PURE__ */ o.createElement(o.Fragment, null, t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), u, /* @__PURE__ */ o.createElement(
+      return g === void 0 && c !== void 0 && (g = V(a[0], c)), /* @__PURE__ */ o.createElement(o.Fragment, null, t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), u, /* @__PURE__ */ o.createElement(
         "div",
         {
-          className: V(
+          className: B(
             "k-list",
             {
               [`k-list-${this.mobileMode ? "lg" : bt[n] || n}`]: n,
@@ -2550,7 +2555,7 @@ const rs = 500, es = (i) => {
         dir: e !== void 0 ? e : t.dirCalculated,
         width: a,
         popupSettings: {
-          popupClass: V(
+          popupClass: B(
             n.popupClass,
             "k-list-container",
             "k-multiselect-popup"
@@ -2719,7 +2724,7 @@ const rs = 500, es = (i) => {
     const { tags: i, textField: t } = this.props;
     let e = [];
     return i === void 0 ? this.value.forEach((s) => {
-      e.push({ text: B(s, t), data: [s] });
+      e.push({ text: V(s, t), data: [s] });
     }) : e.push(...i), e;
   }
   /**
@@ -2822,7 +2827,7 @@ const rs = 500, es = (i) => {
       "div",
       {
         ref: this.componentRef,
-        className: V("k-multiselect k-input", t, {
+        className: B("k-multiselect k-input", t, {
           [`k-input-${bt[d] || d}`]: d,
           [`k-rounded-${di[r] || r}`]: r,
           [`k-input-${h}`]: h,
@@ -2839,10 +2844,10 @@ const rs = 500, es = (i) => {
         onClick: this.handleWrapperClick,
         onMouseDown: As
       },
-      /* @__PURE__ */ o.createElement("div", { className: V("k-input-values") }, /* @__PURE__ */ o.createElement(
+      /* @__PURE__ */ o.createElement("div", { className: B("k-input-values") }, /* @__PURE__ */ o.createElement(
         "div",
         {
-          className: V(
+          className: B(
             "k-chip-list",
             { [`k-chip-list-${bt[d] || d}`]: d }
           ),
@@ -2870,7 +2875,7 @@ const rs = 500, es = (i) => {
       {
         label: e,
         editorId: D,
-        editorValue: m || B(this.value[0], a),
+        editorValue: m || V(this.value[0], a),
         editorValid: O,
         editorDisabled: n,
         style: { width: i ? i.width : void 0 },
@@ -3060,7 +3065,7 @@ const ui = (i) => /* @__PURE__ */ o.createElement(
   {
     ...i,
     wrapperCssClass: "k-table-body k-table-scroller",
-    listClassName: V(
+    listClassName: B(
       "k-table k-table-list",
       {
         "k-virtual-table": i.virtual !== void 0
@@ -3099,7 +3104,7 @@ const ui = (i) => /* @__PURE__ */ o.createElement(
   const D = o.useMemo(
     () => {
       if (e.groupField !== void 0 && e.data)
-        return B(e.data[0], e.groupField);
+        return V(e.data[0], e.groupField);
     },
     [e.data, e.groupField]
   ), [N, O] = o.useState(D), [_, C] = o.useState(!0), F = o.useMemo(
@@ -3138,7 +3143,7 @@ const ui = (i) => /* @__PURE__ */ o.createElement(
       e.groupField !== void 0 && (Ne = It(e.groupField), Ce = Ne(Oe[A]), Me = Ne(Oe[A - 1]), Ce && Me && Ce !== Me && (me = Ce)), me && e.groupMode === "classic" && L.push(/* @__PURE__ */ o.createElement("div", { key: "group", className: "k-table-td k-table-group-td" }, /* @__PURE__ */ o.createElement("span", null, me)));
       const X = o.cloneElement(P, {
         ...P.props,
-        className: V("k-table-row", {
+        className: B("k-table-row", {
           "k-table-alt-row": H.index % 2 !== 0,
           "k-focus": H.focused,
           "k-selected": H.selected,
@@ -3206,7 +3211,7 @@ const ui = (i) => /* @__PURE__ */ o.createElement(
         onFilterChange: Q,
         onPageChange: ne,
         onGroupScroll: oe,
-        className: V("k-dropdowngrid", d),
+        className: B("k-dropdowngrid", d),
         required: e.required,
         adaptive: e.adaptive,
         adaptiveFilter: e.adaptiveFilter,
@@ -3284,7 +3289,7 @@ const Cs = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
     valid: O,
     required: _,
     validityStyles: C
-  } = s, F = $t(s.tabIndex, u), x = o.useRef(null), E = o.useRef(null), M = o.useRef(null), K = o.useRef(null), U = o.useRef(null), j = o.useRef(null), Y = o.useRef(!1), [re, we] = o.useState(void 0), ne = s.value !== void 0, Q = ne ? s.value : re !== void 0 ? re : s.defaultValue, oe = G(Q), Ke = oe ? B(Q, s.textField) : "", P = ki({ validationMessage: N, valid: O, required: _ }, oe), H = o.useCallback(() => E.current && E.current.focus(), []);
+  } = s, F = $t(s.tabIndex, u), x = o.useRef(null), E = o.useRef(null), M = o.useRef(null), K = o.useRef(null), U = o.useRef(null), j = o.useRef(null), Y = o.useRef(!1), [re, we] = o.useState(void 0), ne = s.value !== void 0, Q = ne ? s.value : re !== void 0 ? re : s.defaultValue, oe = G(Q), Ke = oe ? V(Q, s.textField) : "", P = ki({ validationMessage: N, valid: O, required: _ }, oe), H = o.useCallback(() => E.current && E.current.focus(), []);
   o.useImperativeHandle(
     x,
     () => ({
@@ -3573,7 +3578,7 @@ const Cs = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
   ), Xe = s.listNoData || Cs, gt = s.valueHolder || Ii, Ze = bs(), ft = !C || P.valid, { size: ge, rounded: be, fillMode: Ee } = s, ae = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
     "span",
     {
-      className: V("k-dropdowntree k-picker", s.className, {
+      className: B("k-dropdowntree k-picker", s.className, {
         [`k-picker-${vi[ge] || ge}`]: ge,
         [`k-rounded-${bi[be] || be}`]: be,
         [`k-picker-${Ee}`]: Ee,
@@ -3647,8 +3652,8 @@ const Cs = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
     !ue && /* @__PURE__ */ o.createElement(
       jt,
       {
-        className: V(d.className, { "k-rtl": L === "rtl" }),
-        popupClass: V(
+        className: B(d.className, { "k-rtl": L === "rtl" }),
+        popupClass: B(
           d.popupClass,
           "k-dropdowntree-popup"
         ),
@@ -3811,7 +3816,7 @@ const Si = "Please select a value from the list!", { sizeMap: us, roundedMap: wi
     width: ks(K, Mt),
     ...ve !== void 0 ? { direction: ve } : {}
   }, xe = o.useCallback(() => K.current && K.current.focus(), []);
-  ne.current = _ === void 0 ? (C || []).map((y) => ({ text: B(y, e.textField), data: [y] })) : [..._], o.useImperativeHandle(
+  ne.current = _ === void 0 ? (C || []).map((y) => ({ text: V(y, e.textField), data: [y] })) : [..._], o.useImperativeHandle(
     M,
     () => ({
       props: e,
@@ -4123,7 +4128,7 @@ const Si = "Please select a value from the list!", { sizeMap: us, roundedMap: wi
   ), ge = e.listNoData || Cs, be = bs(), Ee = !x || ue.valid, { size: ae, rounded: I, fillMode: T } = e, $ = J && W ? Ne : ne.current, de = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
     "span",
     {
-      className: V("k-multiselecttree k-input", e.className, {
+      className: B("k-multiselecttree k-input", e.className, {
         [`k-input-${us[ae] || ae}`]: ae,
         [`k-rounded-${wi[I] || I}`]: I,
         [`k-input-${T}`]: T,
@@ -4157,7 +4162,7 @@ const Si = "Please select a value from the list!", { sizeMap: us, roundedMap: wi
       "div",
       {
         id: "tagslist-" + n,
-        className: V("k-input-values k-chip-list k-selection-multiple", {
+        className: B("k-input-values k-chip-list k-selection-multiple", {
           [`k-chip-list-${us[ae] || ae}`]: ae
         })
       },
@@ -4196,11 +4201,11 @@ const Si = "Please select a value from the list!", { sizeMap: us, roundedMap: wi
     !J && /* @__PURE__ */ o.createElement(
       jt,
       {
-        popupClass: V(
+        popupClass: B(
           c.popupClass,
           "k-multiselecttree-popup"
         ),
-        className: V(c.className, { "k-rtl": ve === "rtl" }),
+        className: B(c.className, { "k-rtl": ve === "rtl" }),
         style: dt,
         animate: c.animate,
         anchor: K.current,
@@ -4327,7 +4332,7 @@ const et = (i, t) => {
   return i && i.length && i.forEach((s) => {
     e[t(s)] = !0;
   }), e;
-}, zi = (i, t) => {
+}, Hi = (i, t) => {
   const {
     items: e,
     dataItemKey: s,
@@ -4410,7 +4415,9 @@ export {
   Zt as SearchBar,
   Is as TagList,
   le as dropdownsMessages,
-  zi as getMultiSelectTreeValue,
+  zi as findByFieldValue,
+  V as getItemValue,
+  Hi as getMultiSelectTreeValue,
   et as getValueMap,
   fe as nodata,
   Ls as scrollToItem

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-dropdowns",
-  "version": "7.1.0-develop.7",
+  "version": "7.1.0-develop.8",
   "description": "React DropDowns offer an interface for users to select different items from a list and more. KendoReact Dropdowns package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -23,14 +23,14 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-buttons": "7.1.0-develop.7",
-    "@progress/kendo-react-common": "7.1.0-develop.7",
-    "@progress/kendo-react-inputs": "7.1.0-develop.7",
-    "@progress/kendo-react-intl": "7.1.0-develop.7",
-    "@progress/kendo-react-labels": "7.1.0-develop.7",
-    "@progress/kendo-react-layout": "7.1.0-develop.7",
-    "@progress/kendo-react-popup": "7.1.0-develop.7",
-    "@progress/kendo-react-treeview": "7.1.0-develop.7",
+    "@progress/kendo-react-buttons": "7.1.0-develop.8",
+    "@progress/kendo-react-common": "7.1.0-develop.8",
+    "@progress/kendo-react-inputs": "7.1.0-develop.8",
+    "@progress/kendo-react-intl": "7.1.0-develop.8",
+    "@progress/kendo-react-labels": "7.1.0-develop.8",
+    "@progress/kendo-react-layout": "7.1.0-develop.8",
+    "@progress/kendo-react-popup": "7.1.0-develop.8",
+    "@progress/kendo-react-treeview": "7.1.0-develop.8",
     "@progress/kendo-svg-icons": "^2.1.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"