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

package/ComboBox/ComboBox.mjs

@@ -9,23 +9,23 @@
 import * as c from "react";
 import v from "prop-types";
 import N from "../common/DropDownBase.mjs";
-import { Keys as C, validatePackage as ae, svgIconPropType as ne, canUseDOM as K, ADAPTIVE_MEDIUM_BREAKPOINT as z, classNames as I, uComboBox as D, IconWrap as le, ADAPTIVE_SMALL_BREAKPOINT as H, uDropDownsActionSheet as M, createPropsContext as re, withIdHOC as de, withPropsContext as pe, withUnstyledHOC as he } from "@progress/kendo-react-common";
-import { FloatingLabel as ce } from "@progress/kendo-react-labels";
-import { getPlainDataDuplicates as ue, getFilteredData as S, areSame as E, getItemValue as k, isPresent as w, getItemIndexByText as q, suggestValue as ge, itemIndexStartsWith as G } from "../common/utils.mjs";
-import me from "../common/SearchBar.mjs";
-import ve from "../common/ListContainer.mjs";
-import fe from "../common/List.mjs";
-import be from "../common/ListFilter.mjs";
-import U from "../common/GroupStickyHeader.mjs";
-import { packageMetadata as xe } from "../package-metadata.mjs";
-import Ie from "../common/ClearButton.mjs";
-import { Button as W } from "@progress/kendo-react-buttons";
-import { caretAltDownIcon as ye, xIcon as Ce } from "@progress/kendo-svg-icons";
-import { comboArrowBtnAriaLabelExpand as j, messages as $, comboArrowBtnAriaLabelCollapse as Y } from "../messages/index.mjs";
-import { provideLocalizationService as J } from "@progress/kendo-react-intl";
-import { ActionSheet as Se, ActionSheetHeader as De, ActionSheetContent as we } from "@progress/kendo-react-layout";
-import Q from "../common/withCustomComponent.mjs";
-const Ee = "Please enter a valid value!", F = class F extends c.Component {
+import { Keys as C, validatePackage as ie, svgIconPropType as oe, canUseDOM as z, classNames as I, uComboBox as w, IconWrap as ae, uDropDownsActionSheet as B, createPropsContext as ne, withIdHOC as le, withPropsContext as re, withUnstyledHOC as de, withAdaptiveModeContext as pe } from "@progress/kendo-react-common";
+import { FloatingLabel as he } from "@progress/kendo-react-labels";
+import { getPlainDataDuplicates as ce, getFilteredData as S, areSame as k, getItemValue as M, isPresent as D, getItemIndexByText as K, suggestValue as ue, itemIndexStartsWith as H } from "../common/utils.mjs";
+import ge from "../common/SearchBar.mjs";
+import me from "../common/ListContainer.mjs";
+import ve from "../common/List.mjs";
+import fe from "../common/ListFilter.mjs";
+import q from "../common/GroupStickyHeader.mjs";
+import { packageMetadata as be } from "../package-metadata.mjs";
+import xe from "../common/ClearButton.mjs";
+import { Button as G } from "@progress/kendo-react-buttons";
+import { caretAltDownIcon as Ie, xIcon as ye } from "@progress/kendo-svg-icons";
+import { comboArrowBtnAriaLabelExpand as U, messages as W, comboArrowBtnAriaLabelCollapse as j } from "../messages/index.mjs";
+import { provideLocalizationService as $ } from "@progress/kendo-react-intl";
+import { ActionSheet as Ce, ActionSheetHeader as Se, ActionSheetContent as we } from "@progress/kendo-react-layout";
+import Y from "../common/withCustomComponent.mjs";
+const De = "Please enter a valid value!", F = class F extends c.Component {
   constructor(s) {
     super(s), this.state = {}, this.base = new N(this), this._element = null, this._suggested = "", this._skipBlur = !1, this._input = null, this._adaptiveFilterInput = null, this.itemHeight = 0, this.duplicates = [], this.hasDuplicates = !1, this.focus = () => {
       this._input && this._input.focus();
@@ -33,10 +33,10 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
       const e = this.props.textField !== void 0, t = this.props.dataItemKey !== void 0;
       if (this.props.data && this.props.data.length > 0 && !e && !t) {
         const i = this.props.data;
-        this.duplicates = ue(i), this.hasDuplicates = this.duplicates.length > 0;
+        this.duplicates = ce(i), this.hasDuplicates = this.duplicates.length > 0;
       }
     }, this.handleItemSelect = (e, t) => {
-      const { virtual: i, dataItemKey: n } = this.props, r = S(this.props), a = i ? i.skip : 0, d = r[e - a], l = this.hasDuplicates || !E(d, this.value, n);
+      const { virtual: i, dataItemKey: n } = this.props, r = S(this.props), a = i ? i.skip : 0, d = r[e - a], l = this.hasDuplicates || !k(d, this.value, n);
       this.triggerOnChange(d, t), this.state.text !== void 0 && (t.data.text = void 0), l && this.base.triggerPageChangeCornerItems(d, t);
     }, this.onPopupOpened = () => {
       setTimeout(() => {
@@ -54,9 +54,9 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
     }, this.closeOpenedApplyStateNonMobileMode = (e, t) => {
       t && !this.mobileMode && this.base.togglePopup(e);
     }, this.renderMobileListFilter = () => {
-      const e = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, t = k(this.value, this.props.textField), i = w(e) ? e : t;
+      const e = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, t = M(this.value, this.props.textField), i = D(e) ? e : t;
       return /* @__PURE__ */ c.createElement(
-        be,
+        fe,
         {
           value: i,
           ref: (n) => this._adaptiveFilterInput = n && n.element,
@@ -101,7 +101,7 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
     }, this.onInputKeyDown = (e) => {
       const { skipDisabledItems: t, textField: i, dataItemKey: n, groupField: r } = this.props, a = S(this.props), d = this.value, l = Math.max(
         0,
-        a.findIndex((h) => E(h, d, n))
+        a.findIndex((h) => k(h, d, n))
       ), o = e.keyCode, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = this.base.initState();
       if (p.syntheticEvent = e, !e.altKey && (o === C.up || o === C.down)) {
         if (e.preventDefault(), r !== "" && i)
@@ -110,18 +110,18 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
           else {
             let h = 0;
             if (o === C.down || o === C.right) {
-              const g = a.slice(l + 1 < a.length ? l + 1 : l).find((b) => !b.disabled && b[i]);
-              h = g && a.findIndex((b) => b[i] === g[i]);
+              const g = a.slice(l + 1 < a.length ? l + 1 : l).find((f) => !f.disabled && f[i]);
+              h = g && a.findIndex((f) => f[i] === g[i]);
             } else if (o === C.up || o === C.left) {
               let g;
               if (l === 0)
-                g = a, h = a.findIndex((b) => !b.disabled && b[i]);
+                g = a, h = a.findIndex((f) => !f.disabled && f[i]);
               else {
                 g = a.slice(0, l);
-                let b = g.pop();
-                for (; b && b.disabled; )
-                  b = g.pop();
-                h = b && a.findIndex((B) => B[i] === b[i]);
+                let f = g.pop();
+                for (; f && f.disabled; )
+                  f = g.pop();
+                h = f && a.findIndex((E) => E[i] === f[i]);
               }
             }
             if (h !== void 0) {
@@ -151,8 +151,8 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
       }
       const y = () => {
         e.preventDefault(), this.base.togglePopup(p), this.applyState(p);
-      }, x = this.getFocusedIndex(), f = x === -1, m = !f && this.getCurrentValueDisabledStatus(i, a, x);
-      u ? o === C.pageUp ? (e.preventDefault(), this.base.scrollPopupByPageSize(-1)) : o === C.pageDown ? (e.preventDefault(), this.base.scrollPopupByPageSize(1)) : e.altKey && o === C.up ? y() : o === C.enter ? (e.preventDefault(), (i && !f && e.currentTarget.value ? a[x][i] : void 0) ? !t && i && m ? this.clearValueOnEnterOrEsc(e) : m || this.applyValueOnEnter(e.currentTarget.value, p) : this.applyValueOnEnter(e.currentTarget.value, p)) : o === C.esc && (!t && i && m && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, p)) : !u && o === C.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && o === C.down && y();
+      }, b = this.getFocusedIndex(), x = b === -1, m = !x && this.getCurrentValueDisabledStatus(i, a, b);
+      u ? o === C.pageUp ? (e.preventDefault(), this.base.scrollPopupByPageSize(-1)) : o === C.pageDown ? (e.preventDefault(), this.base.scrollPopupByPageSize(1)) : e.altKey && o === C.up ? y() : o === C.enter ? (e.preventDefault(), (i && !x && e.currentTarget.value ? a[b][i] : void 0) ? !t && i && m ? this.clearValueOnEnterOrEsc(e) : m || this.applyValueOnEnter(e.currentTarget.value, p) : this.applyValueOnEnter(e.currentTarget.value, p)) : o === C.esc && (!t && i && m && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, p)) : !u && o === C.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && o === C.down && y();
     }, this.inputOnChange = (e) => {
       const t = this.base.initState();
       t.syntheticEvent = e;
@@ -160,7 +160,7 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
       if (this.props.suggest) {
         const a = n.selectionEnd === r.length;
         let d = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-        w(d) || (d = k(this.value, this.props.textField) || "");
+        D(d) || (d = M(this.value, this.props.textField) || "");
         const l = d && d === r, o = d && d.length > r.length;
         l || o || !a ? this._suggested = "" : this.suggestValue(r);
       }
@@ -179,15 +179,15 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
       t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || Ee
+        this.validity.valid ? "" : this.props.validationMessage || De
       );
-    }, ae(xe);
+    }, ie(be);
   }
   get _inputId() {
     return this.props.id;
   }
   get document() {
-    if (K)
+    if (z)
       return this.element && this.element.ownerDocument || document;
   }
   /** @hidden */
@@ -198,7 +198,8 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
    * The mobile mode of the ComboBox.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= z && this.props.adaptive);
+    var e;
+    return !!(this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth <= ((e = this.props._adaptiveMode) == null ? void 0 : e.medium) && this.props.adaptive);
   }
   /**
    * The value of the ComboBox.
@@ -218,7 +219,7 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
    */
   get index() {
     const { dataItemKey: s } = this.props, e = S(this.props), t = this.value;
-    return e.findIndex((i) => E(i, t, s));
+    return e.findIndex((i) => k(i, t, s));
   }
   /**
    * Gets the `name` property of the ComboBox.
@@ -253,18 +254,18 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
     if (this._valueOnDidUpdate = p, this.base.didUpdate(), i && i.total !== d)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
-      const x = s.value !== void 0 ? s.value : e.value;
-      let f = this.hasDuplicates ? this.navigationIndex || 0 : a.findIndex((h) => E(h, p, t));
-      this.props.groupMode === "modern" && r && p && (f = (y = this.base.getGroupedDataModernMode(a, n)) == null ? void 0 : y.map((h) => h[r]).indexOf(p[r]));
-      const m = !E(x, p, t);
-      u && i ? this.base.scrollToVirtualItem(i, f) : u && !i ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][n], this), this.base.scrollToItem(f)) : (this.hasDuplicates || l && o && p && m) && this.base.scrollToItem(f);
+      const b = s.value !== void 0 ? s.value : e.value;
+      let x = this.hasDuplicates ? this.navigationIndex || 0 : a.findIndex((h) => k(h, p, t));
+      this.props.groupMode === "modern" && r && p && (x = (y = this.base.getGroupedDataModernMode(a, n)) == null ? void 0 : y.map((h) => h[r]).indexOf(p[r]));
+      const m = !k(b, p, t);
+      u && i ? this.base.scrollToVirtualItem(i, x) : u && !i ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][n], this), this.base.scrollToItem(x)) : (this.hasDuplicates || l && o && p && m) && this.base.scrollToItem(x);
     }
     u && this._input && this._input.focus(), this.setValidity();
   }
   /** @hidden */
   componentDidMount() {
     var s;
-    this.observerResize = K && 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), this.checkForDuplicatePlainTextRecords();
+    this.observerResize = z && 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), this.checkForDuplicatePlainTextRecords();
   }
   /** @hidden */
   componentWillUnmount() {
@@ -273,12 +274,12 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
   }
   /** @hidden */
   render() {
-    const s = J(this).toLanguageString(
+    const s = $(this).toLanguageString(
+      U,
+      W[U]
+    ), e = $(this).toLanguageString(
       j,
-      $[j]
-    ), e = J(this).toLanguageString(
-      Y,
-      $[Y]
+      W[j]
     ), {
       dir: t,
       disabled: i,
@@ -291,25 +292,25 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
       iconClassName: u,
       virtual: p,
       size: y,
-      rounded: x,
-      fillMode: f,
+      rounded: b,
+      fillMode: x,
       opened: m = this.state.opened,
       placeholder: h,
       svgIcon: g,
-      unstyled: b
-    } = this.props, B = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, X = k(this.value, a), T = w(O) ? O : X, Z = n && (!!T || w(this.value)), V = this.base.vs, A = this.props.id || this._inputId, R = this.mobileMode, P = b && b.uComboBox;
+      unstyled: f
+    } = this.props, E = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, J = M(this.value, a), T = D(O) ? O : J, Q = n && (!!T || D(this.value)), V = this.base.vs, A = this.props.id || this._inputId, R = this.mobileMode, _ = f && f.uComboBox;
     V.enabled = p !== void 0, p !== void 0 && (V.skip = p.skip, V.total = p.total, V.pageSize = p.pageSize);
-    const [ee, te] = Q(this.props.prefix || c.Fragment), [se, ie] = Q(this.props.suffix || c.Fragment), L = /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement(
+    const [X, Z] = Y(this.props.prefix || c.Fragment), [ee, te] = Y(this.props.suffix || c.Fragment), L = /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement(
       "span",
       {
         className: I(
-          D.wrapper({
-            c: P,
+          w.wrapper({
+            c: _,
             size: y,
-            rounded: x,
-            fillMode: f,
+            rounded: b,
+            fillMode: x,
             disabled: i,
-            invalid: !B,
+            invalid: !E,
             loading: o,
             required: this.required
           }),
@@ -319,49 +320,49 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
         style: r ? { ...l, width: void 0 } : l,
         dir: t
       },
-      this.props.prefix && /* @__PURE__ */ c.createElement(ee, { ...te }),
+      this.props.prefix && /* @__PURE__ */ c.createElement(X, { ...Z }),
       this.renderSearchBar(T || "", A, h),
-      Z && !o && /* @__PURE__ */ c.createElement(Ie, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      Q && !o && /* @__PURE__ */ c.createElement(xe, { onClick: this.clearButtonClick, key: "clearbutton" }),
       o && /* @__PURE__ */ c.createElement(
-        le,
+        ae,
         {
-          className: I(D.loadingIcon({ c: P })),
+          className: I(w.loadingIcon({ c: _ })),
           name: "loading",
           key: "loading"
         }
       ),
-      this.props.suffix && /* @__PURE__ */ c.createElement(se, { ...ie }),
+      this.props.suffix && /* @__PURE__ */ c.createElement(ee, { ...te }),
       /* @__PURE__ */ c.createElement(
-        W,
+        G,
         {
           tabIndex: -1,
           type: "button",
           "aria-label": m ? e : s,
           icon: u ? void 0 : "caret-alt-down",
-          svgIcon: g || ye,
+          svgIcon: g || Ie,
           iconClass: u,
           size: y,
-          fillMode: f,
+          fillMode: x,
           rounded: null,
           themeColor: "base",
-          className: I(D.inputButton({ c: P })),
+          className: I(w.inputButton({ c: _ })),
           onClick: this.toggleBtnClick,
-          onMouseDown: (oe) => oe.preventDefault()
+          onMouseDown: (se) => se.preventDefault()
         }
       ),
       !R && this.renderListContainer()
     ), R && this.renderAdaptiveListContainer());
     return r ? /* @__PURE__ */ c.createElement(
-      ce,
+      he,
       {
         label: r,
         editorId: A,
         editorValue: T,
-        editorValid: B,
+        editorValid: E,
         editorDisabled: i,
         style: { width: l ? l.width : void 0 },
         children: L,
-        unstyled: b
+        unstyled: f
       }
     ) : L;
   }
@@ -372,7 +373,7 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
     const l = this.base.vs, o = this.value;
     this._suggested = "";
     const u = this.hasDuplicates && this.duplicates.indexOf(o) !== -1;
-    if (a = this.getFocusedIndex(u), a !== -1 && !w(o))
+    if (a = this.getFocusedIndex(u), a !== -1 && !D(o))
       this.handleItemSelect(a, s);
     else if (r === "")
       this.handleItemSelect(0, s);
@@ -392,7 +393,7 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
     return s && e && e[t] && e[t].disabled;
   }
   applyValueOnEnter(s, e) {
-    const { textField: t, allowCustom: i } = this.props, n = S(this.props), r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = k(this.value, t) === s ? this.index : q(n, s, t), l = d !== -1;
+    const { textField: t, allowCustom: i } = this.props, n = S(this.props), r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = M(this.value, t) === s ? this.index : K(n, s, t), l = d !== -1;
     let o;
     if (this._suggested = "", l)
       o = n[d];
@@ -403,15 +404,15 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
     this.triggerOnChange(o, e), r && this.base.togglePopup(e), this.props.filter === void 0 && this.state.text !== void 0 && (e.data.text = void 0), this.applyState(e);
   }
   applyValueOnRejectSuggestions(s, e) {
-    const { textField: t, allowCustom: i } = this.props, n = S(this.props), r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, a = k(this.value, t);
-    if (this._suggested = "", s === a || s === "" && !w(a))
+    const { textField: t, allowCustom: i } = this.props, n = S(this.props), r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, a = M(this.value, t);
+    if (this._suggested = "", s === a || s === "" && !D(a))
       return this.closeOpenedApplyStateNonMobileMode(e, r), this.applyState(e);
-    const d = q(n, s, t, !0), l = d !== -1;
+    const d = K(n, s, t, !0), l = d !== -1;
     let o = null;
     l ? o = n[d] : i && (o = s ? t ? { [t]: s } : s : null), this.triggerOnChange(o, e), this.state.text !== void 0 && (e.data.text = void 0, this.base.filterChanged("", e)), this.closeOpenedApplyStateNonMobileMode(e, r), this.applyState(e);
   }
   selectFocusedItem(s, e) {
-    const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: i, virtual: n = { skip: 0 }, focusedItemIndex: r = G } = this.props, a = S(this.props), d = n.skip, l = s === "" && d === 0 ? 0 : r(a, s, i);
+    const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: i, virtual: n = { skip: 0 }, focusedItemIndex: r = H } = this.props, a = S(this.props), d = n.skip, l = s === "" && d === 0 ? 0 : r(a, s, i);
     return l !== -1 ? this.handleItemSelect(l + d, e) : (this.triggerOnChange(null, e), this.state.text !== void 0 && (e.data.text = void 0)), t && this.base.togglePopup(e), this.applyState(e);
   }
   renderAdaptiveListContainer() {
@@ -425,26 +426,28 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
       virtual: d,
       adaptiveTitle: l,
       groupStickyHeaderItemRender: o,
-      unstyled: u
-    } = this.props, p = S(this.props), y = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = this.base.getAdaptiveAnimation(), f = u && u.uComboBox, m = u && u.uDropDownsActionSheet;
-    let { group: h } = this.state;
-    h === void 0 && n !== void 0 && (h = k(p[0], n));
-    const g = {
+      unstyled: u,
+      _adaptiveMode: p
+    } = this.props, y = S(this.props), b = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = this.base.getAdaptiveAnimation(), m = u && u.uComboBox, h = u && u.uDropDownsActionSheet;
+    let { group: g } = this.state;
+    g === void 0 && n !== void 0 && (g = M(y[0], n));
+    const f = {
       navigatable: !1,
       navigatableElements: [],
-      expand: y,
+      expand: b,
       animation: x,
-      onClose: (b) => this.toggleBtnClick(b),
-      animationStyles: s <= H ? { top: 0, width: "100%", height: "100%" } : void 0,
+      onClose: (E) => this.toggleBtnClick(E),
       className: I(
-        M.wrapper({
-          c: m,
-          isFullScreen: s <= H
-        })
-      )
+        B.wrapper({
+          c: h
+        }),
+        "k-adaptive-actionsheet"
+      ),
+      animationStyles: s && p && s <= p.small ? { top: 0, width: "100%", height: "100%" } : void 0,
+      position: s && p && s <= p.small ? "fullscreen" : void 0
     };
-    return /* @__PURE__ */ c.createElement(Se, { ...g }, /* @__PURE__ */ c.createElement(De, null, /* @__PURE__ */ c.createElement("div", { className: I(M.titleBar({ c: m })) }, /* @__PURE__ */ c.createElement("div", { className: I(M.title({ c: m })) }, /* @__PURE__ */ c.createElement("div", { className: I(M.header({ c: m })) }, l), /* @__PURE__ */ c.createElement("div", { className: I(M.subtitle({ c: m })) })), /* @__PURE__ */ c.createElement("div", { className: I(M.actions({ c: m })) }, /* @__PURE__ */ c.createElement(
-      W,
+    return /* @__PURE__ */ c.createElement(Ce, { ...f }, /* @__PURE__ */ c.createElement(Se, null, /* @__PURE__ */ c.createElement("div", { className: I(B.titleBar({ c: h })) }, /* @__PURE__ */ c.createElement("div", { className: I(B.title({ c: h })) }, /* @__PURE__ */ c.createElement("div", { className: I(B.header({ c: h })) }, l), /* @__PURE__ */ c.createElement("div", { className: I(B.subtitle({ c: h })) })), /* @__PURE__ */ c.createElement("div", { className: I(B.actions({ c: h })) }, /* @__PURE__ */ c.createElement(
+      G,
       {
         tabIndex: 0,
         "aria-label": "Cancel",
@@ -455,14 +458,14 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
         size: "large",
         onClick: this.toggleBtnClick,
         icon: "x",
-        svgIcon: Ce
+        svgIcon: ye
       }
-    ))), /* @__PURE__ */ c.createElement("div", { className: I(M.titleBarGroup({ c: m })) }, this.renderMobileListFilter())), /* @__PURE__ */ c.createElement(we, { overflowHidden: !0 }, /* @__PURE__ */ c.createElement(
+    ))), /* @__PURE__ */ c.createElement("div", { className: I(B.titleBarGroup({ c: h })) }, this.renderMobileListFilter())), /* @__PURE__ */ c.createElement(we, { overflowHidden: !0 }, /* @__PURE__ */ c.createElement(
       "div",
       {
         className: I(
-          D.listContainer({
-            c: f
+          w.listContainer({
+            c: m
           })
         )
       },
@@ -470,8 +473,8 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
         "div",
         {
           className: I(
-            D.list({
-              c: f,
+            w.list({
+              c: m,
               list: a,
               size: "large",
               tableSize: i,
@@ -479,11 +482,11 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
             })
           )
         },
-        e && /* @__PURE__ */ c.createElement("div", { className: I(D.listHeader({ c: f })) }, e),
-        !a && h && p.length !== 0 && /* @__PURE__ */ c.createElement(
-          U,
+        e && /* @__PURE__ */ c.createElement("div", { className: I(w.listHeader({ c: m })) }, e),
+        !a && g && y.length !== 0 && /* @__PURE__ */ c.createElement(
+          q,
           {
-            group: h,
+            group: g,
             groupMode: r,
             render: o
           }
@@ -493,7 +496,7 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
           "div",
           {
             className: I(
-              D.listFooter({ c: f }),
+              w.listFooter({ c: m }),
               this.props.footerClassName
             )
           },
@@ -514,19 +517,19 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
       virtual: l,
       groupStickyHeaderItemRender: o,
       unstyled: u
-    } = this.props, p = S(this.props), y = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = s.getPopupSettings(), f = x.width !== void 0 ? x.width : s.popupWidth, m = u && u.uComboBox;
+    } = this.props, p = S(this.props), y = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = s.getPopupSettings(), x = b.width !== void 0 ? b.width : s.popupWidth, m = u && u.uComboBox;
     let { group: h } = this.state;
-    return h === void 0 && n !== void 0 && (h = k(p[0], n)), /* @__PURE__ */ c.createElement(
-      ve,
+    return h === void 0 && n !== void 0 && (h = M(p[0], n)), /* @__PURE__ */ c.createElement(
+      me,
       {
-        width: f,
+        width: x,
         popupSettings: {
-          ...x,
-          anchor: x.anchor || this.element,
+          ...b,
+          anchor: b.anchor || this.element,
           show: y,
           popupClass: I(
-            x.popupClass,
-            D.listContainer({
+            b.popupClass,
+            w.listContainer({
               c: m,
               popup: !0
             })
@@ -539,7 +542,7 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
         "div",
         {
           className: I(
-            D.list({
+            w.list({
               c: m,
               list: d,
               size: a,
@@ -548,14 +551,14 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
             })
           )
         },
-        t && /* @__PURE__ */ c.createElement("div", { className: I(D.listHeader({ c: m })) }, t),
-        !d && h && p.length !== 0 && /* @__PURE__ */ c.createElement(U, { group: h, groupMode: r, render: o }),
+        t && /* @__PURE__ */ c.createElement("div", { className: I(w.listHeader({ c: m })) }, t),
+        !d && h && p.length !== 0 && /* @__PURE__ */ c.createElement(q, { group: h, groupMode: r, render: o }),
         this.renderList(),
         i && /* @__PURE__ */ c.createElement(
           "div",
           {
             className: I(
-              D.listFooter({ c: m }),
+              w.listFooter({ c: m }),
               this.props.footerClassName
             )
           },
@@ -573,15 +576,15 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
       groupHeaderItemRender: r,
       virtual: a = { skip: 0, total: void 0 },
       unstyled: d
-    } = this.props, l = S(this.props), o = s.getPopupSettings(), u = s.vs, p = a.skip, y = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = `translateY(${u.translate}px)`, f = y ? this.getFocusedIndex(this.hasDuplicates) : void 0, m = this.props.filter !== void 0 ? this.props.filter : this.state.text, h = k(this.value, e), g = w(m) && m !== h ? null : this.value, b = this.props.list || fe, B = d && d.uComboBox;
+    } = this.props, l = S(this.props), o = s.getPopupSettings(), u = s.vs, p = a.skip, y = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = `translateY(${u.translate}px)`, x = y ? this.getFocusedIndex(this.hasDuplicates) : void 0, m = this.props.filter !== void 0 ? this.props.filter : this.state.text, h = M(this.value, e), g = D(m) && m !== h ? null : this.value, f = this.props.list || ve, E = d && d.uComboBox;
     return /* @__PURE__ */ c.createElement(
-      b,
+      f,
       {
         id: s.listBoxId,
         virtual: !!a,
         show: y,
         data: l,
-        focusedIndex: f,
+        focusedIndex: x,
         value: g,
         textField: e,
         valueField: t,
@@ -593,14 +596,14 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
         listRef: (O) => {
           u.list = this.base.list = O, this.itemHeight = 0;
         },
-        wrapperStyle: this.state.windowWidth && this.state.windowWidth > z ? { maxHeight: o.height } : {},
+        wrapperStyle: this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth > this.props._adaptiveMode.medium ? { maxHeight: o.height } : {},
         wrapperCssClass: I(
-          D.listContent({
-            c: B,
+          w.listContent({
+            c: E,
             virtual: a
           })
         ),
-        listStyle: u.enabled ? { transform: x } : void 0,
+        listStyle: u.enabled ? { transform: b } : void 0,
         key: "listkey",
         skip: p,
         onClick: this.handleItemClick,
@@ -627,15 +630,15 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
       accessKey: u,
       unstyled: p,
       inputAttributes: y
-    } = this.props, x = S(this.props), f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, m = this.value, h = Math.max(
+    } = this.props, b = S(this.props), x = this.props.opened !== void 0 ? this.props.opened : this.state.opened, m = this.value, h = Math.max(
       0,
-      x.findIndex((g) => E(g, m, l))
+      b.findIndex((g) => k(g, m, l))
     );
-    return this._suggested && !E(this._valueOnDidUpdate, m, l) && (this._suggested = ""), /* @__PURE__ */ c.createElement(
-      me,
+    return this._suggested && !k(this._valueOnDidUpdate, m, l) && (this._suggested = ""), /* @__PURE__ */ c.createElement(
+      ge,
       {
         id: e,
-        readOnly: f && this.mobileMode,
+        readOnly: x && this.mobileMode,
         placeholder: t,
         tabIndex: i,
         title: r,
@@ -648,7 +651,7 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
         onFocus: this.base.handleFocus,
         onBlur: this.handleBlur,
         disabled: n,
-        expanded: f,
+        expanded: x,
         owns: this.base.listBoxId,
         activedescendant: `option-${this.base.guid}-${h + o.skip}`,
         role: "combobox",
@@ -671,21 +674,21 @@ const Ee = "Please enter a valid value!", F = class F extends c.Component {
   }
   triggerOnChange(s, e) {
     const t = this.value;
-    !this.hasDuplicates && (!w(t) && !w(s) || E(t, s, this.props.dataItemKey)) || (this.props.value === void 0 && (e.data.value = s), this._valueDuringOnChange = s, e.events.push({ type: "onChange" }));
+    !this.hasDuplicates && (!D(t) && !D(s) || k(t, s, this.props.dataItemKey)) || (this.props.value === void 0 && (e.data.value = s), this._valueDuringOnChange = s, e.events.push({ type: "onChange" }));
   }
   getFocusedIndex(s) {
     const e = this.value, {
       textField: t,
       dataItemKey: i,
       virtual: n = { skip: 0 },
-      focusedItemIndex: r = G,
+      focusedItemIndex: r = H,
       skipDisabledItems: a
     } = this.props, d = S(this.props), l = this.props.filter ? this.props.filter : this.state.text;
-    return s && this.navigationIndex !== void 0 ? this.navigationIndex : w(e) && l === void 0 ? d.findIndex((o) => E(o, e, i)) : l ? r(d, l, t) : a && t && !l && n.skip === 0 ? d.findIndex((o) => !o.disabled && o[t]) : n.skip === 0 ? 0 : -1;
+    return s && this.navigationIndex !== void 0 ? this.navigationIndex : D(e) && l === void 0 ? d.findIndex((o) => k(o, e, i)) : l ? r(d, l, t) : a && t && !l && n.skip === 0 ? d.findIndex((o) => !o.disabled && o[t]) : n.skip === 0 ? 0 : -1;
   }
   suggestValue(s) {
     const { data: e, textField: t } = this.props;
-    this._suggested = ge(s, e, t);
+    this._suggested = ue(s, e, t);
   }
   applyState(s) {
     this.base.applyState(s), this._valueDuringOnChange = void 0;
@@ -710,7 +713,7 @@ F.displayName = "ComboBox", F.propTypes = {
   allowCustom: v.bool,
   clearButton: v.bool,
   iconClassName: v.string,
-  svgIcon: ne,
+  svgIcon: oe,
   validationMessage: v.string,
   required: v.bool,
   id: v.string,
@@ -735,16 +738,18 @@ F.displayName = "ComboBox", F.propTypes = {
   prefix: void 0,
   suffix: void 0
 };
-let _ = F;
-const ke = re(), Fe = de(
-  pe(
+let P = F;
+const ke = ne(), Ee = le(
+  re(
     ke,
-    he(_)
+    de(
+      pe(P)
+    )
   )
 );
-Fe.displayName = "KendoReactComboBox";
+Ee.displayName = "KendoReactComboBox";
 export {
-  Fe as ComboBox,
+  Ee as ComboBox,
   ke as ComboBoxPropsContext,
-  _ as ComboBoxWithoutContext
+  P as ComboBoxWithoutContext
 };