@progress/kendo-react-dropdowns 9.2.0-develop.2 → 9.2.0-develop.4

package/AutoComplete/AutoComplete.mjs

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