@progress/kendo-react-dropdowns 11.0.0-develop.3 → 11.0.0-develop.5

package/ComboBox/ComboBox.mjs

@@ -5,189 +5,228 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as c from "react";
-import v from "prop-types";
-import N from "../common/DropDownBase.mjs";
-import { Keys as C, validatePackage as ie, svgIconPropType as oe, canUseDOM as z, classNames as I, uComboBox as w, IconWrap as ae, uDropDownsActionSheet as B, WatermarkOverlay as ne, createPropsContext as le, withIdHOC as re, withPropsContext as de, withUnstyledHOC as pe, withAdaptiveModeContext as he } from "@progress/kendo-react-common";
-import { FloatingLabel as ce } from "@progress/kendo-react-labels";
-import { getPlainDataDuplicates as ue, getFilteredData as S, areSame as k, getItemValue as M, isPresent as D, getItemIndexByText as K, suggestValue as ge, itemIndexStartsWith as H } from "../common/utils.mjs";
-import me from "../common/SearchBar.mjs";
-import ve from "../common/ListContainer.mjs";
-import fe from "../common/List.mjs";
-import be from "../common/ListFilter.mjs";
-import W from "../common/GroupStickyHeader.mjs";
-import { packageMetadata as xe } from "../package-metadata.mjs";
-import Ie from "../common/ClearButton.mjs";
-import { Button as q } from "@progress/kendo-react-buttons";
-import { caretAltDownIcon as ye, xIcon as Ce } from "@progress/kendo-svg-icons";
-import { comboArrowBtnAriaLabelExpand as G, messages as U, comboArrowBtnAriaLabelCollapse as j } from "../messages/index.mjs";
-import { provideLocalizationService as $ } from "@progress/kendo-react-intl";
-import { ActionSheet as Se, ActionSheetHeader as we, ActionSheetContent as De } from "@progress/kendo-react-layout";
-import Y from "../common/withCustomComponent.mjs";
-const ke = "Please enter a valid value!", F = class F extends c.Component {
+import * as g from "react";
+import m from "prop-types";
+import _ from "../common/DropDownBase.mjs";
+import { classNames as S, uComboBox as k, Keys as y, validatePackage as tt, svgIconPropType as et, canUseDOM as R, IconWrap as st, WatermarkOverlay as it, createPropsContext as ot, withIdHOC as at, withPropsContext as nt, withUnstyledHOC as lt, withAdaptiveModeContext as rt } from "@progress/kendo-react-common";
+import { FloatingLabel as pt } from "@progress/kendo-react-labels";
+import { getPlainDataDuplicates as dt, getFilteredData as C, areSame as F, getItemValue as D, isPresent as w, getItemIndexByText as A, suggestValue as ht, itemIndexStartsWith as z } from "../common/utils.mjs";
+import ut from "../common/SearchBar.mjs";
+import ct from "../common/ListContainer.mjs";
+import gt from "../common/List.mjs";
+import mt from "../common/ListFilter.mjs";
+import K from "../common/GroupStickyHeader.mjs";
+import { packageMetadata as vt } from "../package-metadata.mjs";
+import ft from "../common/ClearButton.mjs";
+import { Button as bt } from "@progress/kendo-react-buttons";
+import { caretAltDownIcon as xt } from "@progress/kendo-svg-icons";
+import { comboArrowBtnAriaLabelExpand as H, messages as W, comboArrowBtnAriaLabelCollapse as q } from "../messages/index.mjs";
+import { provideLocalizationService as G } from "@progress/kendo-react-intl";
+import { ActionSheetContent as It } from "@progress/kendo-react-layout";
+import U from "../common/withCustomComponent.mjs";
+import { AdaptiveMode as yt } from "../common/AdaptiveMode.mjs";
+const Ct = "Please enter a valid value!", M = class M extends g.Component {
   constructor(s) {
-    super(s), this.state = {}, this.base = new N(this), this._element = null, this._suggested = "", this._skipBlur = !1, this._input = null, this._adaptiveFilterInput = null, this.itemHeight = 0, this.duplicates = [], this.hasDuplicates = !1, this.showLicenseWatermark = !1, this.focus = () => {
+    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.showLicenseWatermark = !1, this.focus = () => {
       this._input && this._input.focus();
     }, this.checkForDuplicatePlainTextRecords = () => {
-      const e = this.props.textField !== void 0, t = this.props.dataItemKey !== void 0;
-      if (this.props.data && this.props.data.length > 0 && !e && !t) {
+      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 = ue(i), this.hasDuplicates = this.duplicates.length > 0;
+        this.duplicates = dt(i), this.hasDuplicates = this.duplicates.length > 0;
       }
-    }, this.handleItemSelect = (e, t) => {
-      const { virtual: i, dataItemKey: n } = this.props, r = S(this.props), a = i ? i.skip : 0, d = r[e - a], l = this.hasDuplicates || !k(d, this.value, n);
-      this.triggerOnChange(d, t), this.state.text !== void 0 && (t.data.text = void 0), l && this.base.triggerPageChangeCornerItems(d, t);
+    }, this.handleItemSelect = (t, e) => {
+      const { virtual: i, dataItemKey: r } = this.props, l = C(this.props), a = i ? i.skip : 0, p = l[t - a], n = this.hasDuplicates || !F(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);
       }, 300);
-    }, this.componentRef = (e) => {
-      this._element = e, this.base.wrapper = e;
-    }, this.toggleBtnClick = (e) => {
-      const { skipDisabledItems: t, textField: i } = this.props, n = S(this.props), r = this.getFocusedIndex(), a = this.getCurrentValueDisabledStatus(i, n, r), d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, l = this.base.initState();
-      if (l.syntheticEvent = e, !t && i && a && this.clearValueOnToggleBtnClick(e), this.base.togglePopup(l), !d && this.mobileMode) {
+    }, this.componentRef = (t) => {
+      this._element = t, this.base.wrapper = t;
+    }, this.toggleBtnClick = (t) => {
+      this._skipFocus = !0;
+      const { skipDisabledItems: e, textField: i } = this.props, r = C(this.props), l = this.getFocusedIndex(), a = this.getCurrentValueDisabledStatus(i, r, l), p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, n = this.base.initState();
+      if (n.syntheticEvent = t, !e && i && a && this.clearValueOnToggleBtnClick(t), this.base.togglePopup(n), !p && this.mobileMode) {
         const o = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
-        this.base.filterChanged(o, l);
+        this.base.filterChanged(o, n);
       }
-      this.applyState(l);
-    }, this.closeOpenedApplyStateNonMobileMode = (e, t) => {
-      t && !this.mobileMode && this.base.togglePopup(e);
+      this.applyState(n), setTimeout(() => {
+        this._skipFocus = !1;
+      }, 300);
+    }, this.closeOpenedApplyStateNonMobileMode = (t, e) => {
+      e && !this.mobileMode && this.base.togglePopup(t);
     }, this.renderMobileListFilter = () => {
-      const e = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, t = M(this.value, this.props.textField), i = D(e) ? e : t;
-      return /* @__PURE__ */ c.createElement(
-        be,
+      const t = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, e = D(this.value, this.props.textField), i = w(t) ? t : e;
+      return /* @__PURE__ */ g.createElement(
+        mt,
         {
           value: i,
-          ref: (n) => {
-            this._adaptiveFilterInput = n && n.element;
+          ref: (r) => {
+            this._adaptiveFilterInput = r && r.element;
           },
           onChange: this.handleMobileFilterChange,
           onKeyDown: this.onInputKeyDown,
           size: "large",
           rounded: this.props.rounded,
-          fillMode: this.props.fillMode
+          fillMode: this.props.fillMode,
+          placeholder: this.props.placeholder
         }
       );
-    }, this.handleMobileFilterChange = (e) => {
-      const t = this.base.initState();
-      t.syntheticEvent = e.syntheticEvent, t.data.text = e.target.value, this.base.filterChanged(e.target.value, t), this.applyState(t);
-    }, this.onScroll = (e) => {
-      const { vs: t, list: i } = this.base;
-      t.scrollHandler(e);
-      const { groupField: n } = this.props;
-      let r = S(this.props);
-      if (!n || !r.length)
+    }, this.listContainerContent = () => {
+      const { header: t, footer: e, size: i, groupStickyHeaderItemRender: r, groupField: l, list: a, groupMode: p, unstyled: n, virtual: o } = this.props, h = C(this.props), d = n && n.uComboBox;
+      let { group: v } = this.state;
+      return v === void 0 && l !== void 0 && (v = D(h[0], l)), /* @__PURE__ */ g.createElement(
+        "div",
+        {
+          className: S(
+            k.list({
+              c: d,
+              list: a,
+              size: "large",
+              tableSize: i,
+              virtual: o
+            })
+          )
+        },
+        t && /* @__PURE__ */ g.createElement("div", { className: S(k.listHeader({ c: d })) }, t),
+        !a && v && h.length !== 0 && /* @__PURE__ */ g.createElement(K, { group: v, groupMode: p, render: r }),
+        this.renderList(),
+        e && /* @__PURE__ */ g.createElement(
+          "div",
+          {
+            className: S(k.listFooter({ c: d }), this.props.footerClassName)
+          },
+          e
+        )
+      );
+    }, this.handleMobileFilterChange = (t) => {
+      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;
+      e.scrollHandler(t);
+      const { groupField: r } = this.props;
+      let l = C(this.props);
+      if (!r || !l.length)
         return;
-      const a = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : i ? i.children[0].offsetHeight : 0), l = e.target.scrollTop - t.skip * a;
-      this.props.groupMode === "modern" && (r = this.base.getGroupedDataModernMode(r, n));
-      let o = r[0][n];
-      for (let u = 1; u < r.length && !(a * u > l); u++)
-        r[u] && r[u][n] && (o = r[u][n]);
+      const a = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : i ? i.children[0].offsetHeight : 0), n = t.target.scrollTop - e.skip * a;
+      this.props.groupMode === "modern" && (l = this.base.getGroupedDataModernMode(l, r));
+      let o = l[0][r];
+      for (let h = 1; h < l.length && !(a * h > n); h++)
+        l[h] && l[h][r] && (o = l[h][r]);
       o !== this.state.group && (this.setState({
         group: o
       }), this.props.onGroupScroll && this.props.onGroupScroll.call(void 0, { group: o }));
-    }, this.handleItemClick = (e, t) => {
-      this.navigationIndex = e, this.base.handleItemClick(e, t), this._valueDuringOnChange = void 0;
-    }, this.handleBlur = (e) => {
+    }, 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 t = this.base.initState(), { textField: i } = this.props, n = S(this.props), r = this.getFocusedIndex(), d = !(r === -1) && this.getCurrentValueDisabledStatus(i, n, r);
-        t.data.focused = !1, t.events.push({ type: "onBlur" }), t.syntheticEvent = e, i && d && this.clearValueOnBlur(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, t);
+        const e = this.base.initState(), { textField: i } = this.props, r = C(this.props), l = this.getFocusedIndex(), p = !(l === -1) && this.getCurrentValueDisabledStatus(i, r, l);
+        e.data.focused = !1, e.events.push({ type: "onBlur" }), e.syntheticEvent = t, i && p && this.clearValueOnBlur(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, e);
       }
-    }, this.onInputClick = (e) => {
-      const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
-      if (!t && this.mobileMode) {
-        const n = this.base.initState();
-        n.syntheticEvent = e, this.base.togglePopup(n), this.base.filterChanged(i, n), this.applyState(n);
+    }, 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;
+      if (!e && this.mobileMode) {
+        const r = this.base.initState();
+        r.syntheticEvent = t, this.base.togglePopup(r), this.base.filterChanged(i, r), this.applyState(r);
       }
-    }, this.onInputKeyDown = (e) => {
-      const { skipDisabledItems: t, textField: i, dataItemKey: n, groupField: r } = this.props, a = S(this.props), d = this.value, l = Math.max(
+    }, this.onInputKeyDown = (t) => {
+      const { skipDisabledItems: e, textField: i, dataItemKey: r, groupField: l } = this.props, a = C(this.props), p = this.value, n = Math.max(
         0,
-        a.findIndex((h) => k(h, d, n))
-      ), o = e.keyCode, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = this.base.initState();
-      if (p.syntheticEvent = e, !e.altKey && (o === C.up || o === C.down)) {
-        if (e.preventDefault(), r !== "" && i)
-          if (!this.props.skipDisabledItems && u)
-            this.onNavigate(p, o);
+        a.findIndex((u) => F(u, p, r))
+      ), o = t.keyCode, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = this.base.initState();
+      if (d.syntheticEvent = t, !t.altKey && (o === y.up || o === y.down)) {
+        if (t.preventDefault(), l !== "" && i)
+          if (!this.props.skipDisabledItems && h)
+            this.onNavigate(d, o);
           else {
-            let h = 0;
-            if (o === C.down || o === C.right) {
-              const g = a.slice(l + 1 < a.length ? l + 1 : l).find((f) => !f.disabled && f[i]);
-              h = g && a.findIndex((f) => f[i] === g[i]);
-            } else if (o === C.up || o === C.left) {
-              let g;
-              if (l === 0)
-                g = a, h = a.findIndex((f) => !f.disabled && f[i]);
+            let u = 0;
+            if (o === y.down || o === y.right) {
+              const c = a.slice(n + 1 < a.length ? n + 1 : n).find((f) => !f.disabled && f[i]);
+              u = c && a.findIndex((f) => f[i] === c[i]);
+            } else if (o === y.up || o === y.left) {
+              let c;
+              if (n === 0)
+                c = a, u = a.findIndex((f) => !f.disabled && f[i]);
               else {
-                g = a.slice(0, l);
-                let f = g.pop();
+                c = a.slice(0, n);
+                let f = c.pop();
                 for (; f && f.disabled; )
-                  f = g.pop();
-                h = f && a.findIndex((E) => E[i] === f[i]);
+                  f = c.pop();
+                u = f && a.findIndex((E) => E[i] === f[i]);
               }
             }
-            if (h !== void 0) {
-              const g = h - l;
-              this.onNavigate(p, o, g);
-            } else h === void 0 && a.findIndex((g) => g[i] === d[i]) === a.length - 1 && this.onNavigate(p, o);
+            if (u !== void 0) {
+              const c = u - n;
+              this.onNavigate(d, o, c);
+            } else u === void 0 && a.findIndex((c) => c[i] === p[i]) === a.length - 1 && this.onNavigate(d, o);
           }
-        else if (!this.props.skipDisabledItems && u)
-          this.onNavigate(p, o);
+        else if (!this.props.skipDisabledItems && h)
+          this.onNavigate(d, o);
         else {
-          let h = null;
-          if (o === C.down || o === C.right)
-            h = a.slice(l + 1).find((g) => !g.disabled);
-          else if (o === C.up || o === C.left) {
-            const g = a.slice(0, l);
-            for (h = g.pop(); h && h.disabled; )
-              h = g.pop();
+          let u = null;
+          if (o === y.down || o === y.right)
+            u = a.slice(n + 1).find((c) => !c.disabled);
+          else if (o === y.up || o === y.left) {
+            const c = a.slice(0, n);
+            for (u = c.pop(); u && u.disabled; )
+              u = c.pop();
           }
-          if (h) {
-            const g = h.id - l - 1;
-            this.onNavigate(p, o, g);
+          if (u) {
+            const c = u.id - n - 1;
+            this.onNavigate(d, o, c);
           } else
-            this.onNavigate(p, o);
+            this.onNavigate(d, o);
         }
-        this.applyState(p);
+        this.applyState(d);
       }
-      const y = () => {
-        e.preventDefault(), this.base.togglePopup(p), this.applyState(p);
-      }, b = this.getFocusedIndex(), x = b === -1, m = !x && this.getCurrentValueDisabledStatus(i, a, b);
-      u ? o === C.pageUp ? (e.preventDefault(), this.base.scrollPopupByPageSize(-1)) : o === C.pageDown ? (e.preventDefault(), this.base.scrollPopupByPageSize(1)) : e.altKey && o === C.up ? y() : o === C.enter ? (e.preventDefault(), (i && !x && e.currentTarget.value ? a[b][i] : void 0) ? !t && i && m ? this.clearValueOnEnterOrEsc(e) : m || this.applyValueOnEnter(e.currentTarget.value, p) : this.applyValueOnEnter(e.currentTarget.value, p)) : o === C.esc && (!t && i && m && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, p)) : !u && o === C.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && o === C.down && y();
-    }, this.inputOnChange = (e) => {
-      const t = this.base.initState();
-      t.syntheticEvent = e;
-      const i = this.props.opened !== void 0 ? this.props.opened : this.state.opened, n = e.currentTarget, r = n.value;
+      const v = () => {
+        t.preventDefault(), this.base.togglePopup(d), this.applyState(d);
+      }, x = this.getFocusedIndex(), I = x === -1, b = !I && this.getCurrentValueDisabledStatus(i, a, x);
+      h ? o === y.pageUp ? (t.preventDefault(), this.base.scrollPopupByPageSize(-1)) : o === y.pageDown ? (t.preventDefault(), this.base.scrollPopupByPageSize(1)) : t.altKey && o === y.up ? v() : o === y.enter ? (t.preventDefault(), (i && !I && t.currentTarget.value ? a[x][i] : void 0) ? !e && i && b ? this.clearValueOnEnterOrEsc(t) : b || this.applyValueOnEnter(t.currentTarget.value, d) : this.applyValueOnEnter(t.currentTarget.value, d)) : o === y.esc && (!e && i && b && this.clearValueOnEnterOrEsc(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, d)) : !h && o === y.esc ? this.clearValueOnEnterOrEsc(t) : t.altKey && o === y.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, l = r.value;
       if (this.props.suggest) {
-        const a = n.selectionEnd === r.length;
-        let d = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-        D(d) || (d = M(this.value, this.props.textField) || "");
-        const l = d && d === r, o = d && d.length > r.length;
-        l || o || !a ? this._suggested = "" : this.suggestValue(r);
+        const a = r.selectionEnd === l.length;
+        let p = this.props.filter !== void 0 ? this.props.filter : this.state.text;
+        w(p) || (p = D(this.value, this.props.textField) || "");
+        const n = p && p === l, o = p && p.length > l.length;
+        n || o || !a ? this._suggested = "" : this.suggestValue(l);
       }
-      this.props.filter === void 0 && (t.data.text = r), this.state.focusedItem !== void 0 && (t.data.focusedItem = void 0), i || this.base.togglePopup(t), this.base.filterChanged(r, t), this.applyState(t), this.setState({ group: void 0 });
-    }, this.clearButtonClick = (e) => {
-      const t = this.base.initState();
-      t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
-    }, this.clearValueOnEnterOrEsc = (e) => {
-      const t = this.base.initState();
-      t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
-    }, this.clearValueOnBlur = (e) => {
-      const t = this.base.initState();
-      t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
-    }, this.clearValueOnToggleBtnClick = (e) => {
-      const t = this.base.initState();
-      t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
+      this.props.filter === void 0 && (e.data.text = l), this.state.focusedItem !== void 0 && (e.data.focusedItem = void 0), i || 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();
+    }, this.clearValueOnEnterOrEsc = (t) => {
+      const e = this.base.initState();
+      e.syntheticEvent = t, t.stopPropagation(), this.clearValue();
+    }, this.clearValueOnBlur = (t) => {
+      const e = this.base.initState();
+      e.syntheticEvent = t, t.stopPropagation(), this.clearValue();
+    }, this.clearValueOnToggleBtnClick = (t) => {
+      const e = this.base.initState();
+      e.syntheticEvent = t, t.stopPropagation(), this.clearValue();
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || ke
+        this.validity.valid ? "" : this.props.validationMessage || Ct
       );
-    }, this.showLicenseWatermark = !ie(xe, { component: "ComboBox" });
+    }, this.handleFocus = (t) => {
+      if (this._skipFocus)
+        return;
+      const e = this.base.initState();
+      e.syntheticEvent = t, this.mobileMode && !this._skipFocus && (this._skipFocus = !0, this.base.togglePopup(e), this.applyState(e), setTimeout(() => {
+        this._skipFocus = !1;
+      }, 300)), this.base.handleFocus(t);
+    }, this.showLicenseWatermark = !tt(vt, { component: "ComboBox" });
   }
   get _inputId() {
     return this.props.id;
   }
   get document() {
-    if (z)
+    if (R)
       return this.element && this.element.ownerDocument || document;
   }
   /** @hidden */
@@ -198,8 +237,8 @@ const ke = "Please enter a valid value!", F = class F extends c.Component {
    * The mobile mode of the ComboBox.
    */
   get mobileMode() {
-    var e;
-    return !!(this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth <= ((e = this.props._adaptiveMode) == null ? void 0 : e.medium) && this.props.adaptive);
+    var t;
+    return !!(this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth <= ((t = this.props._adaptiveMode) == null ? void 0 : t.medium) && this.props.adaptive);
   }
   /**
    * The value of the ComboBox.
@@ -218,8 +257,8 @@ const ke = "Please enter a valid value!", F = class F extends c.Component {
    * The index of the selected item.
    */
   get index() {
-    const { dataItemKey: s } = this.props, e = S(this.props), t = this.value;
-    return e.findIndex((i) => k(i, t, s));
+    const { dataItemKey: s } = this.props, t = C(this.props), e = this.value;
+    return t.findIndex((i) => F(i, e, s));
   }
   /**
    * Gets the `name` property of the ComboBox.
@@ -231,41 +270,41 @@ const ke = "Please enter a valid value!", F = class F extends c.Component {
    * Represents the validity state into which the component is set.
    */
   get validity() {
-    const s = this.props.validationMessage !== void 0, e = !this.required || this.value !== null && this.value !== "" && this.value !== void 0, t = this.props.valid !== void 0 ? this.props.valid : e;
+    const s = this.props.validationMessage !== void 0, t = !this.required || this.value !== null && this.value !== "" && this.value !== void 0, e = this.props.valid !== void 0 ? this.props.valid : t;
     return {
       customError: s,
-      valid: t,
+      valid: e,
       valueMissing: this.value === null
     };
   }
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : F.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : M.defaultProps.validityStyles;
   }
   /** @hidden */
   get required() {
-    return this.props.required !== void 0 ? this.props.required : F.defaultProps.required;
+    return this.props.required !== void 0 ? this.props.required : M.defaultProps.required;
   }
   /** @hidden */
-  componentDidUpdate(s, e) {
-    var y;
-    const { dataItemKey: t, virtual: i, groupField: n = "", textField: r } = this.props, a = S(this.props), d = 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 : e.opened;
+  componentDidUpdate(s, t) {
+    var v;
+    const { dataItemKey: e, virtual: i, groupField: r = "", textField: l } = this.props, a = C(this.props), p = s.virtual ? s.virtual.total : 0, n = 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 u = !o && l, p = this.value;
-    if (this._valueOnDidUpdate = p, this.base.didUpdate(), i && i.total !== d)
+    const h = !o && n, d = this.value;
+    if (this._valueOnDidUpdate = d, this.base.didUpdate(), i && i.total !== p)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
-      const b = s.value !== void 0 ? s.value : e.value;
-      let x = this.hasDuplicates ? this.navigationIndex || 0 : a.findIndex((h) => k(h, p, t));
-      this.props.groupMode === "modern" && r && p && (x = (y = this.base.getGroupedDataModernMode(a, n)) == null ? void 0 : y.map((h) => h[r]).indexOf(p[r]));
-      const m = !k(b, p, t);
-      u && i ? this.base.scrollToVirtualItem(i, x) : u && !i ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][n], this), this.base.scrollToItem(x)) : (this.hasDuplicates || l && o && p && m) && this.base.scrollToItem(x);
+      const x = s.value !== void 0 ? s.value : t.value;
+      let I = this.hasDuplicates ? this.navigationIndex || 0 : a.findIndex((u) => F(u, d, e));
+      this.props.groupMode === "modern" && l && d && (I = (v = this.base.getGroupedDataModernMode(a, r)) == null ? void 0 : v.map((u) => u[l]).indexOf(d[l]));
+      const b = !F(x, d, e);
+      h && i ? this.base.scrollToVirtualItem(i, I) : h && !i ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][r], this), this.base.scrollToItem(I)) : (this.hasDuplicates || n && o && d && b) && this.base.scrollToItem(I);
     }
-    u && this._input && this._input.focus(), this.setValidity();
+    h && this._input && this._input.focus(), this.setValidity();
   }
   /** @hidden */
   componentDidMount() {
     var s;
-    this.observerResize = z && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (s = this.document) != null && s.body && this.observerResize && this.observerResize.observe(this.document.body), this.checkForDuplicatePlainTextRecords();
+    this.observerResize = R && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (s = this.document) != null && s.body && this.observerResize && this.observerResize.observe(this.document.body), this.checkForDuplicatePlainTextRecords();
   }
   /** @hidden */
   componentWillUnmount() {
@@ -274,461 +313,386 @@ const ke = "Please enter a valid value!", F = class F extends c.Component {
   }
   /** @hidden */
   render() {
-    const s = $(this).toLanguageString(
-      G,
-      U[G]
-    ), e = $(this).toLanguageString(
-      j,
-      U[j]
+    const s = G(this).toLanguageString(
+      H,
+      W[H]
+    ), t = G(this).toLanguageString(
+      q,
+      W[q]
     ), {
-      dir: t,
+      dir: e,
       disabled: i,
-      clearButton: n = F.defaultProps.clearButton,
-      label: r,
+      clearButton: r = M.defaultProps.clearButton,
+      label: l,
       textField: a,
-      className: d,
-      style: l,
+      className: p,
+      style: n,
       loading: o,
-      iconClassName: u,
-      virtual: p,
-      size: y,
-      rounded: b,
-      fillMode: x,
-      opened: m = this.state.opened,
-      placeholder: h,
-      svgIcon: g,
+      iconClassName: h,
+      virtual: d,
+      size: v,
+      rounded: x,
+      fillMode: I,
+      opened: b = this.state.opened,
+      placeholder: u,
+      svgIcon: c,
       unstyled: f
-    } = this.props, E = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, J = M(this.value, a), T = D(O) ? O : J, Q = n && (!!T || D(this.value)), V = this.base.vs, A = this.props.id || this._inputId, L = this.mobileMode, _ = f && f.uComboBox;
-    V.enabled = p !== void 0, p !== void 0 && (V.skip = p.skip, V.total = p.total, V.pageSize = p.pageSize);
-    const [X, Z] = Y(this.props.prefix || c.Fragment), [ee, te] = Y(this.props.suffix || c.Fragment), R = /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement(
+    } = this.props, E = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, j = D(this.value, a), V = w(O) ? O : j, $ = r && (!!V || w(this.value)), B = this.base.vs, L = this.props.id || this._inputId, T = f && f.uComboBox;
+    B.enabled = d !== void 0, d !== void 0 && (B.skip = d.skip, B.total = d.total, B.pageSize = d.pageSize);
+    const [Y, J] = U(this.props.prefix || g.Fragment), [Q, X] = U(this.props.suffix || g.Fragment), N = /* @__PURE__ */ g.createElement(g.Fragment, null, /* @__PURE__ */ g.createElement(
       "span",
       {
-        className: I(
-          w.wrapper({
-            c: _,
-            size: y,
-            rounded: b,
-            fillMode: x,
+        className: S(
+          k.wrapper({
+            c: T,
+            size: v,
+            rounded: x,
+            fillMode: I,
             disabled: i,
             invalid: !E,
             loading: o,
             required: this.required
           }),
-          d
+          p
         ),
         ref: this.componentRef,
-        style: r ? { ...l, width: void 0 } : l,
-        dir: t
+        style: l ? { ...n, width: void 0 } : n,
+        dir: e,
+        onFocus: this.handleFocus
       },
-      this.props.prefix && /* @__PURE__ */ c.createElement(X, { ...Z }),
-      this.renderSearchBar(T || "", A, h),
-      Q && !o && /* @__PURE__ */ c.createElement(Ie, { onClick: this.clearButtonClick, key: "clearbutton" }),
-      o && /* @__PURE__ */ c.createElement(
-        ae,
+      this.props.prefix && /* @__PURE__ */ g.createElement(Y, { ...J }),
+      this.renderSearchBar(V || "", L, u),
+      $ && !o && /* @__PURE__ */ g.createElement(ft, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      o && /* @__PURE__ */ g.createElement(
+        st,
         {
-          className: I(w.loadingIcon({ c: _ })),
+          className: S(k.loadingIcon({ c: T })),
           name: "loading",
           key: "loading"
         }
       ),
-      this.props.suffix && /* @__PURE__ */ c.createElement(ee, { ...te }),
-      /* @__PURE__ */ c.createElement(
-        q,
+      this.props.suffix && /* @__PURE__ */ g.createElement(Q, { ...X }),
+      /* @__PURE__ */ g.createElement(
+        bt,
         {
           tabIndex: -1,
           type: "button",
-          "aria-label": m ? e : s,
-          icon: u ? void 0 : "caret-alt-down",
-          svgIcon: g || ye,
-          iconClass: u,
-          size: y,
-          fillMode: x,
+          "aria-label": b ? t : s,
+          icon: h ? void 0 : "caret-alt-down",
+          svgIcon: c || xt,
+          iconClass: h,
+          size: v,
+          fillMode: I,
           rounded: null,
           themeColor: "base",
-          className: I(w.inputButton({ c: _ })),
+          className: S(k.inputButton({ c: T })),
           onClick: this.toggleBtnClick,
-          onMouseDown: (se) => se.preventDefault()
+          onMouseDown: (Z) => Z.preventDefault()
         }
       ),
-      !L && this.renderListContainer()
-    ), L && this.renderAdaptiveListContainer());
-    return r ? /* @__PURE__ */ c.createElement(
-      ce,
+      !this.mobileMode && this.renderListContainer()
+    ), this.mobileMode && this.renderAdaptiveListContainer());
+    return l ? /* @__PURE__ */ g.createElement(
+      pt,
       {
-        label: r,
-        editorId: A,
-        editorValue: T,
+        label: l,
+        editorId: L,
+        editorValue: V,
         editorValid: E,
         editorDisabled: i,
-        style: { width: l ? l.width : void 0 },
-        children: R,
+        style: { width: n ? n.width : void 0 },
+        children: N,
         unstyled: f
       }
-    ) : R;
+    ) : N;
   }
   /** @hidden */
-  onNavigate(s, e, t) {
-    const { virtual: i = { skip: 0 } } = this.props, n = S(this.props), r = this.props.filter ? this.props.filter : this.state.text;
-    let a = -1, d;
-    const l = this.base.vs, o = this.value;
+  onNavigate(s, t, e) {
+    const { virtual: i = { skip: 0 } } = this.props, r = C(this.props), l = this.props.filter ? this.props.filter : this.state.text;
+    let a = -1, p;
+    const n = this.base.vs, o = this.value;
     this._suggested = "";
-    const u = this.hasDuplicates && this.duplicates.indexOf(o) !== -1;
-    if (a = this.getFocusedIndex(u), a !== -1 && !D(o))
+    const h = this.hasDuplicates && this.duplicates.indexOf(o) !== -1;
+    if (a = this.getFocusedIndex(h), a !== -1 && !w(o))
       this.handleItemSelect(a, s);
-    else if (r === "")
+    else if (l === "")
       this.handleItemSelect(0, s);
     else {
-      const p = i.skip + a;
-      d = this.base.navigation.navigate({
-        keyCode: e,
-        current: p,
-        max: (l.enabled ? l.total : n.length) - 1,
+      const d = i.skip + a;
+      p = this.base.navigation.navigate({
+        keyCode: t,
+        current: d,
+        max: (n.enabled ? n.total : r.length) - 1,
         min: 0,
-        skipItems: t || void 0
-      }), d !== void 0 && this.handleItemSelect(d, s);
+        skipItems: e || void 0
+      }), p !== void 0 && this.handleItemSelect(p, s);
     }
-    this.navigationIndex = d;
+    this.navigationIndex = p;
   }
-  getCurrentValueDisabledStatus(s, e, t) {
-    return s && e && e[t] && e[t].disabled;
+  getCurrentValueDisabledStatus(s, t, e) {
+    return s && t && t[e] && t[e].disabled;
   }
-  applyValueOnEnter(s, e) {
-    const { textField: t, allowCustom: i } = this.props, n = S(this.props), r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = M(this.value, t) === s ? this.index : K(n, s, t), l = d !== -1;
+  applyValueOnEnter(s, t) {
+    const { textField: e, allowCustom: i } = this.props, r = C(this.props), l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = D(this.value, e) === s ? this.index : A(r, s, e), n = p !== -1;
     let o;
-    if (this._suggested = "", l)
-      o = n[d];
+    if (this._suggested = "", n)
+      o = r[p];
     else if (i)
-      o = t !== void 0 ? { [t]: s } : s;
+      o = e !== void 0 ? { [e]: s } : s;
     else
-      return this.selectFocusedItem(s, e);
-    this.triggerOnChange(o, e), r && this.base.togglePopup(e), this.props.filter === void 0 && this.state.text !== void 0 && (e.data.text = void 0), this.applyState(e);
+      return this.selectFocusedItem(s, t);
+    this.triggerOnChange(o, t), l && this.base.togglePopup(t), this.props.filter === void 0 && this.state.text !== void 0 && (t.data.text = void 0), this.applyState(t);
   }
-  applyValueOnRejectSuggestions(s, e) {
-    const { textField: t, allowCustom: i } = this.props, n = S(this.props), r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, a = M(this.value, t);
-    if (this._suggested = "", s === a || s === "" && !D(a))
-      return this.closeOpenedApplyStateNonMobileMode(e, r), this.applyState(e);
-    const d = K(n, s, t, !0), l = d !== -1;
+  applyValueOnRejectSuggestions(s, t) {
+    const { textField: e, allowCustom: i } = this.props, r = C(this.props), l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, a = D(this.value, e);
+    if (this._suggested = "", s === a || s === "" && !w(a))
+      return this.closeOpenedApplyStateNonMobileMode(t, l), this.applyState(t);
+    const p = A(r, s, e, !0), n = p !== -1;
     let o = null;
-    l ? o = n[d] : i && (o = s ? t ? { [t]: s } : s : null), this.triggerOnChange(o, e), this.state.text !== void 0 && (e.data.text = void 0, this.base.filterChanged("", e)), this.closeOpenedApplyStateNonMobileMode(e, r), this.applyState(e);
+    n ? o = r[p] : i && (o = s ? e ? { [e]: s } : s : null), this.triggerOnChange(o, t), this.state.text !== void 0 && (t.data.text = void 0, this.base.filterChanged("", t)), this.closeOpenedApplyStateNonMobileMode(t, l), this.applyState(t);
   }
-  selectFocusedItem(s, e) {
-    const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: i, virtual: n = { skip: 0 }, focusedItemIndex: r = H } = this.props, a = S(this.props), d = n.skip, l = s === "" && d === 0 ? 0 : r(a, s, i);
-    return l !== -1 ? this.handleItemSelect(l + d, e) : (this.triggerOnChange(null, e), this.state.text !== void 0 && (e.data.text = void 0)), t && this.base.togglePopup(e), this.applyState(e);
+  selectFocusedItem(s, t) {
+    const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: i, virtual: r = { skip: 0 }, focusedItemIndex: l = z } = this.props, a = C(this.props), p = r.skip, n = s === "" && p === 0 ? 0 : l(a, s, i);
+    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, {
-      header: e,
-      footer: t,
-      size: i,
-      groupField: n,
-      groupMode: r,
-      list: a,
-      virtual: d,
-      adaptiveTitle: l,
-      groupStickyHeaderItemRender: o,
-      unstyled: u,
-      _adaptiveMode: p
-    } = this.props, y = S(this.props), b = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = this.base.getAdaptiveAnimation(), m = u && u.uComboBox, h = u && u.uDropDownsActionSheet;
-    let { group: g } = this.state;
-    g === void 0 && n !== void 0 && (g = M(y[0], n));
-    const f = {
-      navigatable: !1,
-      navigatableElements: [],
-      expand: b,
-      animation: x,
-      onClose: (E) => this.toggleBtnClick(E),
-      className: I(
-        B.wrapper({
-          c: h
-        }),
-        "k-adaptive-actionsheet"
-      ),
-      animationStyles: s && p && s <= p.small ? { top: 0, width: "100%", height: "100%" } : void 0,
-      position: s && p && s <= p.small ? "fullscreen" : void 0
+    const { windowWidth: s = 0 } = this.state, { groupField: t, adaptiveTitle: e = this.props.label, adaptiveSubtitle: i } = this.props, r = C(this.props), l = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+    let { group: a } = this.state;
+    a === void 0 && t !== void 0 && (a = D(r[0], t));
+    const p = {
+      title: e || this.props.label,
+      subTitle: i,
+      expand: l,
+      onClose: (n) => this.toggleBtnClick(n),
+      windowWidth: s,
+      mobileFilter: this.renderMobileListFilter()
     };
-    return /* @__PURE__ */ c.createElement(Se, { ...f }, /* @__PURE__ */ c.createElement(we, null, /* @__PURE__ */ c.createElement("div", { className: I(B.titleBar({ c: h })) }, /* @__PURE__ */ c.createElement("div", { className: I(B.title({ c: h })) }, /* @__PURE__ */ c.createElement("div", { className: I(B.header({ c: h })) }, l), /* @__PURE__ */ c.createElement("div", { className: I(B.subtitle({ c: h })) })), /* @__PURE__ */ c.createElement("div", { className: I(B.actions({ c: h })) }, /* @__PURE__ */ c.createElement(
-      q,
-      {
-        tabIndex: 0,
-        "aria-label": "Cancel",
-        "aria-disabled": "false",
-        type: "button",
-        fillMode: "flat",
-        themeColor: "base",
-        size: "large",
-        onClick: this.toggleBtnClick,
-        icon: "x",
-        svgIcon: Ce
-      }
-    ))), /* @__PURE__ */ c.createElement("div", { className: I(B.titleBarGroup({ c: h })) }, this.renderMobileListFilter())), /* @__PURE__ */ c.createElement(De, null, /* @__PURE__ */ c.createElement(
-      "div",
-      {
-        className: I(
-          w.listContainer({
-            c: m
-          })
-        )
-      },
-      /* @__PURE__ */ c.createElement(
-        "div",
-        {
-          className: I(
-            w.list({
-              c: m,
-              list: a,
-              size: "large",
-              tableSize: i,
-              virtual: d
-            })
-          )
-        },
-        e && /* @__PURE__ */ c.createElement("div", { className: I(w.listHeader({ c: m })) }, e),
-        !a && g && y.length !== 0 && /* @__PURE__ */ c.createElement(
-          W,
-          {
-            group: g,
-            groupMode: r,
-            render: o
-          }
-        ),
-        this.renderList(),
-        t && /* @__PURE__ */ c.createElement(
-          "div",
-          {
-            className: I(
-              w.listFooter({ c: m }),
-              this.props.footerClassName
-            )
-          },
-          t
-        )
-      )
-    )));
+    return /* @__PURE__ */ g.createElement(yt, { ...p }, /* @__PURE__ */ g.createElement(It, null, /* @__PURE__ */ g.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
   }
   renderListContainer() {
     const s = this.base, {
-      dir: e,
-      header: t,
+      dir: t,
+      header: e,
       footer: i,
-      groupField: n,
-      groupMode: r,
+      groupField: r,
+      groupMode: l,
       size: a,
-      list: d,
-      virtual: l,
+      list: p,
+      virtual: n,
       groupStickyHeaderItemRender: o,
-      unstyled: u
-    } = this.props, p = S(this.props), y = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = s.getPopupSettings(), x = b.width !== void 0 ? b.width : s.popupWidth, m = u && u.uComboBox;
-    let { group: h } = this.state;
-    return h === void 0 && n !== void 0 && (h = M(p[0], n)), /* @__PURE__ */ c.createElement(
-      ve,
+      unstyled: h
+    } = this.props, d = C(this.props), v = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = s.getPopupSettings(), I = x.width !== void 0 ? x.width : s.popupWidth, b = h && h.uComboBox;
+    let { group: u } = this.state;
+    return u === void 0 && r !== void 0 && (u = D(d[0], r)), /* @__PURE__ */ g.createElement(
+      ct,
       {
-        width: x,
+        width: I,
         popupSettings: {
-          ...b,
-          anchor: b.anchor || this.element,
-          show: y,
-          popupClass: I(
-            b.popupClass,
-            w.listContainer({
-              c: m,
+          ...x,
+          anchor: x.anchor || this.element,
+          show: v,
+          popupClass: S(
+            x.popupClass,
+            k.listContainer({
+              c: b,
               popup: !0
             })
           )
         },
-        dir: e !== void 0 ? e : this.base.dirCalculated,
-        itemsCount: [p.length]
+        dir: t !== void 0 ? t : this.base.dirCalculated,
+        itemsCount: [d.length]
       },
-      /* @__PURE__ */ c.createElement(
+      /* @__PURE__ */ g.createElement(
         "div",
         {
-          className: I(
-            w.list({
-              c: m,
-              list: d,
+          className: S(
+            k.list({
+              c: b,
+              list: p,
               size: a,
               tableSize: a,
-              virtual: l
+              virtual: n
             })
           )
         },
-        t && /* @__PURE__ */ c.createElement("div", { className: I(w.listHeader({ c: m })) }, t),
-        !d && h && p.length !== 0 && /* @__PURE__ */ c.createElement(W, { group: h, groupMode: r, render: o }),
+        e && /* @__PURE__ */ g.createElement("div", { className: S(k.listHeader({ c: b })) }, e),
+        !p && u && d.length !== 0 && /* @__PURE__ */ g.createElement(K, { group: u, groupMode: l, render: o }),
         this.renderList(),
-        i && /* @__PURE__ */ c.createElement(
+        i && /* @__PURE__ */ g.createElement(
           "div",
           {
-            className: I(
-              w.listFooter({ c: m }),
+            className: S(
+              k.listFooter({ c: b }),
               this.props.footerClassName
             )
           },
           i
         )
       ),
-      this.showLicenseWatermark && /* @__PURE__ */ c.createElement(ne, null)
+      this.showLicenseWatermark && /* @__PURE__ */ g.createElement(it, null)
     );
   }
   renderList() {
     const s = this.base, {
-      textField: e,
-      dataItemKey: t,
+      textField: t,
+      dataItemKey: e,
       listNoDataRender: i,
-      itemRender: n,
-      groupHeaderItemRender: r,
+      itemRender: r,
+      groupHeaderItemRender: l,
       virtual: a = { skip: 0, total: void 0 },
-      unstyled: d
-    } = this.props, l = S(this.props), o = s.getPopupSettings(), u = s.vs, p = a.skip, y = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = `translateY(${u.translate}px)`, x = y ? this.getFocusedIndex(this.hasDuplicates) : void 0, m = this.props.filter !== void 0 ? this.props.filter : this.state.text, h = M(this.value, e), g = D(m) && m !== h ? null : this.value, f = this.props.list || fe, E = d && d.uComboBox;
-    return /* @__PURE__ */ c.createElement(
+      unstyled: p
+    } = this.props, n = C(this.props), o = s.getPopupSettings(), h = s.vs, d = a.skip, v = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = `translateY(${h.translate}px)`, I = v ? this.getFocusedIndex(this.hasDuplicates) : void 0, b = this.props.filter !== void 0 ? this.props.filter : this.state.text, u = D(this.value, t), c = w(b) && b !== u ? null : this.value, f = this.props.list || gt, E = p && p.uComboBox;
+    return /* @__PURE__ */ g.createElement(
       f,
       {
         id: s.listBoxId,
         virtual: !!a,
-        show: y,
-        data: l,
-        focusedIndex: x,
-        value: g,
-        textField: e,
-        valueField: t,
+        show: v,
+        data: n,
+        focusedIndex: I,
+        value: c,
+        textField: t,
+        valueField: e,
         groupField: this.props.groupField,
         groupMode: this.props.groupMode,
         isMultiColumn: this.props.isMultiColumn,
         optionsGuid: s.guid,
         hasDuplicates: this.hasDuplicates,
         listRef: (O) => {
-          u.list = this.base.list = O, this.itemHeight = 0;
+          h.list = this.base.list = O, this.itemHeight = 0;
         },
         wrapperStyle: this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth > this.props._adaptiveMode.medium ? { maxHeight: o.height } : {},
-        wrapperCssClass: I(
-          w.listContent({
+        wrapperCssClass: S(
+          k.listContent({
             c: E,
             virtual: a
           })
         ),
-        listStyle: u.enabled ? { transform: b } : void 0,
+        listStyle: h.enabled ? { transform: x } : void 0,
         key: "listkey",
-        skip: p,
+        skip: d,
         onClick: this.handleItemClick,
-        itemRender: n,
-        groupHeaderItemRender: r,
+        itemRender: r,
+        groupHeaderItemRender: l,
         noDataRender: i,
         onMouseDown: (O) => O.preventDefault(),
         onScroll: this.onScroll,
-        wrapperRef: u.scrollerRef,
+        wrapperRef: h.scrollerRef,
         scroller: this.base.renderScrollElement(),
         ariaSetSize: a.total
       }
     );
   }
-  renderSearchBar(s, e, t) {
+  renderSearchBar(s, t, e) {
     const {
       tabIndex: i,
-      disabled: n,
-      title: r,
+      disabled: r,
+      title: l,
       ariaLabelledBy: a,
-      ariaDescribedBy: d,
-      dataItemKey: l,
+      ariaDescribedBy: p,
+      dataItemKey: n,
       virtual: o = { skip: 0 },
-      accessKey: u,
-      unstyled: p,
-      inputAttributes: y
-    } = this.props, b = S(this.props), x = this.props.opened !== void 0 ? this.props.opened : this.state.opened, m = this.value, h = Math.max(
+      accessKey: h,
+      unstyled: d,
+      inputAttributes: v
+    } = this.props, x = C(this.props), I = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = this.value, u = Math.max(
       0,
-      b.findIndex((g) => k(g, m, l))
+      x.findIndex((c) => F(c, b, n))
     );
-    return this._suggested && !k(this._valueOnDidUpdate, m, l) && (this._suggested = ""), /* @__PURE__ */ c.createElement(
-      me,
+    return this._suggested && !F(this._valueOnDidUpdate, b, n) && (this._suggested = ""), /* @__PURE__ */ g.createElement(
+      ut,
       {
-        id: e,
-        readOnly: x && this.mobileMode,
-        placeholder: t,
+        id: t,
+        readOnly: I && this.mobileMode,
+        placeholder: e,
         tabIndex: i,
-        title: r,
+        title: l,
         value: s + this._suggested,
         suggestedText: this._suggested,
-        ref: (g) => {
-          this._input = g && g.input;
+        ref: (c) => {
+          this._input = c && c.input;
         },
         onClick: this.onInputClick,
         onKeyDown: this.onInputKeyDown,
         onChange: this.inputOnChange,
         onFocus: this.base.handleFocus,
         onBlur: this.handleBlur,
-        disabled: n,
-        expanded: x,
+        disabled: r,
+        expanded: I,
         owns: this.base.listBoxId,
-        activedescendant: `option-${this.base.guid}-${h + o.skip}`,
+        activedescendant: `option-${this.base.guid}-${u + o.skip}`,
         role: "combobox",
         ariaLabelledBy: a,
         ariaLabel: this.props.ariaLabel,
-        ariaDescribedBy: d,
+        ariaDescribedBy: p,
         ariaRequired: this.required,
         render: this.props.valueRender,
         ariaControls: this.base.listBoxId,
-        unstyled: p,
-        inputAttributes: y
+        unstyled: d,
+        inputAttributes: v
       }
     );
   }
   clearValue() {
     const s = this.base.initState();
     this._suggested = "", this.navigationIndex = void 0, this.base.filterChanged("", s), this.props.filter === void 0 && this.state.text !== void 0 && (s.data.text = void 0), this.triggerOnChange(null, s);
-    const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, t = this.mobileMode;
-    e && !t && this.base.togglePopup(s), this.applyState(s);
+    const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, e = this.mobileMode;
+    t && !e && this.base.togglePopup(s), this.applyState(s);
   }
-  triggerOnChange(s, e) {
-    const t = this.value;
-    !this.hasDuplicates && (!D(t) && !D(s) || k(t, s, this.props.dataItemKey)) || (this.props.value === void 0 && (e.data.value = s), this._valueDuringOnChange = s, e.events.push({ type: "onChange" }));
+  triggerOnChange(s, t) {
+    const e = this.value;
+    !this.hasDuplicates && (!w(e) && !w(s) || F(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 e = this.value, {
-      textField: t,
+    const t = this.value, {
+      textField: e,
       dataItemKey: i,
-      virtual: n = { skip: 0 },
-      focusedItemIndex: r = H,
+      virtual: r = { skip: 0 },
+      focusedItemIndex: l = z,
       skipDisabledItems: a
-    } = this.props, d = S(this.props), l = this.props.filter ? this.props.filter : this.state.text;
-    return s && this.navigationIndex !== void 0 ? this.navigationIndex : D(e) && l === void 0 ? d.findIndex((o) => k(o, e, i)) : l ? r(d, l, t) : a && t && !l && n.skip === 0 ? d.findIndex((o) => !o.disabled && o[t]) : n.skip === 0 ? 0 : -1;
+    } = this.props, p = C(this.props), n = this.props.filter ? this.props.filter : this.state.text;
+    return s && this.navigationIndex !== void 0 ? this.navigationIndex : w(t) && n === void 0 ? p.findIndex((o) => F(o, t, i)) : n ? l(p, n, e) : a && e && !n && r.skip === 0 ? p.findIndex((o) => !o.disabled && o[e]) : r.skip === 0 ? 0 : -1;
   }
   suggestValue(s) {
-    const { data: e, textField: t } = this.props;
-    this._suggested = ge(s, e, t);
+    const { data: t, textField: e } = this.props;
+    this._suggested = ht(s, t, e);
   }
   applyState(s) {
     this.base.applyState(s), this._valueDuringOnChange = void 0;
   }
   calculateMedia(s) {
-    for (const e of s)
-      this.setState({ windowWidth: e.target.clientWidth });
+    for (const t of s)
+      this.setState({ windowWidth: t.target.clientWidth });
   }
 };
-F.displayName = "ComboBox", F.propTypes = {
-  ...N.propTypes,
-  size: v.oneOf([null, "small", "medium", "large"]),
-  rounded: v.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: v.oneOf([null, "solid", "flat", "outline"]),
-  dataItemKey: v.string,
-  groupField: v.string,
-  groupMode: v.oneOf([void 0, "classic", "modern"]),
-  isMultiColumn: v.bool,
-  suggest: v.bool,
-  placeholder: v.string,
-  title: v.string,
-  allowCustom: v.bool,
-  clearButton: v.bool,
-  iconClassName: v.string,
-  svgIcon: oe,
-  validationMessage: v.string,
-  required: v.bool,
-  id: v.string,
-  ariaLabelledBy: v.string,
-  ariaLabel: v.string,
-  ariaDescribedBy: v.string,
-  list: v.any,
-  valueRender: v.func,
-  skipDisabledItems: v.bool,
-  inputAttributes: v.object
-}, F.defaultProps = {
-  ...N.defaultProps,
+M.displayName = "ComboBox", M.propTypes = {
+  ..._.propTypes,
+  size: m.oneOf([null, "small", "medium", "large"]),
+  rounded: m.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: m.oneOf([null, "solid", "flat", "outline"]),
+  dataItemKey: m.string,
+  groupField: m.string,
+  groupMode: m.oneOf([void 0, "classic", "modern"]),
+  isMultiColumn: m.bool,
+  suggest: m.bool,
+  placeholder: m.string,
+  title: m.string,
+  allowCustom: m.bool,
+  clearButton: m.bool,
+  iconClassName: m.string,
+  svgIcon: et,
+  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
+}, M.defaultProps = {
+  ..._.defaultProps,
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
@@ -741,18 +705,18 @@ F.displayName = "ComboBox", F.propTypes = {
   prefix: void 0,
   suffix: void 0
 };
-let P = F;
-const Ee = le(), Me = re(
-  de(
-    Ee,
-    pe(
-      he(P)
+let P = M;
+const St = ot(), kt = at(
+  nt(
+    St,
+    lt(
+      rt(P)
     )
   )
 );
-Me.displayName = "KendoReactComboBox";
+kt.displayName = "KendoReactComboBox";
 export {
-  Me as ComboBox,
-  Ee as ComboBoxPropsContext,
+  kt as ComboBox,
+  St as ComboBoxPropsContext,
   P as ComboBoxWithoutContext
 };