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

package/AutoComplete/AutoComplete.mjs

@@ -6,46 +6,48 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as c from "react";
-import u from "prop-types";
+import l from "prop-types";
 import N from "../common/SearchBar.mjs";
-import R from "../common/ListContainer.mjs";
-import K from "../common/List.mjs";
-import x from "../common/DropDownBase.mjs";
-import L from "../common/GroupStickyHeader.mjs";
-import { getFilteredData as b, getItemValue as I, areSame as S, isPresent as z, getFocusedItem as F, itemIndexStartsWith as H } from "../common/utils.mjs";
-import { withIdHOC as A, withPropsContext as q, withAdaptiveModeContext as W, createPropsContext as G, classNames as w, kendoThemeMaps as U, Keys as f, canUseDOM as E, subscribeToKendoPaste as $, IconWrap as j } from "@progress/kendo-react-common";
-import { FloatingLabel as J } from "@progress/kendo-react-labels";
-import Q from "../common/ClearButton.mjs";
-import { AdaptiveMode as X } from "../common/AdaptiveMode.mjs";
-import M from "../common/withCustomComponent.mjs";
-import { ActionSheetContent as Y } from "@progress/kendo-react-layout";
-import Z from "../common/ListFilter.mjs";
-const ee = "Please enter a valid value!", { sizeMap: D, roundedMap: te } = U, y = class y extends c.Component {
+import z from "../common/ListContainer.mjs";
+import R from "../common/List.mjs";
+import S from "../common/DropDownBase.mjs";
+import K from "../common/GroupStickyHeader.mjs";
+import { getFilteredData as b, getItemValue as I, areSame as w, isPresent as A, getFocusedItem as F, itemIndexStartsWith as H } from "../common/utils.mjs";
+import { createPropsContext as q, classNames as k, kendoThemeMaps as W, Keys as f, canUseDOM as E, subscribeToKendoPaste as G, IconWrap as $, withIdHOC as U, withPropsContext as j, withAdaptiveModeContext as J } from "@progress/kendo-react-common";
+import { FloatingLabel as Q } from "@progress/kendo-react-labels";
+import { provideLocalizationService as X, registerForLocalization as Y } from "@progress/kendo-react-intl";
+import { autoCompleteListAriaLabel as M, messages as Z } from "../messages/index.mjs";
+import ee from "../common/ClearButton.mjs";
+import { AdaptiveMode as te } from "../common/AdaptiveMode.mjs";
+import D from "../common/withCustomComponent.mjs";
+import { ActionSheetContent as se } from "@progress/kendo-react-layout";
+import ie from "../common/ListFilter.mjs";
+const oe = "Please enter a valid value!", { sizeMap: P, roundedMap: ne } = W, y = class y extends c.Component {
   constructor() {
-    super(...arguments), this.state = {}, this.base = new x(this), this._element = null, this._suggested = "", this._input = null, this._adaptiveInput = null, this._skipFocusEvent = !1, this._isScrolling = !1, this.itemHeight = 0, this.focus = () => {
+    super(...arguments), this.state = {}, this.base = new S(this), this._element = null, this._suggested = "", this._input = null, this._adaptiveInput = null, this._skipFocusEvent = !1, this._isScrolling = !1, this.itemHeight = 0, this.focus = () => {
       this._input && this._input.focus();
     }, this.handleKendoPasteValue = (e) => {
-      const s = e != null ? String(e) : "", t = this.base.initState();
-      t.syntheticEvent = {
+      const t = e != null ? String(e) : "", s = this.base.initState();
+      s.syntheticEvent = {
         target: this._element,
         currentTarget: this._element,
         nativeEvent: new Event("change", { bubbles: !0 })
-      }, this.triggerOnChange(s, t), this.applyState(t);
-    }, this.handleItemSelect = (e, s) => {
-      const t = b(this.props), n = I(t[e], this.props.textField);
-      this.state.text && !this.mobileMode && (this.state.text && (s.data.text = ""), this.base.filterChanged("", s)), this._adaptiveInput && this._adaptiveInput.blur(), this.triggerOnChange(n, s);
-    }, this.itemFocus = (e, s) => {
-      const { textField: t } = this.props, i = b(this.props)[e];
-      S(this.state.focusedItem, i, t) || (s.data.focusedItem = i);
+      }, this.triggerOnChange(t, s), this.applyState(s);
+    }, this.handleItemSelect = (e, t) => {
+      const s = b(this.props), n = I(s[e], this.props.textField);
+      this.state.text && !this.mobileMode && (this.state.text && (t.data.text = ""), this.base.filterChanged("", t)), this._adaptiveInput && this._adaptiveInput.blur(), this.triggerOnChange(n, t);
+    }, this.itemFocus = (e, t) => {
+      const { textField: s } = this.props, i = b(this.props)[e];
+      w(this.state.focusedItem, i, s) || (t.data.focusedItem = i);
     }, this.togglePopup = (e) => {
       this.base.togglePopup(e);
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || ee
+        this.validity.valid ? "" : this.props.validationMessage || oe
       );
     }, this.renderAdaptiveListContainer = () => {
-      const { windowWidth: e = 0 } = this.state, s = /* @__PURE__ */ c.createElement(
-        Z,
+      const { windowWidth: e = 0 } = this.state, t = /* @__PURE__ */ c.createElement(
+        ie,
         {
           value: this.value,
           ref: (n) => {
@@ -58,72 +60,72 @@ const ee = "Please enter a valid value!", { sizeMap: D, roundedMap: te } = U, y
           fillMode: this.props.fillMode,
           placeholder: this.props.placeholder
         }
-      ), t = {
+      ), s = {
         title: this.props.adaptiveTitle || this.props.label,
         subTitle: this.props.adaptiveSubtitle,
         expand: this.opened,
         onClose: (n) => this.onCancel(n),
         windowWidth: e,
-        mobileFilter: s
+        mobileFilter: t
       };
-      return /* @__PURE__ */ c.createElement(X, { ...t }, /* @__PURE__ */ c.createElement(Y, null, /* @__PURE__ */ c.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
+      return /* @__PURE__ */ c.createElement(te, { ...s }, /* @__PURE__ */ c.createElement(se, null, /* @__PURE__ */ c.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
     }, this.onCancel = (e) => {
-      const s = this.base.initState();
-      s.syntheticEvent = e, e.stopPropagation(), this.opened && this.base.togglePopup(s), s.events.push({ type: "onCancel" });
-      const t = this.state.text;
-      z(t) && t !== "" && this.base.filterChanged("", s), this.state.text && (s.data.text = ""), this.applyState(s);
+      const t = this.base.initState();
+      t.syntheticEvent = e, e.stopPropagation(), this.opened && this.base.togglePopup(t), t.events.push({ type: "onCancel" });
+      const s = this.state.text;
+      A(s) && s !== "" && this.base.filterChanged("", t), this.state.text && (t.data.text = ""), this.applyState(t);
     }, this.listContainerContent = () => {
-      const { header: e, footer: s, size: t, groupStickyHeaderItemRender: n, groupField: i, list: a } = this.props, d = b(this.props);
+      const { header: e, footer: t, size: s, groupStickyHeaderItemRender: n, groupField: i, list: a } = this.props, d = b(this.props);
       let { group: o } = this.state;
       return o === void 0 && i !== void 0 && (o = I(d[0], i)), /* @__PURE__ */ c.createElement(c.Fragment, null, e && /* @__PURE__ */ c.createElement("div", { className: "k-list-header" }, e), /* @__PURE__ */ c.createElement(
         "div",
         {
-          className: w("k-list", {
-            [`k-list-${this.mobileMode ? "lg" : D[t] || t}`]: this.mobileMode || t
+          className: k("k-list", {
+            [`k-list-${this.mobileMode ? "lg" : P[s] || s}`]: this.mobileMode || s
           })
         },
-        !a && o && d.length !== 0 && /* @__PURE__ */ c.createElement(L, { group: o, render: n }),
+        !a && o && d.length !== 0 && /* @__PURE__ */ c.createElement(K, { group: o, render: n }),
         this.renderList()
-      ), s && /* @__PURE__ */ c.createElement("div", { className: "k-list-footer" }, s));
+      ), t && /* @__PURE__ */ c.createElement("div", { className: "k-list-footer" }, t));
     }, this.onScroll = (e) => {
       this._isScrolling = !0;
-      const { list: s } = this.base, { groupField: t } = this.props;
+      const { list: t } = this.base, { groupField: s } = this.props;
       let n = b(this.props);
-      if (!t || !n.length)
+      if (!s || !n.length)
         return;
-      const i = this.itemHeight || (s ? s.children[0].offsetHeight : 0), d = e.target.scrollTop;
-      t && (n = this.base.getGroupedDataModernMode(n, t));
-      let o = n[0][t];
+      const i = this.itemHeight || (t ? t.children[0].offsetHeight : 0), d = e.target.scrollTop;
+      s && (n = this.base.getGroupedDataModernMode(n, s));
+      let o = n[0][s];
       for (let r = 1; r < n.length && !(i * r > d); r++)
-        n[r] && n[r][t] && (o = n[r][t]);
+        n[r] && n[r][s] && (o = n[r][s]);
       o !== this.state.group && this.setState({
         group: o
       });
-    }, this.handleItemClick = (e, s) => {
-      this.base.handleItemClick(e, s), this._valueDuringOnChange = void 0;
+    }, this.handleItemClick = (e, t) => {
+      this.base.handleItemClick(e, t), this._valueDuringOnChange = void 0;
     }, this.onChangeHandler = (e) => {
-      const t = this.base.initState(), n = this.mobileMode ? e.target.element : e.currentTarget, i = n.value, a = n.selectionEnd === i.length;
-      t.syntheticEvent = e;
-      const d = this._suggested, o = this.value, r = o && o.substring(0, o.length - d.length), p = r && r === i, l = r && r.length > i.length, { suggest: v } = this.props, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+      const s = this.base.initState(), n = this.mobileMode ? e.target.element : e.currentTarget, i = n.value, a = n.selectionEnd === i.length;
+      s.syntheticEvent = e;
+      const d = this._suggested, o = this.value, r = o && o.substring(0, o.length - d.length), u = r && r === i, p = r && r.length > i.length, { suggest: v } = this.props, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
       if (v !== void 0 && v !== !1) {
-        p || l || !a ? this._suggested = "" : this.suggestValue(i);
+        u || p || !a ? this._suggested = "" : this.suggestValue(i);
         const g = i + this._suggested, m = { userInput: i, value: this._suggested };
-        this.triggerOnChange(g, t, { suggestion: m });
+        this.triggerOnChange(g, s, { suggestion: m });
       } else
-        this._suggested = "", this.triggerOnChange(i, t);
-      (!h && i || h && !i) && this.togglePopup(t), t.data.focusedItem = void 0, this.applyState(t), this.setState({ group: void 0 });
+        this._suggested = "", this.triggerOnChange(i, s);
+      (!h && i || h && !i) && this.togglePopup(s), s.data.focusedItem = void 0, this.applyState(s), this.setState({ group: void 0 });
     }, this.clearButtonClick = (e) => {
-      const t = this.base.initState(), n = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
-      t.syntheticEvent = e;
+      const s = this.base.initState(), n = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+      s.syntheticEvent = e;
       const i = "";
-      this._suggested = "", this.triggerOnChange(i, t), this.state.focusedItem !== void 0 && (t.data.focusedItem = void 0), n && this.togglePopup(t), this.applyState(t);
+      this._suggested = "", this.triggerOnChange(i, s), this.state.focusedItem !== void 0 && (s.data.focusedItem = void 0), n && this.togglePopup(s), this.applyState(s);
     }, this.onInputKeyDown = (e) => {
-      const { skipDisabledItems: s, groupField: t, textField: n } = this.props, i = b(this.props);
+      const { skipDisabledItems: t, groupField: s, textField: n } = this.props, i = b(this.props);
       this._isScrolling && (this._isScrolling = !1);
-      const a = this.focusedIndex(), d = i[a], o = e.keyCode, r = e.altKey, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, l = this.base.initState();
-      l.syntheticEvent = e;
+      const a = this.focusedIndex(), d = i[a], o = e.keyCode, r = e.altKey, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = this.base.initState();
+      p.syntheticEvent = e;
       const v = () => {
-        p && e.preventDefault();
+        u && e.preventDefault();
       };
       if (r && o === f.down)
         this.setState({
@@ -133,18 +135,18 @@ const ee = "Please enter a valid value!", { sizeMap: D, roundedMap: te } = U, y
         this.setState({
           opened: !1
         });
-      else if (p && o === f.pageUp)
+      else if (u && o === f.pageUp)
         v(), this.base.scrollPopupByPageSize(-1);
-      else if (p && o === f.pageDown)
+      else if (u && o === f.pageDown)
         v(), this.base.scrollPopupByPageSize(1);
-      else if (p && (o === f.enter || o === f.esc))
-        v(), s === !1 && d && d.disabled ? (p && this.togglePopup(l), this.applyState(l)) : this.applyInputValue(e.currentTarget.value, l, e.keyCode);
-      else if (!p && o === f.esc)
-        this._suggested = "", this.triggerOnChange("", l), this.state.focusedItem !== void 0 && (l.data.focusedItem = void 0), this.applyState(l);
+      else if (u && (o === f.enter || o === f.esc))
+        v(), t === !1 && d && d.disabled ? (u && this.togglePopup(p), this.applyState(p)) : this.applyInputValue(e.currentTarget.value, p, e.keyCode);
+      else if (!u && o === f.esc)
+        this._suggested = "", this.triggerOnChange("", p), this.state.focusedItem !== void 0 && (p.data.focusedItem = void 0), this.applyState(p);
       else if (o === f.up || o === f.down) {
-        if (t !== "" && n)
-          if (!this.props.skipDisabledItems && p)
-            this.onNavigate(l, o);
+        if (s !== "" && n)
+          if (!this.props.skipDisabledItems && u)
+            this.onNavigate(p, o);
           else {
             let h = 0;
             if (o === f.down || o === f.right) {
@@ -164,11 +166,11 @@ const ee = "Please enter a valid value!", { sizeMap: D, roundedMap: te } = U, y
             }
             if (h !== void 0) {
               const g = h - a;
-              this.onNavigate(l, o, g);
-            } else h === void 0 && a === i.length - 1 && this.onNavigate(l, o);
+              this.onNavigate(p, o, g);
+            } else h === void 0 && a === i.length - 1 && this.onNavigate(p, o);
           }
-        else if (!this.props.skipDisabledItems && p)
-          this.onNavigate(l, o);
+        else if (!this.props.skipDisabledItems && u)
+          this.onNavigate(p, o);
         else {
           let h = null;
           if (o === f.down || o === f.right)
@@ -180,22 +182,22 @@ const ee = "Please enter a valid value!", { sizeMap: D, roundedMap: te } = U, y
           }
           if (h) {
             const g = h.id - a - 1;
-            this.onNavigate(l, o, g);
+            this.onNavigate(p, o, g);
           } else
-            this.onNavigate(l, o);
+            this.onNavigate(p, o);
         }
-        this.applyState(l), v();
+        this.applyState(p), v();
       }
     }, this.handleFocus = (e) => {
       this._skipFocusEvent || this.base.handleFocus(e);
     }, this.handleBlur = (e) => {
-      const s = this.base.initState();
-      !this.state.focused || this._skipFocusEvent || (s.syntheticEvent = e, s.data.focused = !1, s.events.push({ type: "onBlur" }), this.opened && !this.mobileMode && (this.state.opened && (s.data.opened = !1), s.events.push({ type: "onClose" })), this.applyState(s));
-    }, this.handleWrapperClick = (e) => {
-      const s = this._input;
-      !this.opened && s && this.focusElement(s);
       const t = this.base.initState();
-      t.syntheticEvent = e, !this.state.focused && !this.mobileMode && (t.events.push({ type: "onFocus" }), t.data.focused = !0), this.mobileMode && window.setTimeout(() => this._adaptiveInput && this._adaptiveInput.focus(), 300), this.base.togglePopup(t), this.applyState(t);
+      !this.state.focused || this._skipFocusEvent || (t.syntheticEvent = e, t.data.focused = !1, t.events.push({ type: "onBlur" }), this.opened && !this.mobileMode && (this.state.opened && (t.data.opened = !1), t.events.push({ type: "onClose" })), this.applyState(t));
+    }, this.handleWrapperClick = (e) => {
+      const t = this._input;
+      !this.opened && t && this.focusElement(t);
+      const s = this.base.initState();
+      s.syntheticEvent = e, !this.state.focused && !this.mobileMode && (s.events.push({ type: "onFocus" }), s.data.focused = !0), this.mobileMode && window.setTimeout(() => this._adaptiveInput && this._adaptiveInput.focus(), 300), this.base.togglePopup(s), this.applyState(s);
     };
   }
   get _inputId() {
@@ -227,10 +229,10 @@ const ee = "Please enter a valid value!", { sizeMap: D, roundedMap: te } = U, y
    * Represents the validity state into which the AutoComplete is set.
    */
   get validity() {
-    const e = this.props.validationMessage !== void 0, s = !this.required || this.value !== "", t = this.props.valid !== void 0 ? this.props.valid : s;
+    const e = this.props.validationMessage !== void 0, t = !this.required || this.value !== "", s = this.props.valid !== void 0 ? this.props.valid : t;
     return {
       customError: e,
-      valid: t,
+      valid: s,
       valueMissing: this.value === null
     };
   }
@@ -242,8 +244,8 @@ const ee = "Please enter a valid value!", { sizeMap: D, roundedMap: te } = U, y
    * The mobile mode of the AutoComplete.
    */
   get mobileMode() {
-    var s;
-    return !!(this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth <= ((s = this.props._adaptiveMode) == null ? void 0 : s.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);
   }
   /**
    * @hidden
@@ -260,14 +262,14 @@ const ee = "Please enter a valid value!", { sizeMap: D, roundedMap: te } = U, y
   /**
    * @hidden
    */
-  componentDidUpdate(e, s) {
+  componentDidUpdate(e, t) {
     var h;
-    const { groupField: t = "" } = this.props, n = b(this.props), { data: i = [] } = e, a = this.focusedIndex(), d = n[a], o = i !== n, r = d !== void 0 && s.focusedItem !== d, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, l = e.opened !== void 0 ? e.opened : s.opened, v = !l && p;
-    if (t === "")
-      (p && (r || o) || v) && this.base.scrollToItem(a);
+    const { groupField: s = "" } = this.props, n = b(this.props), { data: i = [] } = e, a = this.focusedIndex(), d = n[a], o = i !== n, r = d !== void 0 && t.focusedItem !== d, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = e.opened !== void 0 ? e.opened : t.opened, v = !p && u;
+    if (s === "")
+      (u && (r || o) || v) && this.base.scrollToItem(a);
     else if (!this._isScrolling) {
-      const g = (h = this.base.getGroupedDataModernMode(n, t)) == null ? void 0 : h.indexOf(d);
-      v && (n && n.length !== 0 && this.base.resetGroupStickyHeader(n[0][t], this), this.base.scrollToItem(g)), p && l && r && this.base.scrollToItem(g);
+      const g = (h = this.base.getGroupedDataModernMode(n, s)) == null ? void 0 : h.indexOf(d);
+      v && (n && n.length !== 0 && this.base.resetGroupStickyHeader(n[0][s], this), this.base.scrollToItem(g)), u && p && r && this.base.scrollToItem(g);
     }
     this.setValidity();
   }
@@ -275,13 +277,13 @@ const ee = "Please enter a valid value!", { sizeMap: D, roundedMap: te } = U, y
    * @hidden
    */
   componentDidMount() {
-    var s;
-    this.observerResize = E && 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);
+    var t;
+    this.observerResize = E && 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);
     const e = this.props.name || this.props.id;
-    this.KendoPasteSubscription = $(this._element, {
+    this.KendoPasteSubscription = G(this._element, {
       fieldName: e,
-      onValueChange: (t) => {
-        this.handleKendoPasteValue(t);
+      onValueChange: (s) => {
+        this.handleKendoPasteValue(s);
       }
     });
   }
@@ -296,45 +298,45 @@ const ee = "Please enter a valid value!", { sizeMap: D, roundedMap: te } = U, y
    * @hidden
    */
   render() {
-    const { dir: e, disabled: s, label: t, className: n, style: i, loading: a, suggest: d, size: o, rounded: r, fillMode: p } = this.props, l = !this.validityStyles || this.validity.valid, v = this.base, h = this.value, g = this.props.clearButton !== !1 && !a && !!h, m = this.props.id || this._inputId, P = this.state.focused;
+    const { dir: e, disabled: t, label: s, className: n, style: i, loading: a, suggest: d, size: o, rounded: r, fillMode: u } = this.props, p = !this.validityStyles || this.validity.valid, v = this.base, h = this.value, g = this.props.clearButton !== !1 && !a && !!h, m = this.props.id || this._inputId, O = this.state.focused;
     typeof d == "string" && (this._suggested = d);
-    const [O, B] = M(this.props.prefix || c.Fragment), [T, V] = M(this.props.suffix || c.Fragment), _ = /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement(
+    const [B, T] = D(this.props.prefix || c.Fragment), [V, L] = D(this.props.suffix || c.Fragment), _ = /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement(
       "span",
       {
-        className: w("k-autocomplete k-input", n, {
-          [`k-input-${D[o] || o}`]: o,
-          [`k-rounded-${te[r] || r}`]: r,
-          [`k-input-${p}`]: p,
-          "k-invalid": !l,
-          "k-focus": P && !s,
+        className: k("k-autocomplete k-input", n, {
+          [`k-input-${P[o] || o}`]: o,
+          [`k-rounded-${ne[r] || r}`]: r,
+          [`k-input-${u}`]: u,
+          "k-invalid": !p,
+          "k-focus": O && !t,
           "k-loading": a,
           "k-required": this.required,
-          "k-disabled": s
+          "k-disabled": t
         }),
         ref: (C) => {
           this._element = C, v.wrapper = C;
         },
-        style: t ? { ...i, width: void 0 } : i,
+        style: s ? { ...i, width: void 0 } : i,
         dir: e,
         onFocus: this.mobileMode ? (C) => this.handleWrapperClick(C) : this.handleFocus,
         onBlur: this.handleBlur,
         onClick: this.handleWrapperClick
       },
-      this.props.prefix && /* @__PURE__ */ c.createElement(O, { ...B }),
+      this.props.prefix && /* @__PURE__ */ c.createElement(B, { ...T }),
       this.renderSearchBar(h || "", m),
-      a && /* @__PURE__ */ c.createElement(j, { className: "k-input-loading-icon", name: "loading" }),
-      g && !a && /* @__PURE__ */ c.createElement(Q, { onClick: this.clearButtonClick, key: "clearbutton" }),
-      this.props.suffix && /* @__PURE__ */ c.createElement(T, { ...V }),
+      a && /* @__PURE__ */ c.createElement($, { className: "k-input-loading-icon", name: "loading" }),
+      g && !a && /* @__PURE__ */ c.createElement(ee, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      this.props.suffix && /* @__PURE__ */ c.createElement(V, { ...L }),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
-    return t ? /* @__PURE__ */ c.createElement(
-      J,
+    return s ? /* @__PURE__ */ c.createElement(
+      Q,
       {
-        label: t,
+        label: s,
         editorId: m,
         editorValue: h,
-        editorValid: l,
-        editorDisabled: s,
+        editorValid: p,
+        editorDisabled: t,
         style: { width: i ? i.width : void 0 },
         children: _
       }
@@ -343,33 +345,33 @@ const ee = "Please enter a valid value!", { sizeMap: D, roundedMap: te } = U, y
   /**
    * @hidden
    */
-  onNavigate(e, s, t) {
-    const n = this.value, { textField: i, focusedItemIndex: a } = this.props, d = b(this.props), o = this.state.focusedItem !== void 0 ? d.findIndex((p) => S(p, this.state.focusedItem, i)) : a ? a(d, n, i) : d.indexOf(F(d, n, i)), r = this.base.navigation.navigate({
-      keyCode: s,
+  onNavigate(e, t, s) {
+    const n = this.value, { textField: i, focusedItemIndex: a } = this.props, d = b(this.props), o = this.state.focusedItem !== void 0 ? d.findIndex((u) => w(u, this.state.focusedItem, i)) : a ? a(d, n, i) : d.indexOf(F(d, n, i)), r = this.base.navigation.navigate({
+      keyCode: t,
       current: o,
       max: d.length - 1,
       min: 0,
-      skipItems: t || void 0
+      skipItems: s || void 0
     });
     r !== void 0 && this.itemFocus(r, e), this.applyState(e);
   }
   /**
    * @hidden
    */
-  applyInputValue(e, s, t) {
+  applyInputValue(e, t, s) {
     const n = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: i } = this.props, a = b(this.props), d = this.focusedIndex(), o = a[d];
-    if (this._suggested = "", n && t === f.enter && o && !o.disabled) {
+    if (this._suggested = "", n && s === f.enter && o && !o.disabled) {
       const r = I(a[this.focusedIndex(e)], i);
-      this.triggerOnChange(r, s);
+      this.triggerOnChange(r, t);
     }
-    n && this.togglePopup(s), this.applyState(s);
+    n && this.togglePopup(t), this.applyState(t);
   }
-  renderSearchBar(e, s) {
-    const t = this.base, { placeholder: n, tabIndex: i, disabled: a, readonly: d, inputAttributes: o } = this.props, { focused: r } = this.state, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+  renderSearchBar(e, t) {
+    const s = this.base, { placeholder: n, tabIndex: i, disabled: a, readonly: d, inputAttributes: o } = this.props, { focused: r } = this.state, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
     return /* @__PURE__ */ c.createElement(
       N,
       {
-        id: s,
+        id: t,
         placeholder: n,
         tabIndex: i,
         accessKey: this.props.accessKey,
@@ -377,20 +379,21 @@ const ee = "Please enter a valid value!", { sizeMap: D, roundedMap: te } = U, y
         suggestedText: this._suggested,
         focused: r,
         name: this.props.name,
-        ref: (l) => {
-          this._input = l && l.input;
+        ref: (p) => {
+          this._input = p && p.input;
         },
         onKeyDown: this.onInputKeyDown,
         onChange: this.onChangeHandler,
-        onFocus: t.handleFocus,
+        onFocus: s.handleFocus,
         onBlur: this.handleBlur,
         disabled: a,
         readOnly: d,
-        expanded: p,
-        owns: t.listBoxId,
-        activedescendant: "option-" + t.guid + "-" + this.focusedIndex(),
+        expanded: u,
+        ariaControls: u ? s.listBoxId : void 0,
+        activedescendant: `k-${s.guid}-item-${this.focusedIndex() + 1}`,
         role: "combobox",
         ariaLabelledBy: this.props.ariaLabelledBy,
+        ariaLabel: this.props.ariaLabel,
         ariaDescribedBy: this.props.ariaDescribedBy,
         ariaRequired: this.required,
         render: this.props.valueRender,
@@ -399,55 +402,59 @@ const ee = "Please enter a valid value!", { sizeMap: D, roundedMap: te } = U, y
     );
   }
   renderListContainer() {
-    const e = this.base, { dir: s, groupField: t } = this.props, n = b(this.props), i = e.getPopupSettings(), a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = i.width !== void 0 ? i.width : e.popupWidth;
+    const e = this.base, { dir: t, groupField: s } = this.props, n = b(this.props), i = e.getPopupSettings(), a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = i.width !== void 0 ? i.width : e.popupWidth;
     let { group: o } = this.state;
-    return o === void 0 && t !== void 0 && (o = I(n[0], t)), /* @__PURE__ */ c.createElement(
-      R,
+    return o === void 0 && s !== void 0 && (o = I(n[0], s)), /* @__PURE__ */ c.createElement(
+      z,
       {
         width: d,
         popupSettings: {
           ...i,
           anchor: i.anchor || this.element,
           show: a,
-          popupClass: w(i.popupClass, "k-list-container", "k-autocomplete-popup")
+          popupClass: k(i.popupClass, "k-list-container", "k-autocomplete-popup")
         },
-        dir: s !== void 0 ? s : this.base.dirCalculated,
+        dir: t !== void 0 ? t : this.base.dirCalculated,
         itemsCount: [n.length]
       },
       this.listContainerContent()
     );
   }
   renderList() {
-    const e = this.base, s = e.getPopupSettings(), { textField: t, listNoDataRender: n, itemRender: i, groupHeaderItemRender: a } = this.props, d = b(this.props), o = this.value, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+    const e = this.base, t = X(this), s = e.getPopupSettings(), { textField: n, listNoDataRender: i, itemRender: a, groupHeaderItemRender: d } = this.props, o = b(this.props), r = this.value, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
     return /* @__PURE__ */ c.createElement(
-      K,
+      R,
       {
         id: e.listBoxId,
-        show: r,
-        data: d.slice(),
+        show: u,
+        data: o.slice(),
         focusedIndex: this.focusedIndex(),
-        value: o,
-        textField: t,
-        valueField: t,
-        highlightSelected: !1,
+        value: r,
+        textField: n,
+        valueField: n,
+        highlightSelected: !0,
         optionsGuid: e.guid,
         groupField: this.props.groupField,
+        ariaLabel: t.toLanguageString(
+          M,
+          Z[M]
+        ),
         listRef: (p) => {
           e.list = p;
         },
         wrapperStyle: this.mobileMode ? {} : { maxHeight: s.height },
         wrapperCssClass: "k-list-content",
         onClick: this.handleItemClick,
-        itemRender: i,
-        groupHeaderItemRender: a,
-        noDataRender: n,
+        itemRender: a,
+        groupHeaderItemRender: d,
+        noDataRender: i,
         onMouseDown: (p) => p.preventDefault(),
         onScroll: this.onScroll
       }
     );
   }
-  triggerOnChange(e, s, t) {
-    this.value === e && !t || (s.data.value = e, this._valueDuringOnChange = e, s.events.push({ type: "onChange", ...t || {} }));
+  triggerOnChange(e, t, s) {
+    this.value === e && !s || (t.data.value = e, this._valueDuringOnChange = e, t.events.push({ type: "onChange", ...s || {} }));
   }
   focusElement(e) {
     this._skipFocusEvent = !0, e.focus(), window.setTimeout(() => this._skipFocusEvent = !1, 0);
@@ -457,54 +464,55 @@ const ee = "Please enter a valid value!", { sizeMap: D, roundedMap: te } = U, y
   }
   suggestValue(e) {
     if (this._suggested = "", e) {
-      const { textField: s } = this.props, t = b(this.props), n = t[H(t, e, s)];
+      const { textField: t } = this.props, s = b(this.props), n = s[H(s, e, t)];
       if (n) {
-        const i = I(n, s);
+        const i = I(n, t);
         e.toLowerCase() !== i.toLowerCase() && (this._suggested = i.substring(e.length));
       }
     }
   }
   focusedIndex(e) {
-    const { textField: s, focusedItemIndex: t, skipDisabledItems: n } = this.props, i = b(this.props), a = e !== void 0 ? e : this.value;
+    const { textField: t, focusedItemIndex: s, skipDisabledItems: n } = this.props, i = b(this.props), a = e !== void 0 ? e : this.value;
     if (this.state.focusedItem !== void 0)
-      return i.findIndex((o) => S(o, this.state.focusedItem, s));
-    if (t)
-      return t(i, a, s);
-    const d = i.indexOf(F(i, a, s));
-    return n && s && d === -1 ? i.findIndex((o) => !o.disabled) : Math.max(0, d);
+      return i.findIndex((o) => w(o, this.state.focusedItem, t));
+    if (s)
+      return s(i, a, t);
+    const d = i.indexOf(F(i, a, t));
+    return n && t && d === -1 ? i.findIndex((o) => !o.disabled) : Math.max(0, d);
   }
   calculateMedia(e) {
-    for (const s of e)
-      this.setState({ windowWidth: s.target.clientWidth });
+    for (const t of e)
+      this.setState({ windowWidth: t.target.clientWidth });
   }
 };
 y.displayName = "AutoComplete", y.propTypes = {
-  ...x.basicPropTypes,
-  size: u.oneOf(["small", "medium", "large"]),
-  rounded: u.oneOf(["small", "medium", "large", "full", "none"]),
-  fillMode: u.oneOf(["solid", "flat", "outline"]),
-  groupField: u.string,
-  suggest: u.oneOfType([u.bool, u.string]),
-  placeholder: u.string,
-  value: u.string,
-  defaultValue: u.string,
-  validationMessage: u.string,
-  required: u.bool,
-  readonly: u.bool,
-  clearButton: u.bool,
-  valueRender: u.func,
-  id: u.string,
-  ariaLabelledBy: u.string,
-  ariaDescribedBy: u.string,
-  list: u.any,
-  adaptive: u.bool,
-  adaptiveTitle: u.string,
-  adaptiveSubtitle: u.string,
-  onCancel: u.func,
-  skipDisabledItems: u.bool,
-  inputAttributes: u.object
+  ...S.basicPropTypes,
+  size: l.oneOf(["small", "medium", "large"]),
+  rounded: l.oneOf(["small", "medium", "large", "full", "none"]),
+  fillMode: l.oneOf(["solid", "flat", "outline"]),
+  groupField: l.string,
+  suggest: l.oneOfType([l.bool, l.string]),
+  placeholder: l.string,
+  value: l.string,
+  defaultValue: l.string,
+  validationMessage: l.string,
+  required: l.bool,
+  readonly: l.bool,
+  clearButton: l.bool,
+  valueRender: l.func,
+  id: l.string,
+  ariaLabelledBy: l.string,
+  ariaLabel: l.string,
+  ariaDescribedBy: l.string,
+  list: l.any,
+  adaptive: l.bool,
+  adaptiveTitle: l.string,
+  adaptiveSubtitle: l.string,
+  onCancel: l.func,
+  skipDisabledItems: l.bool,
+  inputAttributes: l.object
 }, y.defaultProps = {
-  ...x.defaultProps,
+  ...S.defaultProps,
   size: void 0,
   rounded: void 0,
   fillMode: void 0,
@@ -512,16 +520,18 @@ y.displayName = "AutoComplete", y.propTypes = {
   prefix: void 0,
   suffix: void 0
 };
-let k = y;
-const se = G(), ie = A(
-  q(
-    se,
-    W(k)
+let x = y;
+const ae = q();
+Y(x);
+const de = U(
+  j(
+    ae,
+    J(x)
   )
 );
-ie.displayName = "KendoReactAutoComplete";
+de.displayName = "KendoReactAutoComplete";
 export {
-  ie as AutoComplete,
-  se as AutoCompletePropsContext,
-  k as AutoCompleteWithoutContext
+  de as AutoComplete,
+  ae as AutoCompletePropsContext,
+  x as AutoCompleteWithoutContext
 };