@progress/kendo-react-dropdowns 15.0.0 → 15.0.1-develop.10

package/ComboBox/ComboBox.mjs

@@ -6,11 +6,11 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as c from "react";
-import m from "prop-types";
+import f from "prop-types";
 import P from "../common/DropDownBase.mjs";
 import { createPropsContext as it, classNames as S, uComboBox as F, Keys as x, validatePackage as ot, getLicenseMessage as at, svgIconPropType as nt, canUseDOM as H, subscribeToKendoPaste as lt, IconWrap as rt, WatermarkOverlay as pt, withIdHOC as dt, withPropsContext as ht, withUnstyledHOC as ct, withAdaptiveModeContext as ut } from "@progress/kendo-react-common";
 import { FloatingLabel as gt } from "@progress/kendo-react-labels";
-import { getPlainDataDuplicates as mt, getItemIndexByText as L, getFilteredData as I, areSame as w, getItemValue as D, isPresent as k, itemIndexStartsWith as N, suggestValue as ft } from "../common/utils.mjs";
+import { getPlainDataDuplicates as mt, getItemIndexByText as L, getFilteredData as I, areSame as w, getItemValue as k, isPresent as D, itemIndexStartsWith as N, suggestValue as ft } from "../common/utils.mjs";
 import vt from "../common/SearchBar.mjs";
 import bt from "../common/ListContainer.mjs";
 import xt from "../common/List.mjs";
@@ -32,26 +32,26 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
     }, this.checkForDuplicatePlainTextRecords = () => {
       const t = this.props.textField !== void 0, e = this.props.dataItemKey !== void 0;
       if (this.props.data && this.props.data.length > 0 && !t && !e) {
-        const a = this.props.data;
-        this.duplicates = mt(a), this.hasDuplicates = this.duplicates.length > 0;
+        const n = this.props.data;
+        this.duplicates = mt(n), this.hasDuplicates = this.duplicates.length > 0;
       }
     }, this.handleKendoPasteValue = (t) => {
-      const { data: e, textField: a, allowCustom: r } = this.props;
+      const { data: e, textField: n, allowCustom: r } = this.props;
       if (!e)
         return;
-      const l = t != null ? String(t) : "", o = L(e, l, a, !1, !0), p = o !== -1;
-      let n = null;
-      if (p ? n = e[o] : r && (n = a ? { [a]: l } : l), n === null)
+      const l = t != null ? String(t) : "", o = L(e, l, n, !1, !0), p = o !== -1;
+      let a = null;
+      if (p ? a = e[o] : r && (a = n ? { [n]: l } : l), a === null)
         return;
       const i = this.base.initState();
       i.syntheticEvent = {
         target: this._element,
         currentTarget: this._element,
         nativeEvent: new Event("change", { bubbles: !0 })
-      }, this.state.text !== void 0 && (i.data.text = void 0), this.triggerOnChange(n, i), this.applyState(i);
+      }, this.state.text !== void 0 && (i.data.text = void 0), this.triggerOnChange(a, i), this.applyState(i);
     }, this.handleItemSelect = (t, e) => {
-      const { virtual: a, dataItemKey: r } = this.props, l = I(this.props), o = a ? a.skip : 0, p = l[t - o], n = this.hasDuplicates || !w(p, this.value, r);
-      this.triggerOnChange(p, e), this.state.text !== void 0 && (e.data.text = void 0), n && this.base.triggerPageChangeCornerItems(p, e);
+      const { virtual: n, dataItemKey: r } = this.props, l = I(this.props), o = n ? n.skip : 0, p = l[t - o], a = this.hasDuplicates || !w(p, this.value, r);
+      this.triggerOnChange(p, e), this.state.text !== void 0 && (e.data.text = void 0), a && this.base.triggerPageChangeCornerItems(p, e);
     }, this.onPopupOpened = () => {
       setTimeout(() => {
         this.mobileMode && this._adaptiveFilterInput && (this._skipBlur = !0, this._adaptiveFilterInput.focus(), this._skipBlur = !1);
@@ -60,22 +60,22 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
       this._element = t, this.base.wrapper = t;
     }, this.toggleBtnClick = (t) => {
       this._skipFocus = !0;
-      const { skipDisabledItems: e, textField: a } = this.props, r = I(this.props), l = this.getFocusedIndex(), o = this.getCurrentValueDisabledStatus(a, r, l), p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, n = this.base.initState();
-      if (n.syntheticEvent = t, !e && a && o && this.clearValueOnToggleBtnClick(t), this.base.togglePopup(n), !p && this.mobileMode) {
+      const { skipDisabledItems: e, textField: n } = this.props, r = I(this.props), l = this.getFocusedIndex(), o = this.getCurrentValueDisabledStatus(n, r, l), p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, a = this.base.initState();
+      if (a.syntheticEvent = t, !e && n && o && this.clearValueOnToggleBtnClick(t), this.base.togglePopup(a), !p && this.mobileMode) {
         const i = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
-        this.base.filterChanged(i, n);
+        this.base.filterChanged(i, a);
       }
-      this.applyState(n), setTimeout(() => {
+      this.applyState(a), setTimeout(() => {
         this._skipFocus = !1;
       }, 300);
     }, this.closeOpenedApplyStateNonMobileMode = (t, e) => {
       e && !this.mobileMode && this.base.togglePopup(t);
     }, this.renderMobileListFilter = () => {
-      const t = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, e = D(this.value, this.props.textField), a = k(t) ? t : e;
+      const t = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, e = k(this.value, this.props.textField), n = D(t) ? t : e;
       return /* @__PURE__ */ c.createElement(
         It,
         {
-          value: a,
+          value: n,
           ref: (r) => {
             this._adaptiveFilterInput = r && r.element;
           },
@@ -88,9 +88,9 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
         }
       );
     }, this.listContainerContent = () => {
-      const { header: t, footer: e, size: a, groupStickyHeaderItemRender: r, groupField: l, list: o, unstyled: p, virtual: n } = this.props, i = I(this.props), d = p && p.uComboBox;
+      const { header: t, footer: e, size: n, groupStickyHeaderItemRender: r, groupField: l, list: o, unstyled: p, virtual: a } = this.props, i = I(this.props), d = p && p.uComboBox;
       let { group: h } = this.state;
-      return h === void 0 && l !== void 0 && (h = D(i[0], l)), /* @__PURE__ */ c.createElement(
+      return h === void 0 && l !== void 0 && (h = k(i[0], l)), /* @__PURE__ */ c.createElement(
         "div",
         {
           className: S(
@@ -98,8 +98,8 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
               c: d,
               list: o,
               size: "large",
-              tableSize: a,
-              virtual: n
+              tableSize: n,
+              virtual: a
             })
           )
         },
@@ -118,17 +118,17 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
       const e = this.base.initState();
       e.syntheticEvent = t.syntheticEvent, e.data.text = t.target.value, this.base.filterChanged(t.target.value, e), this.applyState(e);
     }, this.onScroll = (t) => {
-      const { vs: e, list: a } = this.base;
+      const { vs: e, list: n } = this.base;
       e.scrollHandler(t);
       const { groupField: r } = this.props;
       this.props.onListScroll && this.props.onListScroll(t);
       let l = I(this.props);
       if (!r || !l.length)
         return;
-      const o = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : a ? a.children[0].offsetHeight : 0), n = t.target.scrollTop - e.skip * o;
+      const o = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : n ? n.children[0].offsetHeight : 0), a = t.target.scrollTop - e.skip * o;
       l = this.base.getGroupedDataModernMode(l, r);
       let i = l[0][r];
-      for (let d = 1; d < l.length && !(o * d > n); d++)
+      for (let d = 1; d < l.length && !(o * d > a); d++)
         l[d] && l[d][r] && (i = l[d][r]);
       i !== this.state.group && (this.setState({
         group: i
@@ -137,35 +137,35 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
       this.navigationIndex = t, this.base.handleItemClick(t, e), this._valueDuringOnChange = void 0;
     }, this.handleBlur = (t) => {
       if (this.state.focused && !this._skipBlur) {
-        const e = this.base.initState(), { textField: a } = this.props, r = I(this.props), l = this.getFocusedIndex(), p = !(l === -1) && this.getCurrentValueDisabledStatus(a, r, l);
-        e.data.focused = !1, e.events.push({ type: "onBlur" }), e.syntheticEvent = t, a && p && this.clearValueOnBlur(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, e);
+        const e = this.base.initState(), { textField: n } = this.props, r = I(this.props), l = this.getFocusedIndex(), p = !(l === -1) && this.getCurrentValueDisabledStatus(n, r, l);
+        e.data.focused = !1, e.events.push({ type: "onBlur" }), e.syntheticEvent = t, n && p && this.clearValueOnBlur(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, e);
       }
     }, this.onInputClick = (t) => {
-      const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, a = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
+      const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, n = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
       if (!e && this.mobileMode) {
         const r = this.base.initState();
-        r.syntheticEvent = t, this.base.togglePopup(r), this.base.filterChanged(a, r), this.applyState(r);
+        r.syntheticEvent = t, this.base.togglePopup(r), this.base.filterChanged(n, r), this.applyState(r);
       }
     }, this.onInputKeyDown = (t) => {
-      const { skipDisabledItems: e, textField: a, dataItemKey: r, groupField: l } = this.props, o = I(this.props), p = this.value, n = Math.max(
+      const { skipDisabledItems: e, textField: n, dataItemKey: r, groupField: l } = this.props, o = I(this.props), p = this.value, a = Math.max(
         0,
         o.findIndex((g) => w(g, p, r))
       ), i = t.keyCode, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
       if (h.syntheticEvent = t, !t.altKey && (i === x.up || i === x.down)) {
-        if (t.preventDefault(), l !== "" && a)
+        if (t.preventDefault(), l !== "" && n)
           if (!this.props.skipDisabledItems && d)
             this.onNavigate(h, i);
           else {
             let g = 0;
             if (i === x.down || i === x.right) {
-              const u = o.slice(n + 1 < o.length ? n + 1 : n).find((C) => !C.disabled);
+              const u = o.slice(a + 1 < o.length ? a + 1 : a).find((C) => !C.disabled);
               g = u && o.indexOf(u);
             } else if (i === x.up || i === x.left) {
               let u;
-              if (n === 0)
+              if (a === 0)
                 u = o, g = o.findIndex((C) => !C.disabled);
               else {
-                u = o.slice(0, n);
+                u = o.slice(0, a);
                 let C = u.pop();
                 for (; C && C.disabled; )
                   C = u.pop();
@@ -173,48 +173,50 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
               }
             }
             if (g !== void 0) {
-              const u = g - n;
+              const u = g - a;
               this.onNavigate(h, i, u);
-            } else g === void 0 && n === o.length - 1 && this.onNavigate(h, i);
+            } else g === void 0 && a === o.length - 1 && this.onNavigate(h, i);
           }
         else if (!this.props.skipDisabledItems && d)
           this.onNavigate(h, i);
         else {
           let g = null;
           if (i === x.down || i === x.right)
-            g = o.slice(n + 1).find((u) => !u.disabled);
+            g = o.slice(a + 1).find((u) => !u.disabled);
           else if (i === x.up || i === x.left) {
-            const u = o.slice(0, n);
+            const u = o.slice(0, a);
             for (g = u.pop(); g && g.disabled; )
               g = u.pop();
           }
           if (g) {
-            const u = g.id - n - 1;
+            const u = g.id - a - 1;
             this.onNavigate(h, i, u);
           } else
             this.onNavigate(h, i);
         }
         this.applyState(h);
       }
-      const f = () => {
+      const m = () => {
         t.preventDefault(), this.base.togglePopup(h), this.applyState(h);
-      }, b = this.getFocusedIndex(), y = b === -1, v = !y && this.getCurrentValueDisabledStatus(a, o, b);
-      d ? i === x.pageUp ? (t.preventDefault(), this.base.scrollPopupByPageSize(-1)) : i === x.pageDown ? (t.preventDefault(), this.base.scrollPopupByPageSize(1)) : t.altKey && i === x.up ? f() : i === x.enter ? (t.preventDefault(), (a && !y && t.currentTarget.value ? o[b][a] : void 0) ? !e && a && v ? this.clearValueOnEnterOrEsc(t) : v || this.applyValueOnEnter(t.currentTarget.value, h) : this.applyValueOnEnter(t.currentTarget.value, h)) : i === x.esc && (!e && a && v && this.clearValueOnEnterOrEsc(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, h)) : !d && i === x.esc ? this.clearValueOnEnterOrEsc(t) : t.altKey && i === x.down && f();
+      }, b = this.getFocusedIndex(), y = b === -1, v = !y && this.getCurrentValueDisabledStatus(n, o, b);
+      d ? i === x.pageUp ? (t.preventDefault(), this.base.scrollPopupByPageSize(-1)) : i === x.pageDown ? (t.preventDefault(), this.base.scrollPopupByPageSize(1)) : t.altKey && i === x.up ? m() : i === x.enter ? (t.preventDefault(), (n && !y && t.currentTarget.value ? o[b][n] : void 0) ? !e && n && v ? this.clearValueOnEnterOrEsc(t) : v || this.applyValueOnEnter(t.currentTarget.value, h) : this.applyValueOnEnter(t.currentTarget.value, h)) : i === x.esc && (!e && n && v && this.clearValueOnEnterOrEsc(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, h)) : !d && i === x.esc ? this.clearValueOnEnterOrEsc(t) : t.altKey && i === x.down && m();
     }, this.inputOnChange = (t) => {
       const e = this.base.initState();
       e.syntheticEvent = t;
-      const a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = t.currentTarget, l = r.value;
+      const n = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = t.currentTarget, l = r.value;
       if (this.props.suggest) {
         const o = r.selectionEnd === l.length;
         let p = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-        k(p) || (p = D(this.value, this.props.textField) || "");
-        const n = p && p === l, i = p && p.length > l.length;
-        n || i || !o ? this._suggested = "" : this.suggestValue(l);
+        D(p) || (p = k(this.value, this.props.textField) || "");
+        const a = p && p === l, i = p && p.length > l.length;
+        a || i || !o ? this._suggested = "" : this.suggestValue(l);
       }
-      this.props.filter === void 0 && (e.data.text = l), this.state.focusedItem !== void 0 && (e.data.focusedItem = void 0), a ? this.scrollToFocused = !0 : this.base.togglePopup(e), this.base.filterChanged(l, e), this.applyState(e), this.setState({ group: void 0 });
+      this.props.filter === void 0 && (e.data.text = l), this.state.focusedItem !== void 0 && (e.data.focusedItem = void 0), n ? this.scrollToFocused = !0 : this.base.togglePopup(e), this.base.filterChanged(l, e), this.applyState(e), this.setState({ group: void 0 });
     }, this.clearButtonClick = (t) => {
       const e = this.base.initState();
-      e.syntheticEvent = t, t.stopPropagation(), this.clearValue();
+      e.syntheticEvent = t, t.stopPropagation(), this.clearValue(), this._skipFocus = !0, this.focus(), setTimeout(() => {
+        this._skipFocus = !1;
+      }, 300);
     }, this.clearValueOnEnterOrEsc = (t) => {
       const e = this.base.initState();
       e.syntheticEvent = t, t.stopPropagation(), this.clearValue();
@@ -273,7 +275,7 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
    */
   get index() {
     const { dataItemKey: s } = this.props, t = I(this.props), e = this.value;
-    return t.findIndex((a) => w(a, e, s));
+    return t.findIndex((n) => w(n, e, s));
   }
   /**
    * Gets the `name` property of the ComboBox.
@@ -301,22 +303,22 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
   }
   /** @hidden */
   componentDidUpdate(s, t) {
-    var f, b;
-    const { dataItemKey: e, virtual: a, groupField: r = "", textField: l } = this.props, o = I(this.props), p = s.virtual ? s.virtual.total : 0, n = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = s.opened !== void 0 ? s.opened : t.opened;
+    var m, b;
+    const { dataItemKey: e, virtual: n, groupField: r = "", textField: l } = this.props, o = I(this.props), p = s.virtual ? s.virtual.total : 0, a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = s.opened !== void 0 ? s.opened : t.opened;
     s.data !== o && this.checkForDuplicatePlainTextRecords();
-    const d = !i && n, h = this.value;
-    if (this._valueOnDidUpdate = h, this.base.didUpdate(), a && a.total !== p)
+    const d = !i && a, h = this.value;
+    if (this._valueOnDidUpdate = h, this.base.didUpdate(), n && n.total !== p)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
       const y = s.value !== void 0 ? s.value : t.value;
       let v = this.hasDuplicates ? this.navigationIndex || 0 : o.findIndex((u) => w(u, h, e));
-      l && h && (v = (f = this.base.getGroupedDataModernMode(o, r)) == null ? void 0 : f.map((u) => u[l]).indexOf(h[l]));
+      l && h && (v = (m = this.base.getGroupedDataModernMode(o, r)) == null ? void 0 : m.map((u) => u[l]).indexOf(h[l]));
       const g = !w(y, h, e);
-      if (d && a ? this.base.scrollToVirtualItem(a, v) : d && !a ? (this.onPopupOpened(), o && o.length !== 0 && this.base.resetGroupStickyHeader(o[0][r], this), this.base.scrollToItem(v)) : (this.hasDuplicates || n && i && h && g) && this.base.scrollToItem(v), n && i && this.scrollToFocused) {
+      if (d && n ? this.base.scrollToVirtualItem(n, v) : d && !n ? (this.onPopupOpened(), o && o.length !== 0 && this.base.resetGroupStickyHeader(o[0][r], this), this.base.scrollToItem(v)) : (this.hasDuplicates || a && i && h && g) && this.base.scrollToItem(v), a && i && this.scrollToFocused) {
         const u = (b = this.props.filter ? this.props.filter : this.state.text) != null ? b : "";
         if (u) {
-          const { focusedItemIndex: C = N } = this.props, M = C(o, u, l);
-          this.base.scrollToItem(M);
+          const { focusedItemIndex: C = N } = this.props, T = C(o, u, l);
+          this.base.scrollToItem(T);
         } else
           this.base.scrollToItem(0);
       }
@@ -349,25 +351,25 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
       U,
       R[U]
     ), {
-      dir: a,
+      dir: n,
       disabled: r,
       clearButton: l = E.defaultProps.clearButton,
       label: o,
       textField: p,
-      className: n,
+      className: a,
       style: i,
       loading: d,
       iconClassName: h,
-      virtual: f,
+      virtual: m,
       size: b,
       rounded: y,
       fillMode: v,
       opened: g = this.state.opened,
       placeholder: u,
       svgIcon: C,
-      unstyled: M
-    } = this.props, T = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, J = D(this.value, p), B = k(O) ? O : J, Q = l && (!!B || k(this.value)), V = this.base.vs, z = this.props.id || this._inputId, _ = M && M.uComboBox;
-    V.enabled = f !== void 0, f !== void 0 && (V.skip = f.skip, V.total = f.total, V.pageSize = f.pageSize);
+      unstyled: T
+    } = this.props, O = !this.validityStyles || this.validity.valid, M = this.props.filter !== void 0 ? this.props.filter : this.state.text, J = k(this.value, p), B = D(M) ? M : J, Q = l && (!!B || D(this.value)), V = this.base.vs, z = this.props.id || this._inputId, _ = T && T.uComboBox;
+    V.enabled = m !== void 0, m !== void 0 && (V.skip = m.skip, V.total = m.total, V.pageSize = m.pageSize);
     const [X, Z] = Y(this.props.prefix || c.Fragment), [tt, et] = Y(this.props.suffix || c.Fragment), A = /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement(
       "span",
       {
@@ -378,15 +380,15 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
             rounded: y,
             fillMode: v,
             disabled: r,
-            invalid: !T,
+            invalid: !O,
             loading: d,
             required: this.required
           }),
-          n
+          a
         ),
         ref: this.componentRef,
         style: o ? { ...i, width: void 0 } : i,
-        dir: a,
+        dir: n,
         onFocus: this.handleFocus
       },
       this.props.prefix && /* @__PURE__ */ c.createElement(X, { ...Z }),
@@ -424,90 +426,90 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
         label: o,
         editorId: z,
         editorValue: B,
-        editorValid: T,
+        editorValid: O,
         editorDisabled: r,
         style: { width: i ? i.width : void 0 },
         children: A,
-        unstyled: M
+        unstyled: T
       }
     ) : A;
   }
   /** @hidden */
   onNavigate(s, t, e) {
-    const { virtual: a = { skip: 0 } } = this.props, r = I(this.props), l = this.props.filter ? this.props.filter : this.state.text;
-    let o = -1, p;
-    const n = this.base.vs, i = this.value;
+    const { virtual: n = { skip: 0 }, textField: r } = this.props, l = I(this.props), o = this.props.filter ? this.props.filter : this.state.text;
+    let p = -1, a;
+    const i = this.base.vs, d = this.value;
     this._suggested = "";
-    const d = this.hasDuplicates && this.duplicates.indexOf(i) !== -1;
-    if (o = this.getFocusedIndex(d), o !== -1 && !k(i))
-      this.handleItemSelect(o, s);
-    else if (l === "")
+    const h = this.hasDuplicates && this.duplicates.indexOf(d) !== -1;
+    if (p = this.getFocusedIndex(h), p !== -1 && (!D(d) || o && o !== k(d, r)))
+      this.handleItemSelect(p, s);
+    else if (o === "")
       this.handleItemSelect(0, s);
     else {
-      const h = a.skip + o;
-      p = this.base.navigation.navigate({
+      const m = n.skip + p;
+      a = this.base.navigation.navigate({
         keyCode: t,
-        current: h,
-        max: (n.enabled ? n.total : r.length) - 1,
+        current: m,
+        max: (i.enabled ? i.total : l.length) - 1,
         min: 0,
         skipItems: e || void 0
-      }), p !== void 0 && this.handleItemSelect(p, s);
+      }), a !== void 0 && this.handleItemSelect(a, s);
     }
-    this.navigationIndex = p;
+    this.navigationIndex = a;
   }
   getCurrentValueDisabledStatus(s, t, e) {
     return s && t && t[e] && t[e].disabled;
   }
   applyValueOnEnter(s, t) {
-    const { textField: e, allowCustom: a, ignoreCase: r } = this.props, l = I(this.props), o = this.props.opened !== void 0 ? this.props.opened : this.state.opened, n = D(this.value, e) === s ? this.index : L(l, s, e, !1, r), i = n !== -1;
+    const { textField: e, allowCustom: n, ignoreCase: r } = this.props, l = I(this.props), o = this.props.opened !== void 0 ? this.props.opened : this.state.opened, a = k(this.value, e) === s ? this.index : L(l, s, e, !1, r), i = a !== -1;
     let d;
     if (this._suggested = "", i)
-      d = l[n];
-    else if (a)
+      d = l[a];
+    else if (n)
       d = e !== void 0 ? { [e]: s } : s;
     else
       return this.selectFocusedItem(s, t);
     this.triggerOnChange(d, t), o && this.base.togglePopup(t), this.props.filter === void 0 && this.state.text !== void 0 && (t.data.text = void 0), this.applyState(t);
   }
   applyValueOnRejectSuggestions(s, t) {
-    const { textField: e, allowCustom: a, ignoreCase: r } = this.props, l = I(this.props), o = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = D(this.value, e);
-    if (this._suggested = "", s === p || s === "" && !k(p))
+    const { textField: e, allowCustom: n, ignoreCase: r } = this.props, l = I(this.props), o = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = k(this.value, e);
+    if (this._suggested = "", s === p || s === "" && !D(p))
       return this.closeOpenedApplyStateNonMobileMode(t, o), this.applyState(t);
-    const n = L(l, s, e, !0, r), i = n !== -1;
+    const a = L(l, s, e, !0, r), i = a !== -1;
     let d = null;
-    i ? d = l[n] : a && (d = s ? e ? { [e]: s } : s : null), this.triggerOnChange(d, t), this.state.text !== void 0 && (t.data.text = void 0, this.base.filterChanged("", t)), this.closeOpenedApplyStateNonMobileMode(t, o), this.applyState(t);
+    i ? d = l[a] : n && (d = s ? e ? { [e]: s } : s : null), this.triggerOnChange(d, t), this.state.text !== void 0 && (t.data.text = void 0, this.base.filterChanged("", t)), this.closeOpenedApplyStateNonMobileMode(t, o), this.applyState(t);
   }
   selectFocusedItem(s, t) {
-    const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: a, virtual: r = { skip: 0 }, focusedItemIndex: l = N } = this.props, o = I(this.props), p = r.skip, n = s === "" && p === 0 ? 0 : l(o, s, a);
-    return n !== -1 ? this.handleItemSelect(n + p, t) : (this.triggerOnChange(null, t), this.state.text !== void 0 && (t.data.text = void 0)), e && this.base.togglePopup(t), this.applyState(t);
+    const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: n, virtual: r = { skip: 0 }, focusedItemIndex: l = N } = this.props, o = I(this.props), p = r.skip, a = s === "" && p === 0 ? 0 : l(o, s, n);
+    return a !== -1 ? this.handleItemSelect(a + p, t) : (this.triggerOnChange(null, t), this.state.text !== void 0 && (t.data.text = void 0)), e && this.base.togglePopup(t), this.applyState(t);
   }
   renderAdaptiveListContainer() {
-    const { windowWidth: s = 0 } = this.state, { groupField: t, adaptiveTitle: e = this.props.label, adaptiveSubtitle: a } = this.props, r = I(this.props), l = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+    const { windowWidth: s = 0 } = this.state, { groupField: t, adaptiveTitle: e = this.props.label, adaptiveSubtitle: n } = this.props, r = I(this.props), l = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
     let { group: o } = this.state;
-    o === void 0 && t !== void 0 && (o = D(r[0], t));
+    o === void 0 && t !== void 0 && (o = k(r[0], t));
     const p = {
       title: e || this.props.label,
-      subTitle: a,
+      subTitle: n,
       expand: l,
-      onClose: (n) => this.toggleBtnClick(n),
+      onClose: (a) => this.toggleBtnClick(a),
       windowWidth: s,
       mobileFilter: this.renderMobileListFilter()
     };
     return /* @__PURE__ */ c.createElement(kt, { ...p }, /* @__PURE__ */ c.createElement(Ft, null, /* @__PURE__ */ c.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
   }
   renderListContainer() {
-    const s = this.base, { dir: t, header: e, footer: a, groupField: r, size: l, list: o, virtual: p, groupStickyHeaderItemRender: n, unstyled: i } = this.props, d = I(this.props), h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, f = s.getPopupSettings(), b = f.width !== void 0 ? f.width : s.popupWidth, y = i && i.uComboBox;
+    const s = this.base, { dir: t, header: e, footer: n, groupField: r, size: l, list: o, virtual: p, groupStickyHeaderItemRender: a, unstyled: i } = this.props, d = I(this.props), h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, m = s.getPopupSettings(), b = m.width !== void 0 ? m.width : s.popupWidth, y = i && i.uComboBox;
     let { group: v } = this.state;
-    return v === void 0 && r !== void 0 && (v = D(d[0], r)), /* @__PURE__ */ c.createElement(
+    return v === void 0 && r !== void 0 && (v = k(d[0], r)), /* @__PURE__ */ c.createElement(
       bt,
       {
         width: b,
         popupSettings: {
-          ...f,
-          anchor: f.anchor || this.element,
+          ...m,
+          anchor: m.anchor || this.element,
           show: h,
           popupClass: S(
-            f.popupClass,
+            m.popupClass,
             F.listContainer({
               c: y,
               popup: !0
@@ -531,9 +533,9 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
           )
         },
         e && /* @__PURE__ */ c.createElement("div", { className: S(F.listHeader({ c: y })) }, e),
-        !o && v && d.length !== 0 && /* @__PURE__ */ c.createElement(q, { group: v, render: n }),
+        !o && v && d.length !== 0 && /* @__PURE__ */ c.createElement(q, { group: v, render: a }),
         this.renderList(),
-        a && /* @__PURE__ */ c.createElement(
+        n && /* @__PURE__ */ c.createElement(
           "div",
           {
             className: S(
@@ -541,7 +543,7 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
               this.props.footerClassName
             )
           },
-          a
+          n
         )
       ),
       this.showLicenseWatermark && /* @__PURE__ */ c.createElement(pt, { message: this.licenseMessage })
@@ -550,15 +552,15 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
   renderList() {
     const s = this.base, t = $(this), {
       textField: e,
-      dataItemKey: a,
+      dataItemKey: n,
       listNoDataRender: r,
       itemRender: l,
       groupHeaderItemRender: o,
       virtual: p = { skip: 0, total: void 0 },
-      unstyled: n
-    } = this.props, i = I(this.props), d = s.getPopupSettings(), h = s.vs, f = p.skip, b = this.props.opened !== void 0 ? this.props.opened : this.state.opened, y = `translateY(${h.translate}px)`, v = b ? this.getFocusedIndex(this.hasDuplicates) : void 0, g = this.props.filter !== void 0 ? this.props.filter : this.state.text, u = D(this.value, e), C = k(g) && g !== u ? null : this.value, M = this.props.list || xt, T = n && n.uComboBox;
+      unstyled: a
+    } = this.props, i = I(this.props), d = s.getPopupSettings(), h = s.vs, m = p.skip, b = this.props.opened !== void 0 ? this.props.opened : this.state.opened, y = `translateY(${h.translate}px)`, v = b ? this.getFocusedIndex(this.hasDuplicates) : void 0, g = this.props.filter !== void 0 ? this.props.filter : this.state.text, u = k(this.value, e), C = D(g) && g !== u ? null : this.value, T = this.props.list || xt, O = a && a.uComboBox;
     return /* @__PURE__ */ c.createElement(
-      M,
+      T,
       {
         id: s.listBoxId,
         virtual: !!p,
@@ -567,30 +569,30 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
         focusedIndex: v,
         value: C,
         textField: e,
-        valueField: a,
+        valueField: n,
         groupField: this.props.groupField,
         isMultiColumn: this.props.isMultiColumn,
         optionsGuid: s.guid,
         hasDuplicates: this.hasDuplicates,
         ariaLabel: t.toLanguageString(j, R[j]),
-        listRef: (O) => {
-          h.list = this.base.list = O, this.itemHeight = 0;
+        listRef: (M) => {
+          h.list = this.base.list = M, this.itemHeight = 0;
         },
         wrapperStyle: this.mobileMode ? {} : { maxHeight: d.height },
         wrapperCssClass: S(
           F.listContent({
-            c: T,
+            c: O,
             virtual: p
           })
         ),
         listStyle: h.enabled ? { transform: y } : void 0,
         key: "listkey",
-        skip: f,
+        skip: m,
         onClick: this.handleItemClick,
         itemRender: l,
         groupHeaderItemRender: o,
         noDataRender: r,
-        onMouseDown: (O) => O.preventDefault(),
+        onMouseDown: (M) => M.preventDefault(),
         onScroll: this.onScroll,
         wrapperRef: h.scrollerRef,
         scroller: this.base.renderScrollElement(),
@@ -600,16 +602,16 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
   }
   renderSearchBar(s, t, e) {
     const {
-      tabIndex: a,
+      tabIndex: n,
       accessKey: r,
       disabled: l,
       title: o,
       ariaLabelledBy: p,
-      ariaDescribedBy: n,
+      ariaDescribedBy: a,
       dataItemKey: i,
       virtual: d = { skip: 0 },
       unstyled: h,
-      inputAttributes: f
+      inputAttributes: m
     } = this.props;
     I(this.props);
     const b = this.props.opened !== void 0 ? this.props.opened : this.state.opened, y = b ? this.getFocusedIndex(this.hasDuplicates) : -1;
@@ -619,7 +621,7 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
         id: t,
         readOnly: b && this.mobileMode,
         placeholder: e,
-        tabIndex: a,
+        tabIndex: n,
         accessKey: r,
         title: o,
         value: s + this._suggested,
@@ -639,12 +641,12 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
         role: "combobox",
         ariaLabelledBy: p,
         ariaLabel: this.props.ariaLabel,
-        ariaDescribedBy: n,
+        ariaDescribedBy: a,
         ariaRequired: this.required,
         render: this.props.valueRender,
         ariaControls: b ? this.base.listBoxId : void 0,
         unstyled: h,
-        inputAttributes: f
+        inputAttributes: m
       }
     );
   }
@@ -656,17 +658,17 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
   }
   triggerOnChange(s, t) {
     const e = this.value;
-    !this.hasDuplicates && (!k(e) && !k(s) || w(e, s, this.props.dataItemKey)) || (this.props.value === void 0 && (t.data.value = s), this._valueDuringOnChange = s, t.events.push({ type: "onChange" }));
+    !this.hasDuplicates && (!D(e) && !D(s) || w(e, s, this.props.dataItemKey)) || (this.props.value === void 0 && (t.data.value = s), this._valueDuringOnChange = s, t.events.push({ type: "onChange" }));
   }
   getFocusedIndex(s) {
     const t = this.value, {
       textField: e,
-      dataItemKey: a,
+      dataItemKey: n,
       virtual: r = { skip: 0 },
       focusedItemIndex: l = N,
       skipDisabledItems: o
-    } = this.props, p = I(this.props), n = this.props.filter ? this.props.filter : this.state.text;
-    return s && this.navigationIndex !== void 0 ? this.navigationIndex : k(t) && n === void 0 ? p.findIndex((i) => w(i, t, a)) : n ? l(p, n, e) : o && e && !n && r.skip === 0 ? p.findIndex((i) => !i.disabled) : r.skip === 0 ? 0 : -1;
+    } = this.props, p = I(this.props), a = this.props.filter ? this.props.filter : this.state.text;
+    return s && this.navigationIndex !== void 0 ? this.navigationIndex : D(t) && a === void 0 ? p.findIndex((i) => w(i, t, n)) : a ? l(p, a, e) : o && e && !a && r.skip === 0 ? p.findIndex((i) => !i.disabled) : r.skip === 0 ? 0 : -1;
   }
   suggestValue(s) {
     const { data: t, textField: e } = this.props;
@@ -682,30 +684,30 @@ const Dt = "Please enter a valid value!", E = class E extends c.Component {
 };
 E.displayName = "ComboBox", E.propTypes = {
   ...P.propTypes,
-  size: m.oneOf(["small", "medium", "large"]),
-  rounded: m.oneOf(["small", "medium", "large", "full", "none"]),
-  fillMode: m.oneOf(["solid", "flat", "outline"]),
-  dataItemKey: m.string,
-  groupField: m.string,
-  isMultiColumn: m.bool,
-  suggest: m.bool,
-  placeholder: m.string,
-  title: m.string,
-  allowCustom: m.bool,
-  ignoreCase: m.bool,
-  clearButton: m.bool,
-  iconClassName: m.string,
+  size: f.oneOf(["small", "medium", "large"]),
+  rounded: f.oneOf(["small", "medium", "large", "full", "none"]),
+  fillMode: f.oneOf(["solid", "flat", "outline"]),
+  dataItemKey: f.string,
+  groupField: f.string,
+  isMultiColumn: f.bool,
+  suggest: f.bool,
+  placeholder: f.string,
+  title: f.string,
+  allowCustom: f.bool,
+  ignoreCase: f.bool,
+  clearButton: f.bool,
+  iconClassName: f.string,
   svgIcon: nt,
-  validationMessage: m.string,
-  required: m.bool,
-  id: m.string,
-  ariaLabelledBy: m.string,
-  ariaLabel: m.string,
-  ariaDescribedBy: m.string,
-  list: m.any,
-  valueRender: m.func,
-  skipDisabledItems: m.bool,
-  inputAttributes: m.object
+  validationMessage: f.string,
+  required: f.bool,
+  id: f.string,
+  ariaLabelledBy: f.string,
+  ariaLabel: f.string,
+  ariaDescribedBy: f.string,
+  list: f.any,
+  valueRender: f.func,
+  skipDisabledItems: f.bool,
+  inputAttributes: f.object
 }, E.defaultProps = {
   ...P.defaultProps,
   size: void 0,