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

package/ComboBox/ComboBox.mjs

@@ -5,41 +5,41 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as u from "react";
+import * as c from "react";
 import m from "prop-types";
-import _ from "../common/DropDownBase.mjs";
-import { createPropsContext as et, classNames as S, uComboBox as F, Keys as I, validatePackage as st, getLicenseMessage as it, svgIconPropType as ot, canUseDOM as A, subscribeToKendoPaste as at, IconWrap as nt, WatermarkOverlay as lt, withIdHOC as rt, withPropsContext as pt, withUnstyledHOC as dt, withAdaptiveModeContext as ht } from "@progress/kendo-react-common";
-import { FloatingLabel as ct } from "@progress/kendo-react-labels";
-import { getPlainDataDuplicates as ut, getItemIndexByText as P, getFilteredData as y, areSame as D, getItemValue as w, isPresent as k, itemIndexStartsWith as L, suggestValue as gt } from "../common/utils.mjs";
-import mt from "../common/SearchBar.mjs";
-import ft from "../common/ListContainer.mjs";
-import vt from "../common/List.mjs";
-import bt from "../common/ListFilter.mjs";
-import z from "../common/GroupStickyHeader.mjs";
-import { packageMetadata as H } from "../package-metadata.mjs";
-import xt from "../common/ClearButton.mjs";
-import { Button as It } from "@progress/kendo-react-buttons";
-import { chevronDownIcon as yt } from "@progress/kendo-svg-icons";
-import { comboArrowBtnAriaLabelExpand as q, messages as W, comboArrowBtnAriaLabelCollapse as G } from "../messages/index.mjs";
-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!", E = class E extends u.Component {
+import P from "../common/DropDownBase.mjs";
+import { createPropsContext as it, classNames as S, uComboBox as F, Keys as x, validatePackage as ot, getLicenseMessage as at, svgIconPropType as nt, canUseDOM as H, subscribeToKendoPaste as lt, IconWrap as rt, WatermarkOverlay as pt, withIdHOC as dt, withPropsContext as ht, withUnstyledHOC as ct, withAdaptiveModeContext as ut } from "@progress/kendo-react-common";
+import { FloatingLabel as gt } from "@progress/kendo-react-labels";
+import { getPlainDataDuplicates as mt, getItemIndexByText as L, getFilteredData as I, areSame as w, getItemValue as D, isPresent as k, itemIndexStartsWith as N, suggestValue as ft } from "../common/utils.mjs";
+import vt from "../common/SearchBar.mjs";
+import bt from "../common/ListContainer.mjs";
+import xt from "../common/List.mjs";
+import It from "../common/ListFilter.mjs";
+import q from "../common/GroupStickyHeader.mjs";
+import { packageMetadata as W } from "../package-metadata.mjs";
+import yt from "../common/ClearButton.mjs";
+import { Button as Ct } from "@progress/kendo-react-buttons";
+import { chevronDownIcon as St } from "@progress/kendo-svg-icons";
+import { comboArrowBtnAriaLabelExpand as G, messages as R, comboArrowBtnAriaLabelCollapse as U, listAriaLabel as j } from "../messages/index.mjs";
+import { provideLocalizationService as $ } from "@progress/kendo-react-intl";
+import { ActionSheetContent as Ft } from "@progress/kendo-react-layout";
+import Y from "../common/withCustomComponent.mjs";
+import { AdaptiveMode as kt } from "../common/AdaptiveMode.mjs";
+const Dt = "Please enter a valid value!", E = class E extends c.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 = () => {
+    super(s), this.state = {}, this.base = new P(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 a = this.props.data;
-        this.duplicates = ut(a), this.hasDuplicates = this.duplicates.length > 0;
+        this.duplicates = mt(a), this.hasDuplicates = this.duplicates.length > 0;
       }
     }, this.handleKendoPasteValue = (t) => {
       const { data: e, textField: a, allowCustom: r } = this.props;
       if (!e)
         return;
-      const l = t != null ? String(t) : "", o = P(e, l, a, !1, !0), p = o !== -1;
+      const l = t != null ? String(t) : "", o = L(e, l, a, !1, !0), p = o !== -1;
       let n = null;
       if (p ? n = e[o] : r && (n = a ? { [a]: l } : l), n === null)
         return;
@@ -50,7 +50,7 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
         nativeEvent: new Event("change", { bubbles: !0 })
       }, this.state.text !== void 0 && (i.data.text = void 0), this.triggerOnChange(n, i), this.applyState(i);
     }, this.handleItemSelect = (t, 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);
+      const { virtual: a, dataItemKey: r } = this.props, l = I(this.props), o = a ? a.skip : 0, p = l[t - o], n = this.hasDuplicates || !w(p, this.value, r);
       this.triggerOnChange(p, e), this.state.text !== void 0 && (e.data.text = void 0), n && this.base.triggerPageChangeCornerItems(p, e);
     }, this.onPopupOpened = () => {
       setTimeout(() => {
@@ -60,7 +60,7 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
       this._element = t, this.base.wrapper = t;
     }, this.toggleBtnClick = (t) => {
       this._skipFocus = !0;
-      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();
+      const { skipDisabledItems: e, textField: a } = this.props, r = I(this.props), l = this.getFocusedIndex(), o = this.getCurrentValueDisabledStatus(a, r, l), p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, n = this.base.initState();
       if (n.syntheticEvent = t, !e && a && o && this.clearValueOnToggleBtnClick(t), this.base.togglePopup(n), !p && this.mobileMode) {
         const i = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
         this.base.filterChanged(i, n);
@@ -71,9 +71,9 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
     }, 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), a = k(t) ? t : e;
-      return /* @__PURE__ */ u.createElement(
-        bt,
+      const t = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, e = D(this.value, this.props.textField), a = k(t) ? t : e;
+      return /* @__PURE__ */ c.createElement(
+        It,
         {
           value: a,
           ref: (r) => {
@@ -88,9 +88,9 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
         }
       );
     }, this.listContainerContent = () => {
-      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;
+      const { header: t, footer: e, size: a, groupStickyHeaderItemRender: r, groupField: l, list: o, unstyled: p, virtual: n } = this.props, i = I(this.props), d = p && p.uComboBox;
       let { group: h } = this.state;
-      return h === void 0 && l !== void 0 && (h = w(i[0], l)), /* @__PURE__ */ u.createElement(
+      return h === void 0 && l !== void 0 && (h = D(i[0], l)), /* @__PURE__ */ c.createElement(
         "div",
         {
           className: S(
@@ -103,10 +103,10 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
             })
           )
         },
-        t && /* @__PURE__ */ u.createElement("div", { className: S(F.listHeader({ c: d })) }, t),
-        !o && h && i.length !== 0 && /* @__PURE__ */ u.createElement(z, { group: h, render: r }),
+        t && /* @__PURE__ */ c.createElement("div", { className: S(F.listHeader({ c: d })) }, t),
+        !o && h && i.length !== 0 && /* @__PURE__ */ c.createElement(q, { group: h, render: r }),
         this.renderList(),
-        e && /* @__PURE__ */ u.createElement(
+        e && /* @__PURE__ */ c.createElement(
           "div",
           {
             className: S(F.listFooter({ c: d }), this.props.footerClassName)
@@ -122,7 +122,7 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
       e.scrollHandler(t);
       const { groupField: r } = this.props;
       this.props.onListScroll && this.props.onListScroll(t);
-      let l = y(this.props);
+      let l = I(this.props);
       if (!r || !l.length)
         return;
       const o = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : a ? a.children[0].offsetHeight : 0), n = t.target.scrollTop - e.skip * o;
@@ -137,7 +137,7 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
       this.navigationIndex = t, this.base.handleItemClick(t, e), this._valueDuringOnChange = void 0;
     }, this.handleBlur = (t) => {
       if (this.state.focused && !this._skipBlur) {
-        const e = this.base.initState(), { textField: a } = this.props, r = y(this.props), l = this.getFocusedIndex(), p = !(l === -1) && this.getCurrentValueDisabledStatus(a, r, l);
+        const e = this.base.initState(), { textField: a } = this.props, r = I(this.props), l = this.getFocusedIndex(), p = !(l === -1) && this.getCurrentValueDisabledStatus(a, r, l);
         e.data.focused = !1, e.events.push({ type: "onBlur" }), e.syntheticEvent = t, a && p && this.clearValueOnBlur(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, e);
       }
     }, this.onInputClick = (t) => {
@@ -147,59 +147,59 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
         r.syntheticEvent = t, this.base.togglePopup(r), this.base.filterChanged(a, r), this.applyState(r);
       }
     }, this.onInputKeyDown = (t) => {
-      const { skipDisabledItems: e, textField: a, dataItemKey: r, groupField: l } = this.props, o = y(this.props), p = this.value, n = Math.max(
+      const { skipDisabledItems: e, textField: a, dataItemKey: r, groupField: l } = this.props, o = I(this.props), p = this.value, n = Math.max(
         0,
-        o.findIndex((g) => D(g, p, r))
+        o.findIndex((g) => w(g, p, r))
       ), i = t.keyCode, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
-      if (h.syntheticEvent = t, !t.altKey && (i === I.up || i === I.down)) {
+      if (h.syntheticEvent = t, !t.altKey && (i === x.up || i === x.down)) {
         if (t.preventDefault(), l !== "" && a)
           if (!this.props.skipDisabledItems && d)
             this.onNavigate(h, i);
           else {
             let g = 0;
-            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 (i === x.down || i === x.right) {
+              const u = o.slice(n + 1 < o.length ? n + 1 : n).find((C) => !C.disabled);
+              g = u && o.indexOf(u);
+            } else if (i === x.up || i === x.left) {
+              let u;
               if (n === 0)
-                c = o, g = o.findIndex((x) => !x.disabled);
+                u = o, g = o.findIndex((C) => !C.disabled);
               else {
-                c = o.slice(0, n);
-                let x = c.pop();
-                for (; x && x.disabled; )
-                  x = c.pop();
-                g = x && o.indexOf(x);
+                u = o.slice(0, n);
+                let C = u.pop();
+                for (; C && C.disabled; )
+                  C = u.pop();
+                g = C && o.indexOf(C);
               }
             }
             if (g !== void 0) {
-              const c = g - n;
-              this.onNavigate(h, i, c);
+              const u = g - n;
+              this.onNavigate(h, i, u);
             } else g === void 0 && n === o.length - 1 && this.onNavigate(h, i);
           }
         else if (!this.props.skipDisabledItems && d)
           this.onNavigate(h, i);
         else {
           let g = null;
-          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 (i === x.down || i === x.right)
+            g = o.slice(n + 1).find((u) => !u.disabled);
+          else if (i === x.up || i === x.left) {
+            const u = o.slice(0, n);
+            for (g = u.pop(); g && g.disabled; )
+              g = u.pop();
           }
           if (g) {
-            const c = g.id - n - 1;
-            this.onNavigate(h, i, c);
+            const u = g.id - n - 1;
+            this.onNavigate(h, i, u);
           } else
             this.onNavigate(h, i);
         }
         this.applyState(h);
       }
-      const v = () => {
+      const f = () => {
         t.preventDefault(), this.base.togglePopup(h), this.applyState(h);
-      }, 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();
+      }, b = this.getFocusedIndex(), y = b === -1, v = !y && this.getCurrentValueDisabledStatus(a, o, b);
+      d ? i === x.pageUp ? (t.preventDefault(), this.base.scrollPopupByPageSize(-1)) : i === x.pageDown ? (t.preventDefault(), this.base.scrollPopupByPageSize(1)) : t.altKey && i === x.up ? f() : i === x.enter ? (t.preventDefault(), (a && !y && t.currentTarget.value ? o[b][a] : void 0) ? !e && a && v ? this.clearValueOnEnterOrEsc(t) : v || this.applyValueOnEnter(t.currentTarget.value, h) : this.applyValueOnEnter(t.currentTarget.value, h)) : i === x.esc && (!e && a && v && this.clearValueOnEnterOrEsc(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, h)) : !d && i === x.esc ? this.clearValueOnEnterOrEsc(t) : t.altKey && i === x.down && f();
     }, this.inputOnChange = (t) => {
       const e = this.base.initState();
       e.syntheticEvent = t;
@@ -207,7 +207,7 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
       if (this.props.suggest) {
         const o = r.selectionEnd === l.length;
         let p = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-        k(p) || (p = w(this.value, this.props.textField) || "");
+        k(p) || (p = D(this.value, this.props.textField) || "");
         const n = p && p === l, i = p && p.length > l.length;
         n || i || !o ? this._suggested = "" : this.suggestValue(l);
       }
@@ -226,7 +226,7 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
       e.syntheticEvent = t, t.stopPropagation(), this.clearValue();
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || Ft
+        this.validity.valid ? "" : this.props.validationMessage || Dt
       );
     }, this.handleFocus = (t) => {
       if (this._skipFocus)
@@ -235,13 +235,13 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
       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 = !st(H, { component: "ComboBox" }), this.licenseMessage = it(H);
+    }, this.showLicenseWatermark = !ot(W, { component: "ComboBox" }), this.licenseMessage = at(W);
   }
   get _inputId() {
     return this.props.id;
   }
   get document() {
-    if (A)
+    if (H)
       return this.element && this.element.ownerDocument || document;
   }
   /** @hidden */
@@ -272,8 +272,8 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
    * The index of the selected item.
    */
   get index() {
-    const { dataItemKey: s } = this.props, t = y(this.props), e = this.value;
-    return t.findIndex((a) => D(a, e, s));
+    const { dataItemKey: s } = this.props, t = I(this.props), e = this.value;
+    return t.findIndex((a) => w(a, e, s));
   }
   /**
    * Gets the `name` property of the ComboBox.
@@ -301,21 +301,21 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
   }
   /** @hidden */
   componentDidUpdate(s, t) {
-    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;
+    var f, b;
+    const { dataItemKey: e, virtual: a, groupField: r = "", textField: l } = this.props, o = I(this.props), p = s.virtual ? s.virtual.total : 0, n = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = s.opened !== void 0 ? s.opened : t.opened;
     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 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: x = L } = this.props, M = x(o, c, l);
+      const y = s.value !== void 0 ? s.value : t.value;
+      let v = this.hasDuplicates ? this.navigationIndex || 0 : o.findIndex((u) => w(u, h, e));
+      l && h && (v = (f = this.base.getGroupedDataModernMode(o, r)) == null ? void 0 : f.map((u) => u[l]).indexOf(h[l]));
+      const g = !w(y, h, e);
+      if (d && a ? this.base.scrollToVirtualItem(a, v) : d && !a ? (this.onPopupOpened(), o && o.length !== 0 && this.base.resetGroupStickyHeader(o[0][r], this), this.base.scrollToItem(v)) : (this.hasDuplicates || n && i && h && g) && this.base.scrollToItem(v), n && i && this.scrollToFocused) {
+        const u = (b = this.props.filter ? this.props.filter : this.state.text) != null ? b : "";
+        if (u) {
+          const { focusedItemIndex: C = N } = this.props, M = C(o, u, l);
           this.base.scrollToItem(M);
         } else
           this.base.scrollToItem(0);
@@ -326,9 +326,9 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
   /** @hidden */
   componentDidMount() {
     var t;
-    this.observerResize = A && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (t = this.document) != null && t.body && this.observerResize && this.observerResize.observe(this.document.body), this.checkForDuplicatePlainTextRecords();
+    this.observerResize = H && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (t = this.document) != null && t.body && this.observerResize && this.observerResize.observe(this.document.body), this.checkForDuplicatePlainTextRecords();
     const s = this.props.name || this.props.id;
-    this.KendoPasteSubscription = at(this._element, {
+    this.KendoPasteSubscription = lt(this._element, {
       fieldName: s,
       onValueChange: (e) => {
         this.handleKendoPasteValue(e);
@@ -342,99 +342,99 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
   }
   /** @hidden */
   render() {
-    const s = U(this).toLanguageString(
-      q,
-      W[q]
-    ), t = U(this).toLanguageString(
+    const s = $(this), t = s.toLanguageString(
       G,
-      W[G]
+      R[G]
+    ), e = s.toLanguageString(
+      U,
+      R[U]
     ), {
-      dir: e,
-      disabled: a,
-      clearButton: r = E.defaultProps.clearButton,
-      label: l,
-      textField: o,
-      className: p,
-      style: n,
-      loading: i,
-      iconClassName: d,
-      virtual: h,
-      size: v,
-      rounded: C,
-      fillMode: b,
-      opened: f = this.state.opened,
-      placeholder: g,
-      svgIcon: c,
-      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(
+      dir: a,
+      disabled: r,
+      clearButton: l = E.defaultProps.clearButton,
+      label: o,
+      textField: p,
+      className: n,
+      style: i,
+      loading: d,
+      iconClassName: h,
+      virtual: f,
+      size: b,
+      rounded: y,
+      fillMode: v,
+      opened: g = this.state.opened,
+      placeholder: u,
+      svgIcon: C,
+      unstyled: M
+    } = this.props, T = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, J = D(this.value, p), B = k(O) ? O : J, Q = l && (!!B || k(this.value)), V = this.base.vs, z = this.props.id || this._inputId, _ = M && M.uComboBox;
+    V.enabled = f !== void 0, f !== void 0 && (V.skip = f.skip, V.total = f.total, V.pageSize = f.pageSize);
+    const [X, Z] = Y(this.props.prefix || c.Fragment), [tt, et] = Y(this.props.suffix || c.Fragment), A = /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement(
       "span",
       {
         className: S(
           F.wrapper({
-            c: B,
-            size: v,
-            rounded: C,
-            fillMode: b,
-            disabled: a,
-            invalid: !M,
-            loading: i,
+            c: _,
+            size: b,
+            rounded: y,
+            fillMode: v,
+            disabled: r,
+            invalid: !T,
+            loading: d,
             required: this.required
           }),
-          p
+          n
         ),
         ref: this.componentRef,
-        style: l ? { ...n, width: void 0 } : n,
-        dir: e,
+        style: o ? { ...i, width: void 0 } : i,
+        dir: a,
         onFocus: this.handleFocus
       },
-      this.props.prefix && /* @__PURE__ */ u.createElement(J, { ...Q }),
-      this.renderSearchBar(V || "", R, g),
-      Y && !i && /* @__PURE__ */ u.createElement(xt, { onClick: this.clearButtonClick, key: "clearbutton" }),
-      i && /* @__PURE__ */ u.createElement(
-        nt,
+      this.props.prefix && /* @__PURE__ */ c.createElement(X, { ...Z }),
+      this.renderSearchBar(B || "", z, u),
+      Q && !d && /* @__PURE__ */ c.createElement(yt, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      d && /* @__PURE__ */ c.createElement(
+        rt,
         {
-          className: S(F.loadingIcon({ c: B })),
+          className: S(F.loadingIcon({ c: _ })),
           name: "loading",
           key: "loading"
         }
       ),
-      this.props.suffix && /* @__PURE__ */ u.createElement(X, { ...Z }),
-      /* @__PURE__ */ u.createElement(
-        It,
+      this.props.suffix && /* @__PURE__ */ c.createElement(tt, { ...et }),
+      /* @__PURE__ */ c.createElement(
+        Ct,
         {
           tabIndex: -1,
           type: "button",
-          "aria-label": f ? t : s,
-          svgIcon: c || (d ? void 0 : yt),
-          iconClass: d,
-          size: v,
-          fillMode: b,
-          className: S(F.inputButton({ c: B })),
+          "aria-label": g ? e : t,
+          svgIcon: C || (h ? void 0 : St),
+          iconClass: h,
+          size: b,
+          fillMode: v,
+          className: S(F.inputButton({ c: _ })),
           onClick: this.toggleBtnClick,
-          onMouseDown: (tt) => tt.preventDefault()
+          onMouseDown: (st) => st.preventDefault()
         }
       ),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
-    return l ? /* @__PURE__ */ u.createElement(
-      ct,
+    return o ? /* @__PURE__ */ c.createElement(
+      gt,
       {
-        label: l,
-        editorId: R,
-        editorValue: V,
-        editorValid: M,
-        editorDisabled: a,
-        style: { width: n ? n.width : void 0 },
-        children: K,
-        unstyled: x
+        label: o,
+        editorId: z,
+        editorValue: B,
+        editorValid: T,
+        editorDisabled: r,
+        style: { width: i ? i.width : void 0 },
+        children: A,
+        unstyled: M
       }
-    ) : K;
+    ) : A;
   }
   /** @hidden */
   onNavigate(s, t, e) {
-    const { virtual: a = { skip: 0 } } = this.props, r = y(this.props), l = this.props.filter ? this.props.filter : this.state.text;
+    const { virtual: a = { skip: 0 } } = this.props, r = I(this.props), l = this.props.filter ? this.props.filter : this.state.text;
     let o = -1, p;
     const n = this.base.vs, i = this.value;
     this._suggested = "";
@@ -459,7 +459,7 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
     return s && t && t[e] && t[e].disabled;
   }
   applyValueOnEnter(s, t) {
-    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;
+    const { textField: e, allowCustom: a, ignoreCase: r } = this.props, l = I(this.props), o = this.props.opened !== void 0 ? this.props.opened : this.state.opened, n = D(this.value, e) === s ? this.index : L(l, s, e, !1, r), i = n !== -1;
     let d;
     if (this._suggested = "", i)
       d = l[n];
@@ -470,21 +470,21 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
     this.triggerOnChange(d, t), o && this.base.togglePopup(t), this.props.filter === void 0 && this.state.text !== void 0 && (t.data.text = void 0), this.applyState(t);
   }
   applyValueOnRejectSuggestions(s, t) {
-    const { textField: e, allowCustom: a, ignoreCase: r } = this.props, l = y(this.props), o = 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 = I(this.props), o = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = D(this.value, e);
     if (this._suggested = "", s === p || s === "" && !k(p))
       return this.closeOpenedApplyStateNonMobileMode(t, o), this.applyState(t);
-    const n = P(l, s, e, !0, r), i = n !== -1;
+    const n = L(l, s, e, !0, r), i = n !== -1;
     let d = null;
     i ? d = l[n] : a && (d = s ? e ? { [e]: s } : s : null), this.triggerOnChange(d, t), this.state.text !== void 0 && (t.data.text = void 0, this.base.filterChanged("", t)), this.closeOpenedApplyStateNonMobileMode(t, o), this.applyState(t);
   }
   selectFocusedItem(s, 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);
+    const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: a, virtual: r = { skip: 0 }, focusedItemIndex: l = N } = this.props, o = I(this.props), p = r.skip, n = s === "" && p === 0 ? 0 : l(o, s, a);
     return n !== -1 ? this.handleItemSelect(n + p, t) : (this.triggerOnChange(null, t), this.state.text !== void 0 && (t.data.text = void 0)), e && this.base.togglePopup(t), this.applyState(t);
   }
   renderAdaptiveListContainer() {
-    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;
+    const { windowWidth: s = 0 } = this.state, { groupField: t, adaptiveTitle: e = this.props.label, adaptiveSubtitle: a } = this.props, r = I(this.props), l = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
     let { group: o } = this.state;
-    o === void 0 && t !== void 0 && (o = w(r[0], t));
+    o === void 0 && t !== void 0 && (o = D(r[0], t));
     const p = {
       title: e || this.props.label,
       subTitle: a,
@@ -493,23 +493,23 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
       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())));
+    return /* @__PURE__ */ c.createElement(kt, { ...p }, /* @__PURE__ */ c.createElement(Ft, null, /* @__PURE__ */ c.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
   }
   renderListContainer() {
-    const s = this.base, { dir: t, header: e, footer: a, groupField: r, size: l, list: o, virtual: p, groupStickyHeaderItemRender: n, unstyled: i } = this.props, d = 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,
+    const s = this.base, { dir: t, header: e, footer: a, groupField: r, size: l, list: o, virtual: p, groupStickyHeaderItemRender: n, unstyled: i } = this.props, d = I(this.props), h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, f = s.getPopupSettings(), b = f.width !== void 0 ? f.width : s.popupWidth, y = i && i.uComboBox;
+    let { group: v } = this.state;
+    return v === void 0 && r !== void 0 && (v = D(d[0], r)), /* @__PURE__ */ c.createElement(
+      bt,
       {
-        width: C,
+        width: b,
         popupSettings: {
-          ...v,
-          anchor: v.anchor || this.element,
+          ...f,
+          anchor: f.anchor || this.element,
           show: h,
           popupClass: S(
-            v.popupClass,
+            f.popupClass,
             F.listContainer({
-              c: b,
+              c: y,
               popup: !0
             })
           )
@@ -517,12 +517,12 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
         dir: t !== void 0 ? t : this.base.dirCalculated,
         itemsCount: [d.length]
       },
-      /* @__PURE__ */ u.createElement(
+      /* @__PURE__ */ c.createElement(
         "div",
         {
           className: S(
             F.list({
-              c: b,
+              c: y,
               list: o,
               size: l,
               tableSize: l,
@@ -530,70 +530,71 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
             })
           )
         },
-        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 }),
+        e && /* @__PURE__ */ c.createElement("div", { className: S(F.listHeader({ c: y })) }, e),
+        !o && v && d.length !== 0 && /* @__PURE__ */ c.createElement(q, { group: v, render: n }),
         this.renderList(),
-        a && /* @__PURE__ */ u.createElement(
+        a && /* @__PURE__ */ c.createElement(
           "div",
           {
             className: S(
-              F.listFooter({ c: b }),
+              F.listFooter({ c: y }),
               this.props.footerClassName
             )
           },
           a
         )
       ),
-      this.showLicenseWatermark && /* @__PURE__ */ u.createElement(lt, { message: this.licenseMessage })
+      this.showLicenseWatermark && /* @__PURE__ */ c.createElement(pt, { message: this.licenseMessage })
     );
   }
   renderList() {
-    const s = this.base, {
-      textField: t,
-      dataItemKey: e,
-      listNoDataRender: a,
-      itemRender: r,
-      groupHeaderItemRender: l,
-      virtual: o = { skip: 0, total: void 0 },
-      unstyled: p
-    } = 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(
-      x,
+    const s = this.base, t = $(this), {
+      textField: e,
+      dataItemKey: a,
+      listNoDataRender: r,
+      itemRender: l,
+      groupHeaderItemRender: o,
+      virtual: p = { skip: 0, total: void 0 },
+      unstyled: n
+    } = this.props, i = I(this.props), d = s.getPopupSettings(), h = s.vs, f = p.skip, b = this.props.opened !== void 0 ? this.props.opened : this.state.opened, y = `translateY(${h.translate}px)`, v = b ? this.getFocusedIndex(this.hasDuplicates) : void 0, g = this.props.filter !== void 0 ? this.props.filter : this.state.text, u = D(this.value, e), C = k(g) && g !== u ? null : this.value, M = this.props.list || xt, T = n && n.uComboBox;
+    return /* @__PURE__ */ c.createElement(
+      M,
       {
         id: s.listBoxId,
-        virtual: !!o,
-        show: v,
-        data: n,
-        focusedIndex: b,
-        value: c,
-        textField: t,
-        valueField: e,
+        virtual: !!p,
+        show: b,
+        data: i,
+        focusedIndex: v,
+        value: C,
+        textField: e,
+        valueField: a,
         groupField: this.props.groupField,
         isMultiColumn: this.props.isMultiColumn,
         optionsGuid: s.guid,
         hasDuplicates: this.hasDuplicates,
+        ariaLabel: t.toLanguageString(j, R[j]),
         listRef: (O) => {
-          d.list = this.base.list = O, this.itemHeight = 0;
+          h.list = this.base.list = O, this.itemHeight = 0;
         },
-        wrapperStyle: this.mobileMode ? {} : { maxHeight: i.height },
+        wrapperStyle: this.mobileMode ? {} : { maxHeight: d.height },
         wrapperCssClass: S(
           F.listContent({
-            c: M,
-            virtual: o
+            c: T,
+            virtual: p
           })
         ),
-        listStyle: d.enabled ? { transform: C } : void 0,
+        listStyle: h.enabled ? { transform: y } : void 0,
         key: "listkey",
-        skip: h,
+        skip: f,
         onClick: this.handleItemClick,
-        itemRender: r,
-        groupHeaderItemRender: l,
-        noDataRender: a,
+        itemRender: l,
+        groupHeaderItemRender: o,
+        noDataRender: r,
         onMouseDown: (O) => O.preventDefault(),
         onScroll: this.onScroll,
-        wrapperRef: d.scrollerRef,
+        wrapperRef: h.scrollerRef,
         scroller: this.base.renderScrollElement(),
-        ariaSetSize: o.total
+        ariaSetSize: p.total
       }
     );
   }
@@ -608,13 +609,12 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
       dataItemKey: i,
       virtual: d = { skip: 0 },
       unstyled: h,
-      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, i))
-    );
-    return this._suggested && !D(this._valueOnDidUpdate, f, i) && (this._suggested = ""), /* @__PURE__ */ u.createElement(
-      mt,
+      inputAttributes: f
+    } = this.props;
+    I(this.props);
+    const b = this.props.opened !== void 0 ? this.props.opened : this.state.opened, y = b ? this.getFocusedIndex(this.hasDuplicates) : -1;
+    return this._suggested && !w(this._valueOnDidUpdate, this.value, i) && (this._suggested = ""), /* @__PURE__ */ c.createElement(
+      vt,
       {
         id: t,
         readOnly: b && this.mobileMode,
@@ -624,8 +624,8 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
         title: o,
         value: s + this._suggested,
         suggestedText: this._suggested,
-        ref: (c) => {
-          this._input = c && c.input;
+        ref: (v) => {
+          this._input = v && v.input;
         },
         onClick: this.onInputClick,
         onKeyDown: this.onInputKeyDown,
@@ -635,7 +635,7 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
         disabled: l,
         expanded: b,
         owns: this.base.listBoxId,
-        activedescendant: `option-${this.base.guid}-${g + d.skip}`,
+        activedescendant: b && y >= 0 ? `k-${this.base.guid}-item-${y + d.skip + 1}` : void 0,
         role: "combobox",
         ariaLabelledBy: p,
         ariaLabel: this.props.ariaLabel,
@@ -644,7 +644,7 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
         render: this.props.valueRender,
         ariaControls: b ? this.base.listBoxId : void 0,
         unstyled: h,
-        inputAttributes: v
+        inputAttributes: f
       }
     );
   }
@@ -656,21 +656,21 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
   }
   triggerOnChange(s, t) {
     const e = this.value;
-    !this.hasDuplicates && (!k(e) && !k(s) || D(e, s, this.props.dataItemKey)) || (this.props.value === void 0 && (t.data.value = s), this._valueDuringOnChange = s, t.events.push({ type: "onChange" }));
+    !this.hasDuplicates && (!k(e) && !k(s) || w(e, s, this.props.dataItemKey)) || (this.props.value === void 0 && (t.data.value = s), this._valueDuringOnChange = s, t.events.push({ type: "onChange" }));
   }
   getFocusedIndex(s) {
     const t = this.value, {
       textField: e,
       dataItemKey: a,
       virtual: r = { skip: 0 },
-      focusedItemIndex: l = L,
+      focusedItemIndex: l = N,
       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;
+    } = this.props, p = I(this.props), n = this.props.filter ? this.props.filter : this.state.text;
+    return s && this.navigationIndex !== void 0 ? this.navigationIndex : k(t) && n === void 0 ? p.findIndex((i) => w(i, t, a)) : n ? l(p, n, e) : o && e && !n && r.skip === 0 ? p.findIndex((i) => !i.disabled) : r.skip === 0 ? 0 : -1;
   }
   suggestValue(s) {
     const { data: t, textField: e } = this.props;
-    this._suggested = gt(s, t, e);
+    this._suggested = ft(s, t, e);
   }
   applyState(s) {
     this.base.applyState(s), this._valueDuringOnChange = void 0;
@@ -681,7 +681,7 @@ const Ft = "Please enter a valid value!", E = class E extends u.Component {
   }
 };
 E.displayName = "ComboBox", E.propTypes = {
-  ..._.propTypes,
+  ...P.propTypes,
   size: m.oneOf(["small", "medium", "large"]),
   rounded: m.oneOf(["small", "medium", "large", "full", "none"]),
   fillMode: m.oneOf(["solid", "flat", "outline"]),
@@ -695,7 +695,7 @@ E.displayName = "ComboBox", E.propTypes = {
   ignoreCase: m.bool,
   clearButton: m.bool,
   iconClassName: m.string,
-  svgIcon: ot,
+  svgIcon: nt,
   validationMessage: m.string,
   required: m.bool,
   id: m.string,
@@ -707,7 +707,7 @@ E.displayName = "ComboBox", E.propTypes = {
   skipDisabledItems: m.bool,
   inputAttributes: m.object
 }, E.defaultProps = {
-  ..._.defaultProps,
+  ...P.defaultProps,
   size: void 0,
   rounded: void 0,
   fillMode: void 0,
@@ -720,18 +720,18 @@ E.displayName = "ComboBox", E.propTypes = {
   prefix: void 0,
   suffix: void 0
 };
-let N = E;
-const kt = et(), Dt = rt(
-  pt(
-    kt,
-    dt(
-      ht(N)
+let K = E;
+const wt = it(), Et = dt(
+  ht(
+    wt,
+    ct(
+      ut(K)
     )
   )
 );
-Dt.displayName = "KendoReactComboBox";
+Et.displayName = "KendoReactComboBox";
 export {
-  Dt as ComboBox,
-  kt as ComboBoxPropsContext,
-  N as ComboBoxWithoutContext
+  Et as ComboBox,
+  wt as ComboBoxPropsContext,
+  K as ComboBoxWithoutContext
 };