@progress/kendo-react-dropdowns 9.5.0 → 10.0.0-develop.1

package/AutoComplete/AutoComplete.mjs

@@ -5,178 +5,177 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as h from "react";
-import u from "prop-types";
+import * as c from "react";
+import g from "prop-types";
 import N from "../common/SearchBar.mjs";
 import R from "../common/ListContainer.mjs";
 import z from "../common/List.mjs";
-import S from "../common/DropDownBase.mjs";
+import C from "../common/DropDownBase.mjs";
 import L from "../common/GroupStickyHeader.mjs";
-import { getFilteredData as I, getItemValue as x, areSame as w, isPresent as H, getFocusedItem as D, itemIndexStartsWith as A } from "../common/utils.mjs";
-import { classNames as k, Keys as m, validatePackage as K, canUseDOM as E, IconWrap as q, createPropsContext as W, withIdHOC as G, withPropsContext as U, withAdaptiveModeContext as $, kendoThemeMaps as j } from "@progress/kendo-react-common";
-import { FloatingLabel as J } from "@progress/kendo-react-labels";
-import { packageMetadata as Q } from "../package-metadata.mjs";
-import X from "../common/ClearButton.mjs";
-import { AdaptiveMode as Y } from "../common/AdaptiveMode.mjs";
-import P from "../common/withCustomComponent.mjs";
-import { ActionSheetContent as Z } from "@progress/kendo-react-layout";
-import ee from "../common/ListFilter.mjs";
-const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y = class y extends h.Component {
-  constructor(a) {
-    super(a), 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 = () => {
+import { getFilteredData as b, getItemValue as y, areSame as S, isPresent as H, getFocusedItem as M, itemIndexStartsWith as A } from "../common/utils.mjs";
+import { classNames as w, Keys as m, canUseDOM as D, IconWrap as K, createPropsContext as q, withIdHOC as W, withPropsContext as G, withAdaptiveModeContext as U, kendoThemeMaps as $ } from "@progress/kendo-react-common";
+import { FloatingLabel as j } from "@progress/kendo-react-labels";
+import J from "../common/ClearButton.mjs";
+import { AdaptiveMode as Q } from "../common/AdaptiveMode.mjs";
+import E from "../common/withCustomComponent.mjs";
+import { ActionSheetContent as X } from "@progress/kendo-react-layout";
+import Y from "../common/ListFilter.mjs";
+const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I = class I extends c.Component {
+  constructor() {
+    super(...arguments), this.state = {}, this.base = new C(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.handleItemSelect = (e, t) => {
-      const s = I(this.props), i = x(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(i, t);
+      const s = b(this.props), n = y(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, o = I(this.props)[e];
-      w(this.state.focusedItem, o, s) || (t.data.focusedItem = o);
+      const { textField: s } = this.props, i = b(this.props)[e];
+      S(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 || te
+        this.validity.valid ? "" : this.props.validationMessage || Z
       );
     }, this.renderAdaptiveListContainer = () => {
-      const { adaptiveTitle: e } = this.props, { windowWidth: t = 0 } = this.state, s = /* @__PURE__ */ h.createElement(
-        ee,
+      const { adaptiveTitle: e } = this.props, { windowWidth: t = 0 } = this.state, s = /* @__PURE__ */ c.createElement(
+        Y,
         {
           value: this.value,
-          ref: (o) => this._adaptiveInput = o && o.element,
+          ref: (i) => this._adaptiveInput = i && i.element,
           onChange: this.onChangeHandler,
           onKeyDown: this.onInputKeyDown,
           size: this.props.size,
           rounded: this.props.rounded,
           fillMode: this.props.fillMode
         }
-      ), i = {
+      ), n = {
         title: e,
         expand: this.opened,
-        onClose: (o) => this.onCancel(o),
+        onClose: (i) => this.onCancel(i),
         windowWidth: t,
         mobileFilter: s
       };
-      return /* @__PURE__ */ h.createElement(Y, { ...i }, /* @__PURE__ */ h.createElement(Z, { overflowHidden: !0 }, /* @__PURE__ */ h.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
+      return /* @__PURE__ */ c.createElement(Q, { ...n }, /* @__PURE__ */ c.createElement(X, { overflowHidden: !0 }, /* @__PURE__ */ c.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
     }, this.onCancel = (e) => {
       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;
       H(s) && s !== "" && this.base.filterChanged("", t), this.state.text && (t.data.text = ""), this.applyState(t);
     }, this.listContainerContent = () => {
-      const { header: e, footer: t, size: s, groupStickyHeaderItemRender: i, groupField: o, list: d } = this.props, r = I(this.props);
-      let { group: n } = this.state;
-      return n === void 0 && o !== void 0 && (n = x(r[0], o)), /* @__PURE__ */ h.createElement(h.Fragment, null, e && /* @__PURE__ */ h.createElement("div", { className: "k-list-header" }, e), /* @__PURE__ */ h.createElement(
+      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 = y(d[0], i)), /* @__PURE__ */ c.createElement(c.Fragment, null, e && /* @__PURE__ */ c.createElement("div", { className: "k-list-header" }, e), /* @__PURE__ */ c.createElement(
         "div",
         {
-          className: k("k-list", {
+          className: w("k-list", {
             [`k-list-${this.mobileMode ? "lg" : O[s] || s}`]: s
           })
         },
-        !d && n && r.length !== 0 && /* @__PURE__ */ h.createElement(L, { group: n, groupMode: "modern", render: i }),
+        !a && o && d.length !== 0 && /* @__PURE__ */ c.createElement(L, { group: o, groupMode: "modern", render: n }),
         this.renderList()
-      ), t && /* @__PURE__ */ h.createElement("div", { className: "k-list-footer" }, t));
+      ), t && /* @__PURE__ */ c.createElement("div", { className: "k-list-footer" }, t));
     }, this.onScroll = (e) => {
       this._isScrolling = !0;
       const { list: t } = this.base, { groupField: s } = this.props;
-      let i = I(this.props);
-      if (!s || !i.length)
+      let n = b(this.props);
+      if (!s || !n.length)
         return;
-      const o = this.itemHeight || (t ? t.children[0].offsetHeight : 0), r = e.target.scrollTop;
-      s && (i = this.base.getGroupedDataModernMode(i, s));
-      let n = i[0][s];
-      for (let p = 1; p < i.length && !(o * p > r); p++)
-        i[p] && i[p][s] && (n = i[p][s]);
-      n !== this.state.group && this.setState({
-        group: n
+      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][s] && (o = n[r][s]);
+      o !== this.state.group && this.setState({
+        group: o
       });
     }, this.handleItemClick = (e, t) => {
       this.base.handleItemClick(e, t), this._valueDuringOnChange = void 0;
     }, this.onChangeHandler = (e) => {
-      const s = this.base.initState(), i = this.mobileMode ? e.target.element : e.currentTarget, o = i.value, d = i.selectionEnd === o.length;
+      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 r = this._suggested, n = this.value, p = n && n.substring(0, n.length - r.length), f = p && p === o, g = p && p.length > o.length, { suggest: b } = this.props, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
-      if (b !== void 0 && b !== !1) {
-        f || g || !d ? this._suggested = "" : this.suggestValue(o);
-        const c = o + this._suggested, v = { userInput: o, value: this._suggested };
-        this.triggerOnChange(c, s, { suggestion: v });
+      const d = this._suggested, o = this.value, r = o && o.substring(0, o.length - d.length), l = r && r === i, h = r && r.length > i.length, { suggest: v } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+      if (v !== void 0 && v !== !1) {
+        l || h || !a ? this._suggested = "" : this.suggestValue(i);
+        const u = i + this._suggested, f = { userInput: i, value: this._suggested };
+        this.triggerOnChange(u, s, { suggestion: f });
       } else
-        this._suggested = "", this.triggerOnChange(o, s);
-      (!l && o || l && !o) && this.togglePopup(s), s.data.focusedItem = void 0, this.applyState(s), this.setState({ group: void 0 });
+        this._suggested = "", this.triggerOnChange(i, s);
+      (!p && i || p && !i) && this.togglePopup(s), s.data.focusedItem = void 0, this.applyState(s), this.setState({ group: void 0 });
     }, this.clearButtonClick = (e) => {
-      const s = this.base.initState(), i = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+      const s = this.base.initState(), n = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
       s.syntheticEvent = e;
-      const o = "";
-      this._suggested = "", this.triggerOnChange(o, s), this.state.focusedItem !== void 0 && (s.data.focusedItem = void 0), i && this.togglePopup(s), this.applyState(s);
+      const i = "";
+      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: t, groupField: s, textField: i } = this.props, o = I(this.props);
+      const { skipDisabledItems: t, groupField: s, textField: n } = this.props, i = b(this.props);
       this._isScrolling && (this._isScrolling = !1);
-      const d = this.focusedIndex(), r = o[d], n = e.keyCode, p = e.altKey, f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.base.initState();
-      g.syntheticEvent = e;
-      const b = () => {
-        f && e.preventDefault();
+      const a = this.focusedIndex(), d = i[a], o = e.keyCode, r = e.altKey, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
+      h.syntheticEvent = e;
+      const v = () => {
+        l && e.preventDefault();
       };
-      if (p && n === m.down)
+      if (r && o === m.down)
         this.setState({
           opened: !0
         });
-      else if (p && n === m.up)
+      else if (r && o === m.up)
         this.setState({
           opened: !1
         });
-      else if (f && n === m.pageUp)
-        b(), this.base.scrollPopupByPageSize(-1);
-      else if (f && n === m.pageDown)
-        b(), this.base.scrollPopupByPageSize(1);
-      else if (f && (n === m.enter || n === m.esc))
-        b(), t === !1 && r && r.disabled ? (f && this.togglePopup(g), this.applyState(g)) : this.applyInputValue(e.currentTarget.value, g, e.keyCode);
-      else if (!f && n === m.esc) {
-        const l = "";
-        this._suggested = "", this.triggerOnChange(l, g), this.state.focusedItem !== void 0 && (g.data.focusedItem = void 0), this.applyState(g);
-      } else if (n === m.up || n === m.down) {
-        if (s !== "" && i)
-          if (!this.props.skipDisabledItems && f)
-            this.onNavigate(g, n);
+      else if (l && o === m.pageUp)
+        v(), this.base.scrollPopupByPageSize(-1);
+      else if (l && o === m.pageDown)
+        v(), this.base.scrollPopupByPageSize(1);
+      else if (l && (o === m.enter || o === m.esc))
+        v(), t === !1 && d && d.disabled ? (l && this.togglePopup(h), this.applyState(h)) : this.applyInputValue(e.currentTarget.value, h, e.keyCode);
+      else if (!l && o === m.esc) {
+        const p = "";
+        this._suggested = "", this.triggerOnChange(p, h), this.state.focusedItem !== void 0 && (h.data.focusedItem = void 0), this.applyState(h);
+      } else if (o === m.up || o === m.down) {
+        if (s !== "" && n)
+          if (!this.props.skipDisabledItems && l)
+            this.onNavigate(h, o);
           else {
-            let l = 0;
-            if (n === m.down || n === m.right) {
-              const c = o.slice(d + 1).find((v) => !v.disabled && v[i]);
-              l = c && o.findIndex((v) => v[i] === c[i]);
-            } else if (n === m.up || n === m.left) {
-              let c;
-              if (d === -1)
-                c = o, l = o.findIndex((v) => !v.disabled && v[i]);
+            let p = 0;
+            if (o === m.down || o === m.right) {
+              const u = i.slice(a + 1).find((f) => !f.disabled && f[n]);
+              p = u && i.findIndex((f) => f[n] === u[n]);
+            } else if (o === m.up || o === m.left) {
+              let u;
+              if (a === -1)
+                u = i, p = i.findIndex((f) => !f.disabled && f[n]);
               else {
-                c = o.slice(0, d);
-                let v = c.pop();
-                for (; v && v.disabled; )
-                  v = c.pop();
-                l = v && o.findIndex((C) => C[i] === v[i]);
+                u = i.slice(0, a);
+                let f = u.pop();
+                for (; f && f.disabled; )
+                  f = u.pop();
+                p = f && i.findIndex((x) => x[n] === f[n]);
               }
             }
-            if (l !== void 0) {
-              const c = l - d;
-              this.onNavigate(g, n, c);
+            if (p !== void 0) {
+              const u = p - a;
+              this.onNavigate(h, o, u);
             } else
-              l === void 0 && o.findIndex((c) => c[i]) === o.length - 1 && this.onNavigate(g, n);
+              p === void 0 && i.findIndex((u) => u[n]) === i.length - 1 && this.onNavigate(h, o);
           }
-        else if (!this.props.skipDisabledItems && f)
-          this.onNavigate(g, n);
+        else if (!this.props.skipDisabledItems && l)
+          this.onNavigate(h, o);
         else {
-          let l = null;
-          if (n === m.down || n === m.right)
-            l = o.slice(d + 1).find((c) => !c.disabled);
-          else if (n === m.up || n === m.left) {
-            const c = o.slice(0, d);
-            for (l = c.pop(); l && l.disabled; )
-              l = c.pop();
+          let p = null;
+          if (o === m.down || o === m.right)
+            p = i.slice(a + 1).find((u) => !u.disabled);
+          else if (o === m.up || o === m.left) {
+            const u = i.slice(0, a);
+            for (p = u.pop(); p && p.disabled; )
+              p = u.pop();
           }
-          if (l) {
-            const c = l.id - d - 1;
-            this.onNavigate(g, n, c);
+          if (p) {
+            const u = p.id - a - 1;
+            this.onNavigate(h, o, u);
           } else
-            this.onNavigate(g, n);
+            this.onNavigate(h, o);
         }
-        this.applyState(g), b();
+        this.applyState(h), v();
       }
     }, this.handleFocus = (e) => {
       this._skipFocusEvent || this.base.handleFocus(e);
@@ -188,13 +187,13 @@ const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y
       !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);
-    }, K(Q);
+    };
   }
   get _inputId() {
     return this.props.id + "-accessibility-id";
   }
   get document() {
-    if (E)
+    if (D)
       return this.element && this.element.ownerDocument || document;
   }
   /**
@@ -219,10 +218,10 @@ const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y
    * Represents the validity state into which the AutoComplete is set.
    */
   get validity() {
-    const a = this.props.validationMessage !== void 0, e = !this.required || this.value !== "", t = this.props.valid !== void 0 ? this.props.valid : e;
+    const e = this.props.validationMessage !== void 0, t = !this.required || this.value !== "", s = this.props.valid !== void 0 ? this.props.valid : t;
     return {
-      customError: a,
-      valid: t,
+      customError: e,
+      valid: s,
       valueMissing: this.value === null
     };
   }
@@ -234,32 +233,32 @@ const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y
    * The mobile mode of the AutoComplete.
    */
   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);
   }
   /**
    * @hidden
    */
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : y.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : I.defaultProps.validityStyles;
   }
   /**
    * @hidden
    */
   get required() {
-    return this.props.required !== void 0 ? this.props.required : y.defaultProps.required;
+    return this.props.required !== void 0 ? this.props.required : I.defaultProps.required;
   }
   /**
    * @hidden
    */
-  componentDidUpdate(a, e) {
-    var b;
-    const { groupField: t = "" } = this.props, s = I(this.props), { data: i = [] } = a, o = this.focusedIndex(), d = s[o], r = i !== s, n = d !== void 0 && e.focusedItem !== d, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, f = a.opened !== void 0 ? a.opened : e.opened, g = !f && p;
-    if (t === "")
-      (p && (n || r) || g) && this.base.scrollToItem(o);
+  componentDidUpdate(e, t) {
+    var p;
+    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, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = e.opened !== void 0 ? e.opened : t.opened, v = !h && l;
+    if (s === "")
+      (l && (r || o) || v) && this.base.scrollToItem(a);
     else if (!this._isScrolling) {
-      const l = (b = this.base.getGroupedDataModernMode(s, t)) == null ? void 0 : b.indexOf(d);
-      g && (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][t], this), this.base.scrollToItem(l)), p && f && n && this.base.scrollToItem(l);
+      const u = (p = this.base.getGroupedDataModernMode(n, s)) == null ? void 0 : p.indexOf(d);
+      v && (n && n.length !== 0 && this.base.resetGroupStickyHeader(n[0][s], this), this.base.scrollToItem(u)), l && h && r && this.base.scrollToItem(u);
     }
     this.setValidity();
   }
@@ -267,8 +266,8 @@ const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y
    * @hidden
    */
   componentDidMount() {
-    var a;
-    this.observerResize = E && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (a = this.document) != null && a.body && this.observerResize && this.observerResize.observe(this.document.body);
+    var e;
+    this.observerResize = D && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (e = this.document) != null && e.body && this.observerResize && this.observerResize.observe(this.document.body);
   }
   /**
    * @hidden
@@ -280,211 +279,211 @@ const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y
    * @hidden
    */
   render() {
-    const { dir: a, disabled: e, label: t, className: s, style: i, loading: o, suggest: d, size: r, rounded: n, fillMode: p } = this.props, f = !this.validityStyles || this.validity.valid, g = this.base, b = this.value, l = this.props.clearButton !== !1 && !o && !!b, c = this.props.id || this._inputId, v = this.state.focused;
+    const { dir: e, disabled: t, label: s, className: n, style: i, loading: a, suggest: d, size: o, rounded: r, fillMode: l } = this.props, h = !this.validityStyles || this.validity.valid, v = this.base, p = this.value, u = this.props.clearButton !== !1 && !a && !!p, f = this.props.id || this._inputId, x = this.state.focused;
     typeof d == "string" && (this._suggested = d);
-    const [C, B] = P(this.props.prefix || h.Fragment), [T, V] = P(this.props.suffix || h.Fragment), F = /* @__PURE__ */ h.createElement(h.Fragment, null, /* @__PURE__ */ h.createElement(
+    const [P, B] = E(this.props.prefix || c.Fragment), [T, V] = E(this.props.suffix || c.Fragment), _ = /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement(
       "span",
       {
-        className: k("k-autocomplete k-input", s, {
-          [`k-input-${O[r] || r}`]: r,
-          [`k-rounded-${se[n] || n}`]: n,
-          [`k-input-${p}`]: p,
-          "k-invalid": !f,
-          "k-focus": v && !e,
-          "k-loading": o,
+        className: w("k-autocomplete k-input", n, {
+          [`k-input-${O[o] || o}`]: o,
+          [`k-rounded-${ee[r] || r}`]: r,
+          [`k-input-${l}`]: l,
+          "k-invalid": !h,
+          "k-focus": x && !t,
+          "k-loading": a,
           "k-required": this.required,
-          "k-disabled": e
+          "k-disabled": t
         }),
-        ref: (M) => {
-          this._element = M, g.wrapper = M;
+        ref: (F) => {
+          this._element = F, v.wrapper = F;
         },
-        style: t ? { ...i, width: void 0 } : i,
-        dir: a,
+        style: s ? { ...i, width: void 0 } : i,
+        dir: e,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onClick: this.handleWrapperClick
       },
-      this.props.prefix && /* @__PURE__ */ h.createElement(C, { ...B }),
-      this.renderSearchBar(b || "", c),
-      o && /* @__PURE__ */ h.createElement(q, { className: "k-input-loading-icon", name: "loading" }),
-      l && !o && /* @__PURE__ */ h.createElement(X, { onClick: this.clearButtonClick, key: "clearbutton" }),
-      this.props.suffix && /* @__PURE__ */ h.createElement(T, { ...V }),
+      this.props.prefix && /* @__PURE__ */ c.createElement(P, { ...B }),
+      this.renderSearchBar(p || "", f),
+      a && /* @__PURE__ */ c.createElement(K, { className: "k-input-loading-icon", name: "loading" }),
+      u && !a && /* @__PURE__ */ c.createElement(J, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      this.props.suffix && /* @__PURE__ */ c.createElement(T, { ...V }),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
-    return t ? /* @__PURE__ */ h.createElement(
-      J,
+    return s ? /* @__PURE__ */ c.createElement(
+      j,
       {
-        label: t,
-        editorId: c,
-        editorValue: b,
-        editorValid: f,
-        editorDisabled: e,
+        label: s,
+        editorId: f,
+        editorValue: p,
+        editorValid: h,
+        editorDisabled: t,
         style: { width: i ? i.width : void 0 },
-        children: F
+        children: _
       }
-    ) : F;
+    ) : _;
   }
   /**
    * @hidden
    */
-  onNavigate(a, e, t) {
-    const s = this.value, { textField: i, focusedItemIndex: o } = this.props, d = I(this.props), r = this.state.focusedItem !== void 0 ? d.findIndex((p) => w(p, this.state.focusedItem, i)) : o ? o(d, s, i) : d.indexOf(D(d, s, i)), n = this.base.navigation.navigate({
-      keyCode: e,
-      current: r,
+  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((l) => S(l, this.state.focusedItem, i)) : a ? a(d, n, i) : d.indexOf(M(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
     });
-    n !== void 0 && this.itemFocus(n, a), this.applyState(a);
+    r !== void 0 && this.itemFocus(r, e), this.applyState(e);
   }
   /**
    * @hidden
    */
-  applyInputValue(a, e, t) {
-    const s = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: i } = this.props, o = I(this.props), d = this.focusedIndex(), r = o[d];
-    if (this._suggested = "", s && t === m.enter && r && !r.disabled) {
-      const n = x(o[this.focusedIndex(a)], i);
-      this.triggerOnChange(n, e);
+  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 && s === m.enter && o && !o.disabled) {
+      const r = y(a[this.focusedIndex(e)], i);
+      this.triggerOnChange(r, t);
     }
-    s && this.togglePopup(e), this.applyState(e);
+    n && this.togglePopup(t), this.applyState(t);
   }
-  renderSearchBar(a, e) {
-    const t = this.base, { placeholder: s, tabIndex: i, disabled: o, readonly: d, inputAttributes: r } = this.props, { focused: n } = this.state, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
-    return /* @__PURE__ */ h.createElement(
+  renderSearchBar(e, t) {
+    const s = this.base, { placeholder: n, tabIndex: i, disabled: a, readonly: d, inputAttributes: o } = this.props, { focused: r } = this.state, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+    return /* @__PURE__ */ c.createElement(
       N,
       {
-        id: e,
-        placeholder: s,
+        id: t,
+        placeholder: n,
         tabIndex: i,
         accessKey: this.props.accessKey,
-        value: a,
+        value: e,
         suggestedText: this._suggested,
-        focused: n,
+        focused: r,
         name: this.props.name,
-        ref: (f) => this._input = f && f.input,
+        ref: (h) => this._input = h && h.input,
         onKeyDown: this.onInputKeyDown,
         onChange: this.onChangeHandler,
-        onFocus: t.handleFocus,
+        onFocus: s.handleFocus,
         onBlur: this.handleBlur,
-        disabled: o,
+        disabled: a,
         readOnly: d,
-        expanded: p,
-        owns: t.listBoxId,
-        activedescendant: "option-" + t.guid + "-" + this.focusedIndex(),
+        expanded: l,
+        owns: s.listBoxId,
+        activedescendant: "option-" + s.guid + "-" + this.focusedIndex(),
         role: "combobox",
         ariaLabelledBy: this.props.ariaLabelledBy,
         ariaDescribedBy: this.props.ariaDescribedBy,
         ariaRequired: this.required,
         render: this.props.valueRender,
-        inputAttributes: r
+        inputAttributes: o
       }
     );
   }
   renderListContainer() {
-    const a = this.base, { dir: e, groupField: t } = this.props, s = I(this.props), i = a.getPopupSettings(), o = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = i.width !== void 0 ? i.width : a.popupWidth;
-    let { group: r } = this.state;
-    return r === void 0 && t !== void 0 && (r = x(s[0], t)), /* @__PURE__ */ h.createElement(
+    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 && s !== void 0 && (o = y(n[0], s)), /* @__PURE__ */ c.createElement(
       R,
       {
         width: d,
         popupSettings: {
           ...i,
           anchor: i.anchor || this.element,
-          show: o,
-          popupClass: k(i.popupClass, "k-list-container", "k-autocomplete-popup")
+          show: a,
+          popupClass: w(i.popupClass, "k-list-container", "k-autocomplete-popup")
         },
-        dir: e !== void 0 ? e : this.base.dirCalculated,
-        itemsCount: [s.length]
+        dir: t !== void 0 ? t : this.base.dirCalculated,
+        itemsCount: [n.length]
       },
       this.listContainerContent()
     );
   }
   renderList() {
-    const a = this.base, e = a.getPopupSettings(), { textField: t, listNoDataRender: s, itemRender: i, groupHeaderItemRender: o } = this.props, d = I(this.props), r = this.value, n = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
-    return /* @__PURE__ */ h.createElement(
+    const e = this.base, t = e.getPopupSettings(), { textField: s, 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;
+    return /* @__PURE__ */ c.createElement(
       z,
       {
-        id: a.listBoxId,
-        show: n,
+        id: e.listBoxId,
+        show: r,
         data: d.slice(),
         focusedIndex: this.focusedIndex(),
-        value: r,
-        textField: t,
-        valueField: t,
+        value: o,
+        textField: s,
+        valueField: s,
         highlightSelected: !1,
-        optionsGuid: a.guid,
+        optionsGuid: e.guid,
         groupField: this.props.groupField,
         groupMode: "modern",
-        listRef: (p) => a.list = p,
-        wrapperStyle: this.mobileMode ? {} : { maxHeight: e.height },
+        listRef: (l) => e.list = l,
+        wrapperStyle: this.mobileMode ? {} : { maxHeight: t.height },
         wrapperCssClass: "k-list-content",
         onClick: this.handleItemClick,
         itemRender: i,
-        groupHeaderItemRender: o,
-        noDataRender: s,
-        onMouseDown: (p) => p.preventDefault(),
+        groupHeaderItemRender: a,
+        noDataRender: n,
+        onMouseDown: (l) => l.preventDefault(),
         onScroll: this.onScroll
       }
     );
   }
-  triggerOnChange(a, e, t) {
-    this.value === a && !t || (e.data.value = a, this._valueDuringOnChange = a, e.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(a) {
-    this._skipFocusEvent = !0, a.focus(), window.setTimeout(() => this._skipFocusEvent = !1, 0);
+  focusElement(e) {
+    this._skipFocusEvent = !0, e.focus(), window.setTimeout(() => this._skipFocusEvent = !1, 0);
   }
-  applyState(a) {
-    this.base.applyState(a), this._valueDuringOnChange = void 0;
+  applyState(e) {
+    this.base.applyState(e), this._valueDuringOnChange = void 0;
   }
-  suggestValue(a) {
-    if (this._suggested = "", a) {
-      const { textField: e } = this.props, t = I(this.props), s = t[A(t, a, e)];
-      if (s) {
-        const i = x(s, e);
-        a.toLowerCase() !== i.toLowerCase() && (this._suggested = i.substring(a.length));
+  suggestValue(e) {
+    if (this._suggested = "", e) {
+      const { textField: t } = this.props, s = b(this.props), n = s[A(s, e, t)];
+      if (n) {
+        const i = y(n, t);
+        e.toLowerCase() !== i.toLowerCase() && (this._suggested = i.substring(e.length));
       }
     }
   }
-  focusedIndex(a) {
-    const { textField: e, focusedItemIndex: t, skipDisabledItems: s } = this.props, i = I(this.props), o = a !== void 0 ? a : this.value;
+  focusedIndex(e) {
+    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((r) => w(r, this.state.focusedItem, e));
-    if (t)
-      return t(i, o, e);
-    const d = i.indexOf(D(i, o, e));
-    return s && e && d === -1 ? i.findIndex((r) => !r.disabled && r[e]) : Math.max(0, d);
+      return i.findIndex((o) => S(o, this.state.focusedItem, t));
+    if (s)
+      return s(i, a, t);
+    const d = i.indexOf(M(i, a, t));
+    return n && t && d === -1 ? i.findIndex((o) => !o.disabled && o[t]) : Math.max(0, d);
   }
-  calculateMedia(a) {
-    for (const e of a)
-      this.setState({ windowWidth: e.target.clientWidth });
+  calculateMedia(e) {
+    for (const t of e)
+      this.setState({ windowWidth: t.target.clientWidth });
   }
 };
-y.displayName = "AutoComplete", y.propTypes = {
-  ...S.basicPropTypes,
-  size: u.oneOf([null, "small", "medium", "large"]),
-  rounded: u.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: u.oneOf([null, "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,
-  onCancel: u.func,
-  skipDisabledItems: u.bool,
-  inputAttributes: u.object
-}, y.defaultProps = {
-  ...S.defaultProps,
+I.displayName = "AutoComplete", I.propTypes = {
+  ...C.basicPropTypes,
+  size: g.oneOf([null, "small", "medium", "large"]),
+  rounded: g.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: g.oneOf([null, "solid", "flat", "outline"]),
+  groupField: g.string,
+  suggest: g.oneOfType([g.bool, g.string]),
+  placeholder: g.string,
+  value: g.string,
+  defaultValue: g.string,
+  validationMessage: g.string,
+  required: g.bool,
+  readonly: g.bool,
+  clearButton: g.bool,
+  valueRender: g.func,
+  id: g.string,
+  ariaLabelledBy: g.string,
+  ariaDescribedBy: g.string,
+  list: g.any,
+  adaptive: g.bool,
+  adaptiveTitle: g.string,
+  onCancel: g.func,
+  skipDisabledItems: g.bool,
+  inputAttributes: g.object
+}, I.defaultProps = {
+  ...C.defaultProps,
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
@@ -492,16 +491,16 @@ y.displayName = "AutoComplete", y.propTypes = {
   prefix: void 0,
   suffix: void 0
 };
-let _ = y;
-const ie = W(), oe = G(
-  U(
-    ie,
-    $(_)
+let k = I;
+const te = q(), se = W(
+  G(
+    te,
+    U(k)
   )
 );
-oe.displayName = "KendoReactAutoComplete";
+se.displayName = "KendoReactAutoComplete";
 export {
-  oe as AutoComplete,
-  ie as AutoCompletePropsContext,
-  _ as AutoCompleteWithoutContext
+  se as AutoComplete,
+  te as AutoCompletePropsContext,
+  k as AutoCompleteWithoutContext
 };