@progress/kendo-react-dropdowns 14.4.1-develop.13 → 14.4.1-develop.15

package/ComboBox/ComboBox.mjs

@@ -25,33 +25,33 @@ import { provideLocalizationService as U } from "@progress/kendo-react-intl";
 import { ActionSheetContent as Ct } from "@progress/kendo-react-layout";
 import j from "../common/withCustomComponent.mjs";
 import { AdaptiveMode as St } from "../common/AdaptiveMode.mjs";
-const Ft = "Please enter a valid value!", M = class M extends u.Component {
+const Ft = "Please enter a valid value!", E = class E extends u.Component {
   constructor(s) {
     super(s), this.state = {}, this.base = new _(this), this._element = null, this._suggested = "", this._skipBlur = !1, this._input = null, this._adaptiveFilterInput = null, this._skipFocus = !1, this.itemHeight = 0, this.duplicates = [], this.hasDuplicates = !1, this.scrollToFocused = !1, this.showLicenseWatermark = !1, this.focus = () => {
       this._input && this._input.focus();
     }, 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 i = this.props.data;
-        this.duplicates = ut(i), this.hasDuplicates = this.duplicates.length > 0;
+        const a = this.props.data;
+        this.duplicates = ut(a), this.hasDuplicates = this.duplicates.length > 0;
       }
     }, this.handleKendoPasteValue = (t) => {
-      const { data: e, textField: i, allowCustom: r } = this.props;
+      const { data: e, textField: a, allowCustom: r } = this.props;
       if (!e)
         return;
-      const n = t != null ? String(t) : "", a = P(e, n, i, !1, !0), p = a !== -1;
-      let l = null;
-      if (p ? l = e[a] : r && (l = i ? { [i]: n } : n), l === null)
+      const l = t != null ? String(t) : "", o = P(e, l, a, !1, !0), p = o !== -1;
+      let n = null;
+      if (p ? n = e[o] : r && (n = a ? { [a]: l } : l), n === null)
         return;
-      const o = this.base.initState();
-      o.syntheticEvent = {
+      const i = this.base.initState();
+      i.syntheticEvent = {
         target: this._element,
         currentTarget: this._element,
         nativeEvent: new Event("change", { bubbles: !0 })
-      }, this.state.text !== void 0 && (o.data.text = void 0), this.triggerOnChange(l, o), this.applyState(o);
+      }, this.state.text !== void 0 && (i.data.text = void 0), this.triggerOnChange(n, i), this.applyState(i);
     }, this.handleItemSelect = (t, e) => {
-      const { virtual: i, dataItemKey: r } = this.props, n = y(this.props), a = i ? i.skip : 0, p = n[t - a], l = this.hasDuplicates || !D(p, this.value, r);
-      this.triggerOnChange(p, e), this.state.text !== void 0 && (e.data.text = void 0), l && this.base.triggerPageChangeCornerItems(p, e);
+      const { virtual: a, dataItemKey: r } = this.props, l = y(this.props), o = a ? a.skip : 0, p = l[t - o], n = this.hasDuplicates || !D(p, this.value, r);
+      this.triggerOnChange(p, e), this.state.text !== void 0 && (e.data.text = void 0), n && 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 Ft = "Please enter a valid value!", M = class M extends u.Component {
       this._element = t, this.base.wrapper = t;
     }, this.toggleBtnClick = (t) => {
       this._skipFocus = !0;
-      const { skipDisabledItems: e, textField: i } = this.props, r = y(this.props), n = this.getFocusedIndex(), a = this.getCurrentValueDisabledStatus(i, r, n), p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, l = this.base.initState();
-      if (l.syntheticEvent = t, !e && i && a && this.clearValueOnToggleBtnClick(t), this.base.togglePopup(l), !p && this.mobileMode) {
-        const o = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
-        this.base.filterChanged(o, l);
+      const { skipDisabledItems: e, textField: a } = this.props, r = y(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 i = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
+        this.base.filterChanged(i, n);
       }
-      this.applyState(l), setTimeout(() => {
+      this.applyState(n), 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 = w(this.value, this.props.textField), i = k(t) ? t : e;
+      const t = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, e = w(this.value, this.props.textField), a = k(t) ? t : e;
       return /* @__PURE__ */ u.createElement(
         bt,
         {
-          value: i,
+          value: a,
           ref: (r) => {
             this._adaptiveFilterInput = r && r.element;
           },
@@ -88,23 +88,23 @@ const Ft = "Please enter a valid value!", M = class M extends u.Component {
         }
       );
     }, this.listContainerContent = () => {
-      const { header: t, footer: e, size: i, groupStickyHeaderItemRender: r, groupField: n, list: a, unstyled: p, virtual: l } = this.props, o = y(this.props), d = p && p.uComboBox;
+      const { header: t, footer: e, size: a, groupStickyHeaderItemRender: r, groupField: l, list: o, unstyled: p, virtual: n } = this.props, i = y(this.props), d = p && p.uComboBox;
       let { group: h } = this.state;
-      return h === void 0 && n !== void 0 && (h = w(o[0], n)), /* @__PURE__ */ u.createElement(
+      return h === void 0 && l !== void 0 && (h = w(i[0], l)), /* @__PURE__ */ u.createElement(
         "div",
         {
           className: S(
             F.list({
               c: d,
-              list: a,
+              list: o,
               size: "large",
-              tableSize: i,
-              virtual: l
+              tableSize: a,
+              virtual: n
             })
           )
         },
         t && /* @__PURE__ */ u.createElement("div", { className: S(F.listHeader({ c: d })) }, t),
-        !a && h && o.length !== 0 && /* @__PURE__ */ u.createElement(z, { group: h, render: r }),
+        !o && h && i.length !== 0 && /* @__PURE__ */ u.createElement(z, { group: h, render: r }),
         this.renderList(),
         e && /* @__PURE__ */ u.createElement(
           "div",
@@ -118,100 +118,100 @@ const Ft = "Please enter a valid value!", M = class M extends u.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: i } = this.base;
+      const { vs: e, list: a } = this.base;
       e.scrollHandler(t);
       const { groupField: r } = this.props;
       this.props.onListScroll && this.props.onListScroll(t);
-      let n = y(this.props);
-      if (!r || !n.length)
+      let l = y(this.props);
+      if (!r || !l.length)
         return;
-      const a = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : i ? i.children[0].offsetHeight : 0), l = t.target.scrollTop - e.skip * a;
-      n = this.base.getGroupedDataModernMode(n, r);
-      let o = n[0][r];
-      for (let d = 1; d < n.length && !(a * d > l); d++)
-        n[d] && n[d][r] && (o = n[d][r]);
-      o !== this.state.group && (this.setState({
-        group: o
-      }), this.props.onGroupScroll && this.props.onGroupScroll.call(void 0, { group: o }));
+      const o = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : a ? a.children[0].offsetHeight : 0), n = 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++)
+        l[d] && l[d][r] && (i = l[d][r]);
+      i !== this.state.group && (this.setState({
+        group: i
+      }), this.props.onGroupScroll && this.props.onGroupScroll.call(void 0, { group: i }));
     }, this.handleItemClick = (t, e) => {
       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: i } = this.props, r = y(this.props), n = this.getFocusedIndex(), p = !(n === -1) && this.getCurrentValueDisabledStatus(i, r, n);
-        e.data.focused = !1, e.events.push({ type: "onBlur" }), e.syntheticEvent = t, i && p && this.clearValueOnBlur(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, e);
+        const e = this.base.initState(), { textField: a } = this.props, r = y(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);
       }
     }, this.onInputClick = (t) => {
-      const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = 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, a = 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(i, r), this.applyState(r);
+        r.syntheticEvent = t, this.base.togglePopup(r), this.base.filterChanged(a, r), this.applyState(r);
       }
     }, this.onInputKeyDown = (t) => {
-      const { skipDisabledItems: e, textField: i, dataItemKey: r, groupField: n } = this.props, a = y(this.props), p = this.value, l = Math.max(
+      const { skipDisabledItems: e, textField: a, dataItemKey: r, groupField: l } = this.props, o = y(this.props), p = this.value, n = Math.max(
         0,
-        a.findIndex((g) => D(g, p, r))
-      ), o = t.keyCode, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
-      if (h.syntheticEvent = t, !t.altKey && (o === I.up || o === I.down)) {
-        if (t.preventDefault(), n !== "" && i)
+        o.findIndex((g) => D(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 === I.up || i === I.down)) {
+        if (t.preventDefault(), l !== "" && a)
           if (!this.props.skipDisabledItems && d)
-            this.onNavigate(h, o);
+            this.onNavigate(h, i);
           else {
             let g = 0;
-            if (o === I.down || o === I.right) {
-              const c = a.slice(l + 1 < a.length ? l + 1 : l).find((v) => !v.disabled && v[i]);
-              g = c && a.findIndex((v) => v[i] === c[i]);
-            } else if (o === I.up || o === I.left) {
+            if (i === I.down || i === I.right) {
+              const c = o.slice(n + 1 < o.length ? n + 1 : n).find((x) => !x.disabled);
+              g = c && o.indexOf(c);
+            } else if (i === I.up || i === I.left) {
               let c;
-              if (l === 0)
-                c = a, g = a.findIndex((v) => !v.disabled && v[i]);
+              if (n === 0)
+                c = o, g = o.findIndex((x) => !x.disabled);
               else {
-                c = a.slice(0, l);
-                let v = c.pop();
-                for (; v && v.disabled; )
-                  v = c.pop();
-                g = v && a.findIndex((E) => E[i] === v[i]);
+                c = o.slice(0, n);
+                let x = c.pop();
+                for (; x && x.disabled; )
+                  x = c.pop();
+                g = x && o.indexOf(x);
               }
             }
             if (g !== void 0) {
-              const c = g - l;
-              this.onNavigate(h, o, c);
-            } else g === void 0 && a.findIndex((c) => c[i] === p[i]) === a.length - 1 && this.onNavigate(h, o);
+              const c = g - n;
+              this.onNavigate(h, i, c);
+            } else g === void 0 && n === o.length - 1 && this.onNavigate(h, i);
           }
         else if (!this.props.skipDisabledItems && d)
-          this.onNavigate(h, o);
+          this.onNavigate(h, i);
         else {
           let g = null;
-          if (o === I.down || o === I.right)
-            g = a.slice(l + 1).find((c) => !c.disabled);
-          else if (o === I.up || o === I.left) {
-            const c = a.slice(0, l);
+          if (i === I.down || i === I.right)
+            g = o.slice(n + 1).find((c) => !c.disabled);
+          else if (i === I.up || i === I.left) {
+            const c = o.slice(0, n);
             for (g = c.pop(); g && g.disabled; )
               g = c.pop();
           }
           if (g) {
-            const c = g.id - l - 1;
-            this.onNavigate(h, o, c);
+            const c = g.id - n - 1;
+            this.onNavigate(h, i, c);
           } else
-            this.onNavigate(h, o);
+            this.onNavigate(h, i);
         }
         this.applyState(h);
       }
-      const b = () => {
+      const v = () => {
         t.preventDefault(), this.base.togglePopup(h), this.applyState(h);
-      }, C = this.getFocusedIndex(), x = C === -1, f = !x && this.getCurrentValueDisabledStatus(i, a, C);
-      d ? o === I.pageUp ? (t.preventDefault(), this.base.scrollPopupByPageSize(-1)) : o === I.pageDown ? (t.preventDefault(), this.base.scrollPopupByPageSize(1)) : t.altKey && o === I.up ? b() : o === I.enter ? (t.preventDefault(), (i && !x && t.currentTarget.value ? a[C][i] : void 0) ? !e && i && f ? this.clearValueOnEnterOrEsc(t) : f || this.applyValueOnEnter(t.currentTarget.value, h) : this.applyValueOnEnter(t.currentTarget.value, h)) : o === I.esc && (!e && i && f && this.clearValueOnEnterOrEsc(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, h)) : !d && o === I.esc ? this.clearValueOnEnterOrEsc(t) : t.altKey && o === I.down && b();
+      }, C = this.getFocusedIndex(), b = C === -1, f = !b && this.getCurrentValueDisabledStatus(a, o, C);
+      d ? i === I.pageUp ? (t.preventDefault(), this.base.scrollPopupByPageSize(-1)) : i === I.pageDown ? (t.preventDefault(), this.base.scrollPopupByPageSize(1)) : t.altKey && i === I.up ? v() : i === I.enter ? (t.preventDefault(), (a && !b && t.currentTarget.value ? o[C][a] : void 0) ? !e && a && f ? this.clearValueOnEnterOrEsc(t) : f || this.applyValueOnEnter(t.currentTarget.value, h) : this.applyValueOnEnter(t.currentTarget.value, h)) : i === I.esc && (!e && a && f && this.clearValueOnEnterOrEsc(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, h)) : !d && i === I.esc ? this.clearValueOnEnterOrEsc(t) : t.altKey && i === I.down && v();
     }, this.inputOnChange = (t) => {
       const e = this.base.initState();
       e.syntheticEvent = t;
-      const i = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = t.currentTarget, n = r.value;
+      const a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = t.currentTarget, l = r.value;
       if (this.props.suggest) {
-        const a = r.selectionEnd === n.length;
+        const o = r.selectionEnd === l.length;
         let p = this.props.filter !== void 0 ? this.props.filter : this.state.text;
         k(p) || (p = w(this.value, this.props.textField) || "");
-        const l = p && p === n, o = p && p.length > n.length;
-        l || o || !a ? this._suggested = "" : this.suggestValue(n);
+        const n = p && p === l, i = p && p.length > l.length;
+        n || i || !o ? this._suggested = "" : this.suggestValue(l);
       }
-      this.props.filter === void 0 && (e.data.text = n), this.state.focusedItem !== void 0 && (e.data.focusedItem = void 0), i ? this.scrollToFocused = !0 : this.base.togglePopup(e), this.base.filterChanged(n, 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), a ? 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();
@@ -273,7 +273,7 @@ const Ft = "Please enter a valid value!", M = class M extends u.Component {
    */
   get index() {
     const { dataItemKey: s } = this.props, t = y(this.props), e = this.value;
-    return t.findIndex((i) => D(i, e, s));
+    return t.findIndex((a) => D(a, e, s));
   }
   /**
    * Gets the `name` property of the ComboBox.
@@ -293,30 +293,30 @@ const Ft = "Please enter a valid value!", M = class M extends u.Component {
     };
   }
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : M.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : E.defaultProps.validityStyles;
   }
   /** @hidden */
   get required() {
-    return this.props.required !== void 0 ? this.props.required : M.defaultProps.required;
+    return this.props.required !== void 0 ? this.props.required : E.defaultProps.required;
   }
   /** @hidden */
   componentDidUpdate(s, t) {
-    var b, C;
-    const { dataItemKey: e, virtual: i, groupField: r = "", textField: n } = this.props, a = y(this.props), p = s.virtual ? s.virtual.total : 0, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, o = s.opened !== void 0 ? s.opened : t.opened;
-    s.data !== a && this.checkForDuplicatePlainTextRecords();
-    const d = !o && l, h = this.value;
-    if (this._valueOnDidUpdate = h, this.base.didUpdate(), i && i.total !== p)
+    var v, C;
+    const { dataItemKey: e, virtual: a, groupField: r = "", textField: l } = this.props, o = y(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;
+    s.data !== o && this.checkForDuplicatePlainTextRecords();
+    const d = !i && n, h = this.value;
+    if (this._valueOnDidUpdate = h, this.base.didUpdate(), a && a.total !== p)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
-      const x = s.value !== void 0 ? s.value : t.value;
-      let f = this.hasDuplicates ? this.navigationIndex || 0 : a.findIndex((c) => D(c, h, e));
-      n && h && (f = (b = this.base.getGroupedDataModernMode(a, r)) == null ? void 0 : b.map((c) => c[n]).indexOf(h[n]));
-      const g = !D(x, h, e);
-      if (d && i ? this.base.scrollToVirtualItem(i, f) : d && !i ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][r], this), this.base.scrollToItem(f)) : (this.hasDuplicates || l && o && h && g) && this.base.scrollToItem(f), l && o && this.scrollToFocused) {
+      const b = s.value !== void 0 ? s.value : t.value;
+      let f = this.hasDuplicates ? this.navigationIndex || 0 : o.findIndex((c) => D(c, h, e));
+      l && h && (f = (v = this.base.getGroupedDataModernMode(o, r)) == null ? void 0 : v.map((c) => c[l]).indexOf(h[l]));
+      const g = !D(b, h, e);
+      if (d && a ? this.base.scrollToVirtualItem(a, f) : d && !a ? (this.onPopupOpened(), o && o.length !== 0 && this.base.resetGroupStickyHeader(o[0][r], this), this.base.scrollToItem(f)) : (this.hasDuplicates || n && i && h && g) && this.base.scrollToItem(f), n && i && this.scrollToFocused) {
         const c = (C = this.props.filter ? this.props.filter : this.state.text) != null ? C : "";
         if (c) {
-          const { focusedItemIndex: v = L } = this.props, E = v(a, c, n);
-          this.base.scrollToItem(E);
+          const { focusedItemIndex: x = L } = this.props, M = x(o, c, l);
+          this.base.scrollToItem(M);
         } else
           this.base.scrollToItem(0);
       }
@@ -350,49 +350,49 @@ const Ft = "Please enter a valid value!", M = class M extends u.Component {
       W[G]
     ), {
       dir: e,
-      disabled: i,
-      clearButton: r = M.defaultProps.clearButton,
-      label: n,
-      textField: a,
+      disabled: a,
+      clearButton: r = E.defaultProps.clearButton,
+      label: l,
+      textField: o,
       className: p,
-      style: l,
-      loading: o,
+      style: n,
+      loading: i,
       iconClassName: d,
       virtual: h,
-      size: b,
+      size: v,
       rounded: C,
-      fillMode: x,
+      fillMode: b,
       opened: f = this.state.opened,
       placeholder: g,
       svgIcon: c,
-      unstyled: v
-    } = this.props, E = !this.validityStyles || this.validity.valid, T = this.props.filter !== void 0 ? this.props.filter : this.state.text, $ = w(this.value, a), V = k(T) ? T : $, Y = r && (!!V || k(this.value)), O = this.base.vs, R = this.props.id || this._inputId, B = v && v.uComboBox;
-    O.enabled = h !== void 0, h !== void 0 && (O.skip = h.skip, O.total = h.total, O.pageSize = h.pageSize);
+      unstyled: x
+    } = this.props, M = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, $ = w(this.value, o), V = k(O) ? O : $, Y = r && (!!V || k(this.value)), T = this.base.vs, R = this.props.id || this._inputId, B = x && x.uComboBox;
+    T.enabled = h !== void 0, h !== void 0 && (T.skip = h.skip, T.total = h.total, T.pageSize = h.pageSize);
     const [J, Q] = j(this.props.prefix || u.Fragment), [X, Z] = j(this.props.suffix || u.Fragment), K = /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
       "span",
       {
         className: S(
           F.wrapper({
             c: B,
-            size: b,
+            size: v,
             rounded: C,
-            fillMode: x,
-            disabled: i,
-            invalid: !E,
-            loading: o,
+            fillMode: b,
+            disabled: a,
+            invalid: !M,
+            loading: i,
             required: this.required
           }),
           p
         ),
         ref: this.componentRef,
-        style: n ? { ...l, width: void 0 } : l,
+        style: l ? { ...n, width: void 0 } : n,
         dir: e,
         onFocus: this.handleFocus
       },
       this.props.prefix && /* @__PURE__ */ u.createElement(J, { ...Q }),
       this.renderSearchBar(V || "", R, g),
-      Y && !o && /* @__PURE__ */ u.createElement(xt, { onClick: this.clearButtonClick, key: "clearbutton" }),
-      o && /* @__PURE__ */ u.createElement(
+      Y && !i && /* @__PURE__ */ u.createElement(xt, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      i && /* @__PURE__ */ u.createElement(
         dt,
         {
           className: S(F.loadingIcon({ c: B })),
@@ -409,8 +409,8 @@ const Ft = "Please enter a valid value!", M = class M extends u.Component {
           "aria-label": f ? t : s,
           svgIcon: c || (d ? void 0 : yt),
           iconClass: d,
-          size: b,
-          fillMode: x,
+          size: v,
+          fillMode: b,
           className: S(F.inputButton({ c: B })),
           onClick: this.toggleBtnClick,
           onMouseDown: (tt) => tt.preventDefault()
@@ -418,37 +418,37 @@ const Ft = "Please enter a valid value!", M = class M extends u.Component {
       ),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
-    return n ? /* @__PURE__ */ u.createElement(
+    return l ? /* @__PURE__ */ u.createElement(
       ct,
       {
-        label: n,
+        label: l,
         editorId: R,
         editorValue: V,
-        editorValid: E,
-        editorDisabled: i,
-        style: { width: l ? l.width : void 0 },
+        editorValid: M,
+        editorDisabled: a,
+        style: { width: n ? n.width : void 0 },
         children: K,
-        unstyled: v
+        unstyled: x
       }
     ) : K;
   }
   /** @hidden */
   onNavigate(s, t, e) {
-    const { virtual: i = { skip: 0 } } = this.props, r = y(this.props), n = this.props.filter ? this.props.filter : this.state.text;
-    let a = -1, p;
-    const l = this.base.vs, o = this.value;
+    const { virtual: a = { skip: 0 } } = this.props, r = y(this.props), l = this.props.filter ? this.props.filter : this.state.text;
+    let o = -1, p;
+    const n = this.base.vs, i = this.value;
     this._suggested = "";
-    const d = this.hasDuplicates && this.duplicates.indexOf(o) !== -1;
-    if (a = this.getFocusedIndex(d), a !== -1 && !k(o))
-      this.handleItemSelect(a, s);
-    else if (n === "")
+    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 === "")
       this.handleItemSelect(0, s);
     else {
-      const h = i.skip + a;
+      const h = a.skip + o;
       p = this.base.navigation.navigate({
         keyCode: t,
         current: h,
-        max: (l.enabled ? l.total : r.length) - 1,
+        max: (n.enabled ? n.total : r.length) - 1,
         min: 0,
         skipItems: e || void 0
       }), p !== void 0 && this.handleItemSelect(p, s);
@@ -459,57 +459,57 @@ const Ft = "Please enter a valid value!", M = class M extends u.Component {
     return s && t && t[e] && t[e].disabled;
   }
   applyValueOnEnter(s, t) {
-    const { textField: e, allowCustom: i, ignoreCase: r } = this.props, n = y(this.props), a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, l = w(this.value, e) === s ? this.index : P(n, s, e, !1, r), o = l !== -1;
+    const { textField: e, allowCustom: a, ignoreCase: r } = this.props, l = y(this.props), o = this.props.opened !== void 0 ? this.props.opened : this.state.opened, n = w(this.value, e) === s ? this.index : P(l, s, e, !1, r), i = n !== -1;
     let d;
-    if (this._suggested = "", o)
-      d = n[l];
-    else if (i)
+    if (this._suggested = "", i)
+      d = l[n];
+    else if (a)
       d = e !== void 0 ? { [e]: s } : s;
     else
       return this.selectFocusedItem(s, t);
-    this.triggerOnChange(d, t), a && this.base.togglePopup(t), this.props.filter === void 0 && this.state.text !== void 0 && (t.data.text = void 0), this.applyState(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: i, ignoreCase: r } = this.props, n = y(this.props), a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = w(this.value, e);
+    const { textField: e, allowCustom: a, ignoreCase: r } = this.props, l = y(this.props), o = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = w(this.value, e);
     if (this._suggested = "", s === p || s === "" && !k(p))
-      return this.closeOpenedApplyStateNonMobileMode(t, a), this.applyState(t);
-    const l = P(n, s, e, !0, r), o = l !== -1;
+      return this.closeOpenedApplyStateNonMobileMode(t, o), this.applyState(t);
+    const n = P(l, s, e, !0, r), i = n !== -1;
     let d = null;
-    o ? d = n[l] : i && (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, a), this.applyState(t);
+    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);
   }
   selectFocusedItem(s, t) {
-    const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: i, virtual: r = { skip: 0 }, focusedItemIndex: n = L } = this.props, a = y(this.props), p = r.skip, l = s === "" && p === 0 ? 0 : n(a, s, i);
-    return l !== -1 ? this.handleItemSelect(l + 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: a, virtual: r = { skip: 0 }, focusedItemIndex: l = L } = this.props, o = y(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);
   }
   renderAdaptiveListContainer() {
-    const { windowWidth: s = 0 } = this.state, { groupField: t, adaptiveTitle: e = this.props.label, adaptiveSubtitle: i } = this.props, r = y(this.props), n = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
-    let { group: a } = this.state;
-    a === void 0 && t !== void 0 && (a = w(r[0], t));
+    const { windowWidth: s = 0 } = this.state, { groupField: t, adaptiveTitle: e = this.props.label, adaptiveSubtitle: a } = this.props, r = y(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 = w(r[0], t));
     const p = {
       title: e || this.props.label,
-      subTitle: i,
-      expand: n,
-      onClose: (l) => this.toggleBtnClick(l),
+      subTitle: a,
+      expand: l,
+      onClose: (n) => this.toggleBtnClick(n),
       windowWidth: s,
       mobileFilter: this.renderMobileListFilter()
     };
     return /* @__PURE__ */ u.createElement(St, { ...p }, /* @__PURE__ */ u.createElement(Ct, null, /* @__PURE__ */ u.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
   }
   renderListContainer() {
-    const s = this.base, { dir: t, header: e, footer: i, groupField: r, size: n, list: a, virtual: p, groupStickyHeaderItemRender: l, unstyled: o } = this.props, d = y(this.props), h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = s.getPopupSettings(), C = b.width !== void 0 ? b.width : s.popupWidth, x = o && o.uComboBox;
+    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 = y(this.props), h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, v = s.getPopupSettings(), C = v.width !== void 0 ? v.width : s.popupWidth, b = i && i.uComboBox;
     let { group: f } = this.state;
     return f === void 0 && r !== void 0 && (f = w(d[0], r)), /* @__PURE__ */ u.createElement(
       ft,
       {
         width: C,
         popupSettings: {
-          ...b,
-          anchor: b.anchor || this.element,
+          ...v,
+          anchor: v.anchor || this.element,
           show: h,
           popupClass: S(
-            b.popupClass,
+            v.popupClass,
             F.listContainer({
-              c: x,
+              c: b,
               popup: !0
             })
           )
@@ -522,26 +522,26 @@ const Ft = "Please enter a valid value!", M = class M extends u.Component {
         {
           className: S(
             F.list({
-              c: x,
-              list: a,
-              size: n,
-              tableSize: n,
+              c: b,
+              list: o,
+              size: l,
+              tableSize: l,
               virtual: p
             })
           )
         },
-        e && /* @__PURE__ */ u.createElement("div", { className: S(F.listHeader({ c: x })) }, e),
-        !a && f && d.length !== 0 && /* @__PURE__ */ u.createElement(z, { group: f, render: l }),
+        e && /* @__PURE__ */ u.createElement("div", { className: S(F.listHeader({ c: b })) }, e),
+        !o && f && d.length !== 0 && /* @__PURE__ */ u.createElement(z, { group: f, render: n }),
         this.renderList(),
-        i && /* @__PURE__ */ u.createElement(
+        a && /* @__PURE__ */ u.createElement(
           "div",
           {
             className: S(
-              F.listFooter({ c: x }),
+              F.listFooter({ c: b }),
               this.props.footerClassName
             )
           },
-          i
+          a
         )
       ),
       this.showLicenseWatermark && /* @__PURE__ */ u.createElement(ht, { message: this.licenseMessage })
@@ -551,20 +551,20 @@ const Ft = "Please enter a valid value!", M = class M extends u.Component {
     const s = this.base, {
       textField: t,
       dataItemKey: e,
-      listNoDataRender: i,
+      listNoDataRender: a,
       itemRender: r,
-      groupHeaderItemRender: n,
-      virtual: a = { skip: 0, total: void 0 },
+      groupHeaderItemRender: l,
+      virtual: o = { skip: 0, total: void 0 },
       unstyled: p
-    } = this.props, l = y(this.props), o = s.getPopupSettings(), d = s.vs, h = a.skip, b = this.props.opened !== void 0 ? this.props.opened : this.state.opened, C = `translateY(${d.translate}px)`, x = b ? this.getFocusedIndex(this.hasDuplicates) : void 0, f = this.props.filter !== void 0 ? this.props.filter : this.state.text, g = w(this.value, t), c = k(f) && f !== g ? null : this.value, v = this.props.list || vt, E = p && p.uComboBox;
+    } = this.props, n = y(this.props), i = s.getPopupSettings(), d = s.vs, h = o.skip, v = this.props.opened !== void 0 ? this.props.opened : this.state.opened, C = `translateY(${d.translate}px)`, b = v ? this.getFocusedIndex(this.hasDuplicates) : void 0, f = this.props.filter !== void 0 ? this.props.filter : this.state.text, g = w(this.value, t), c = k(f) && f !== g ? null : this.value, x = this.props.list || vt, M = p && p.uComboBox;
     return /* @__PURE__ */ u.createElement(
-      v,
+      x,
       {
         id: s.listBoxId,
-        virtual: !!a,
-        show: b,
-        data: l,
-        focusedIndex: x,
+        virtual: !!o,
+        show: v,
+        data: n,
+        focusedIndex: b,
         value: c,
         textField: t,
         valueField: e,
@@ -572,14 +572,14 @@ const Ft = "Please enter a valid value!", M = class M extends u.Component {
         isMultiColumn: this.props.isMultiColumn,
         optionsGuid: s.guid,
         hasDuplicates: this.hasDuplicates,
-        listRef: (T) => {
-          d.list = this.base.list = T, this.itemHeight = 0;
+        listRef: (O) => {
+          d.list = this.base.list = O, this.itemHeight = 0;
         },
-        wrapperStyle: this.mobileMode ? {} : { maxHeight: o.height },
+        wrapperStyle: this.mobileMode ? {} : { maxHeight: i.height },
         wrapperCssClass: S(
           F.listContent({
-            c: E,
-            virtual: a
+            c: M,
+            virtual: o
           })
         ),
         listStyle: d.enabled ? { transform: C } : void 0,
@@ -587,41 +587,41 @@ const Ft = "Please enter a valid value!", M = class M extends u.Component {
         skip: h,
         onClick: this.handleItemClick,
         itemRender: r,
-        groupHeaderItemRender: n,
-        noDataRender: i,
-        onMouseDown: (T) => T.preventDefault(),
+        groupHeaderItemRender: l,
+        noDataRender: a,
+        onMouseDown: (O) => O.preventDefault(),
         onScroll: this.onScroll,
         wrapperRef: d.scrollerRef,
         scroller: this.base.renderScrollElement(),
-        ariaSetSize: a.total
+        ariaSetSize: o.total
       }
     );
   }
   renderSearchBar(s, t, e) {
     const {
-      tabIndex: i,
+      tabIndex: a,
       accessKey: r,
-      disabled: n,
-      title: a,
+      disabled: l,
+      title: o,
       ariaLabelledBy: p,
-      ariaDescribedBy: l,
-      dataItemKey: o,
+      ariaDescribedBy: n,
+      dataItemKey: i,
       virtual: d = { skip: 0 },
       unstyled: h,
-      inputAttributes: b
-    } = this.props, C = y(this.props), x = this.props.opened !== void 0 ? this.props.opened : this.state.opened, f = this.value, g = Math.max(
+      inputAttributes: v
+    } = this.props, C = y(this.props), b = this.props.opened !== void 0 ? this.props.opened : this.state.opened, f = this.value, g = Math.max(
       0,
-      C.findIndex((c) => D(c, f, o))
+      C.findIndex((c) => D(c, f, i))
     );
-    return this._suggested && !D(this._valueOnDidUpdate, f, o) && (this._suggested = ""), /* @__PURE__ */ u.createElement(
+    return this._suggested && !D(this._valueOnDidUpdate, f, i) && (this._suggested = ""), /* @__PURE__ */ u.createElement(
       mt,
       {
         id: t,
-        readOnly: x && this.mobileMode,
+        readOnly: b && this.mobileMode,
         placeholder: e,
-        tabIndex: i,
+        tabIndex: a,
         accessKey: r,
-        title: a,
+        title: o,
         value: s + this._suggested,
         suggestedText: this._suggested,
         ref: (c) => {
@@ -632,19 +632,19 @@ const Ft = "Please enter a valid value!", M = class M extends u.Component {
         onChange: this.inputOnChange,
         onFocus: this.base.handleFocus,
         onBlur: this.handleBlur,
-        disabled: n,
-        expanded: x,
+        disabled: l,
+        expanded: b,
         owns: this.base.listBoxId,
         activedescendant: `option-${this.base.guid}-${g + d.skip}`,
         role: "combobox",
         ariaLabelledBy: p,
         ariaLabel: this.props.ariaLabel,
-        ariaDescribedBy: l,
+        ariaDescribedBy: n,
         ariaRequired: this.required,
         render: this.props.valueRender,
-        ariaControls: x ? this.base.listBoxId : void 0,
+        ariaControls: b ? this.base.listBoxId : void 0,
         unstyled: h,
-        inputAttributes: b
+        inputAttributes: v
       }
     );
   }
@@ -661,12 +661,12 @@ const Ft = "Please enter a valid value!", M = class M extends u.Component {
   getFocusedIndex(s) {
     const t = this.value, {
       textField: e,
-      dataItemKey: i,
+      dataItemKey: a,
       virtual: r = { skip: 0 },
-      focusedItemIndex: n = L,
-      skipDisabledItems: a
-    } = this.props, p = y(this.props), l = this.props.filter ? this.props.filter : this.state.text;
-    return s && this.navigationIndex !== void 0 ? this.navigationIndex : k(t) && l === void 0 ? p.findIndex((o) => D(o, t, i)) : l ? n(p, l, e) : a && e && !l && r.skip === 0 ? p.findIndex((o) => !o.disabled && o[e]) : r.skip === 0 ? 0 : -1;
+      focusedItemIndex: l = L,
+      skipDisabledItems: o
+    } = this.props, p = y(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) => D(i, t, a)) : n ? l(p, n, e) : o && e && !n && r.skip === 0 ? p.findIndex((i) => !i.disabled) : r.skip === 0 ? 0 : -1;
   }
   suggestValue(s) {
     const { data: t, textField: e } = this.props;
@@ -680,7 +680,7 @@ const Ft = "Please enter a valid value!", M = class M extends u.Component {
       this.setState({ windowWidth: t.target.clientWidth });
   }
 };
-M.displayName = "ComboBox", M.propTypes = {
+E.displayName = "ComboBox", E.propTypes = {
   ..._.propTypes,
   size: m.oneOf(["small", "medium", "large"]),
   rounded: m.oneOf(["small", "medium", "large", "full", "none"]),
@@ -706,7 +706,7 @@ M.displayName = "ComboBox", M.propTypes = {
   valueRender: m.func,
   skipDisabledItems: m.bool,
   inputAttributes: m.object
-}, M.defaultProps = {
+}, E.defaultProps = {
   ..._.defaultProps,
   size: void 0,
   rounded: void 0,
@@ -720,7 +720,7 @@ M.displayName = "ComboBox", M.propTypes = {
   prefix: void 0,
   suffix: void 0
 };
-let N = M;
+let N = E;
 const kt = at(), Dt = et(
   st(
     kt,