@progress/kendo-react-dropdowns 14.4.1-develop.9 → 14.5.0-develop.1

package/AutoComplete/AutoComplete.mjs

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