@progress/kendo-react-dropdowns 8.4.0-develop.3 → 8.4.0-develop.5

package/ComboBox/ComboBox.mjs

@@ -7,26 +7,26 @@
  */
 "use client";
 import * as u from "react";
-import v from "prop-types";
+import f from "prop-types";
 import N from "../common/DropDownBase.mjs";
-import { Keys as C, validatePackage as ne, svgIconPropType as le, canUseDOM as K, classNames as y, uComboBox as D, IconWrap as re, uDropDownsActionSheet as B, createPropsContext as de, withIdHOC as pe, withPropsContext as he, withUnstyledHOC as ce } from "@progress/kendo-react-common";
-import { FloatingLabel as ue } from "@progress/kendo-react-labels";
-import { getPlainDataDuplicates as ge, getFilteredData as S, areSame as E, getItemValue as k, isPresent as w, getItemIndexByText as H, suggestValue as me, itemIndexStartsWith as q } from "../common/utils.mjs";
-import ve from "../common/SearchBar.mjs";
-import fe from "../common/ListContainer.mjs";
-import be from "../common/List.mjs";
-import xe from "../common/ListFilter.mjs";
-import G from "../common/GroupStickyHeader.mjs";
-import { packageMetadata as Ie } from "../package-metadata.mjs";
-import ye from "../common/ClearButton.mjs";
-import { Button as U } from "@progress/kendo-react-buttons";
-import { caretAltDownIcon as Ce, xIcon as Se } from "@progress/kendo-svg-icons";
-import { comboArrowBtnAriaLabelExpand as W, messages as j, comboArrowBtnAriaLabelCollapse as $ } from "../messages/index.mjs";
-import { provideLocalizationService as Y } from "@progress/kendo-react-intl";
-import { ActionSheet as De, ActionSheetHeader as we, ActionSheetContent as Ee } from "@progress/kendo-react-layout";
-import { MOBILE_MEDIUM_DEVISE as J, MOBILE_SMALL_DEVISE as Q } from "../common/constants.mjs";
-import X from "../common/withCustomComponent.mjs";
-const ke = "Please enter a valid value!", F = class F extends u.Component {
+import { Keys as C, validatePackage as ae, svgIconPropType as ne, canUseDOM as z, classNames as I, uComboBox as D, IconWrap as le, 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 K, suggestValue as ge, itemIndexStartsWith as H } 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 q from "../common/GroupStickyHeader.mjs";
+import { packageMetadata as xe } from "../package-metadata.mjs";
+import Ie from "../common/ClearButton.mjs";
+import { Button as G } from "@progress/kendo-react-buttons";
+import { caretAltDownIcon as ye, xIcon as Ce } 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 Se, ActionSheetHeader as De, ActionSheetContent as we } from "@progress/kendo-react-layout";
+import { MOBILE_MEDIUM_DEVISE as Y, MOBILE_SMALL_DEVISE as J } from "../common/constants.mjs";
+import Q from "../common/withCustomComponent.mjs";
+const Ee = "Please enter a valid value!", F = class F extends u.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();
@@ -34,11 +34,11 @@ const ke = "Please enter a valid value!", F = class F extends u.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 = ge(i), this.hasDuplicates = this.duplicates.length > 0;
+        this.duplicates = ue(i), this.hasDuplicates = this.duplicates.length > 0;
       }
     }, this.handleItemSelect = (e, t) => {
-      const { virtual: i, dataItemKey: n } = this.props, l = S(this.props), a = i ? i.skip : 0, r = l[e - a], d = this.hasDuplicates || !E(r, this.value, n);
-      this.triggerOnChange(r, t), this.state.text !== void 0 && (t.data.text = void 0), d && this.base.triggerPageChangeCornerItems(r, 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);
+      this.triggerOnChange(d, t), this.state.text !== void 0 && (t.data.text = void 0), l && this.base.triggerPageChangeCornerItems(d, t);
     }, this.onPopupOpened = () => {
       setTimeout(() => {
         this.mobileMode && this._adaptiveFilterInput && (this._skipBlur = !0, this._adaptiveFilterInput.focus(), this._skipBlur = !1);
@@ -46,18 +46,18 @@ const ke = "Please enter a valid value!", F = class F extends u.Component {
     }, this.componentRef = (e) => {
       this._element = e, this.base.wrapper = e;
     }, this.toggleBtnClick = (e) => {
-      const { skipDisabledItems: t, textField: i } = this.props, n = S(this.props), l = this.getFocusedIndex(), a = this.getCurrentValueDisabledStatus(i, n, l), r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = this.base.initState();
-      if (d.syntheticEvent = e, !t && i && a && this.clearValueOnToggleBtnClick(e), this.base.togglePopup(d), !r && this.mobileMode) {
+      const { skipDisabledItems: t, textField: i } = this.props, n = S(this.props), r = this.getFocusedIndex(), a = this.getCurrentValueDisabledStatus(i, n, r), d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, l = this.base.initState();
+      if (l.syntheticEvent = e, !t && i && a && this.clearValueOnToggleBtnClick(e), this.base.togglePopup(l), !d && this.mobileMode) {
         const o = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
-        this.base.filterChanged(o, d);
+        this.base.filterChanged(o, l);
       }
-      this.applyState(d);
+      this.applyState(l);
     }, 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;
       return /* @__PURE__ */ u.createElement(
-        xe,
+        be,
         {
           value: i,
           ref: (n) => this._adaptiveFilterInput = n && n.element,
@@ -75,14 +75,14 @@ const ke = "Please enter a valid value!", F = class F extends u.Component {
       const { vs: t, list: i } = this.base;
       t.scrollHandler(e);
       const { groupField: n } = this.props;
-      let l = S(this.props);
-      if (!n || !l.length)
+      let r = S(this.props);
+      if (!n || !r.length)
         return;
-      const a = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : i ? i.children[0].offsetHeight : 0), d = e.target.scrollTop - t.skip * a;
-      this.props.groupMode === "modern" && (l = this.base.getGroupedDataModernMode(l, n));
-      let o = l[0][n];
-      for (let h = 1; h < l.length && !(a * h > d); h++)
-        l[h] && l[h][n] && (o = l[h][n]);
+      const a = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : i ? i.children[0].offsetHeight : 0), l = e.target.scrollTop - t.skip * a;
+      this.props.groupMode === "modern" && (r = this.base.getGroupedDataModernMode(r, n));
+      let o = r[0][n];
+      for (let c = 1; c < r.length && !(a * c > l); c++)
+        r[c] && r[c][n] && (o = r[c][n]);
       o !== this.state.group && (this.setState({
         group: o
       }), this.props.onGroupScroll && this.props.onGroupScroll.call(void 0, { group: o }));
@@ -90,8 +90,8 @@ const ke = "Please enter a valid value!", F = class F extends u.Component {
       this.navigationIndex = e, this.base.handleItemClick(e, t), this._valueDuringOnChange = void 0;
     }, this.handleBlur = (e) => {
       if (this.state.focused && !this._skipBlur) {
-        const t = this.base.initState(), { textField: i } = this.props, n = S(this.props), l = this.getFocusedIndex(), r = !(l === -1) && this.getCurrentValueDisabledStatus(i, n, l);
-        t.data.focused = !1, t.events.push({ type: "onBlur" }), t.syntheticEvent = e, i && r && this.clearValueOnBlur(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, t);
+        const t = this.base.initState(), { textField: i } = this.props, n = S(this.props), r = this.getFocusedIndex(), d = !(r === -1) && this.getCurrentValueDisabledStatus(i, n, r);
+        t.data.focused = !1, t.events.push({ type: "onBlur" }), t.syntheticEvent = e, i && d && this.clearValueOnBlur(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, t);
       }
     }, this.onInputClick = (e) => {
       const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
@@ -100,72 +100,72 @@ const ke = "Please enter a valid value!", F = class F extends u.Component {
         n.syntheticEvent = e, this.base.togglePopup(n), this.base.filterChanged(i, n), this.applyState(n);
       }
     }, this.onInputKeyDown = (e) => {
-      const { skipDisabledItems: t, textField: i, dataItemKey: n, groupField: l } = this.props, a = S(this.props), r = this.value, d = Math.max(
+      const { skipDisabledItems: t, textField: i, dataItemKey: n, groupField: r } = this.props, a = S(this.props), d = this.value, l = Math.max(
         0,
-        a.findIndex((p) => E(p, r, n))
-      ), o = e.keyCode, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, c = this.base.initState();
-      if (c.syntheticEvent = e, !e.altKey && (o === C.up || o === C.down)) {
-        if (e.preventDefault(), l !== "" && i)
-          if (!this.props.skipDisabledItems && h)
-            this.onNavigate(c, o);
+        a.findIndex((h) => E(h, d, n))
+      ), o = e.keyCode, c = 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)
+          if (!this.props.skipDisabledItems && c)
+            this.onNavigate(p, o);
           else {
-            let p = 0;
+            let h = 0;
             if (o === C.down || o === C.right) {
-              const m = a.slice(d + 1 < a.length ? d + 1 : d).find((I) => !I.disabled && I[i]);
-              p = m && a.findIndex((I) => I[i] === m[i]);
+              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]);
             } else if (o === C.up || o === C.left) {
-              let m;
-              if (d === 0)
-                m = a, p = a.findIndex((I) => !I.disabled && I[i]);
+              let g;
+              if (l === 0)
+                g = a, h = a.findIndex((b) => !b.disabled && b[i]);
               else {
-                m = a.slice(0, d);
-                let I = m.pop();
-                for (; I && I.disabled; )
-                  I = m.pop();
-                p = I && a.findIndex((M) => M[i] === I[i]);
+                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]);
               }
             }
-            if (p !== void 0) {
-              const m = p - d;
-              this.onNavigate(c, o, m);
+            if (h !== void 0) {
+              const g = h - l;
+              this.onNavigate(p, o, g);
             } else
-              p === void 0 && a.findIndex((m) => m[i] === r[i]) === a.length - 1 && this.onNavigate(c, o);
+              h === void 0 && a.findIndex((g) => g[i] === d[i]) === a.length - 1 && this.onNavigate(p, o);
           }
-        else if (!this.props.skipDisabledItems && h)
-          this.onNavigate(c, o);
+        else if (!this.props.skipDisabledItems && c)
+          this.onNavigate(p, o);
         else {
-          let p = null;
+          let h = null;
           if (o === C.down || o === C.right)
-            p = a.slice(d + 1).find((m) => !m.disabled);
+            h = a.slice(l + 1).find((g) => !g.disabled);
           else if (o === C.up || o === C.left) {
-            const m = a.slice(0, d);
-            for (p = m.pop(); p && p.disabled; )
-              p = m.pop();
+            const g = a.slice(0, l);
+            for (h = g.pop(); h && h.disabled; )
+              h = g.pop();
           }
-          if (p) {
-            const m = p.id - d - 1;
-            this.onNavigate(c, o, m);
+          if (h) {
+            const g = h.id - l - 1;
+            this.onNavigate(p, o, g);
           } else
-            this.onNavigate(c, o);
+            this.onNavigate(p, o);
         }
-        this.applyState(c);
+        this.applyState(p);
       }
-      const f = () => {
-        e.preventDefault(), this.base.togglePopup(c), this.applyState(c);
-      }, b = this.getFocusedIndex(), x = b === -1, g = !x && this.getCurrentValueDisabledStatus(i, a, b);
-      h ? o === C.pageUp ? (e.preventDefault(), this.base.scrollPopupByPageSize(-1)) : o === C.pageDown ? (e.preventDefault(), this.base.scrollPopupByPageSize(1)) : e.altKey && o === C.up ? f() : o === C.enter ? (e.preventDefault(), (i && !x && e.currentTarget.value ? a[b][i] : void 0) ? !t && i && g ? this.clearValueOnEnterOrEsc(e) : g || this.applyValueOnEnter(e.currentTarget.value, c) : this.applyValueOnEnter(e.currentTarget.value, c)) : o === C.esc && (!t && i && g && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, c)) : !h && o === C.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && o === C.down && f();
+      const y = () => {
+        e.preventDefault(), this.base.togglePopup(p), this.applyState(p);
+      }, x = this.getFocusedIndex(), v = x === -1, m = !v && this.getCurrentValueDisabledStatus(i, a, x);
+      c ? 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 && !v && 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)) : !c && o === C.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && o === C.down && y();
     }, this.inputOnChange = (e) => {
       const t = this.base.initState();
       t.syntheticEvent = e;
-      const i = this.props.opened !== void 0 ? this.props.opened : this.state.opened, n = e.currentTarget, l = n.value;
+      const i = this.props.opened !== void 0 ? this.props.opened : this.state.opened, n = e.currentTarget, r = n.value;
       if (this.props.suggest) {
-        const a = n.selectionEnd === l.length;
-        let r = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-        w(r) || (r = k(this.value, this.props.textField) || "");
-        const d = r && r === l, o = r && r.length > l.length;
-        d || o || !a ? this._suggested = "" : this.suggestValue(l);
+        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) || "");
+        const l = d && d === r, o = d && d.length > r.length;
+        l || o || !a ? this._suggested = "" : this.suggestValue(r);
       }
-      this.props.filter === void 0 && (t.data.text = l), this.state.focusedItem !== void 0 && (t.data.focusedItem = void 0), i || this.base.togglePopup(t), this.base.filterChanged(l, t), this.applyState(t), this.setState({ group: void 0 });
+      this.props.filter === void 0 && (t.data.text = r), this.state.focusedItem !== void 0 && (t.data.focusedItem = void 0), i || this.base.togglePopup(t), this.base.filterChanged(r, t), this.applyState(t), this.setState({ group: void 0 });
     }, this.clearButtonClick = (e) => {
       const t = this.base.initState();
       t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
@@ -180,15 +180,15 @@ const ke = "Please enter a valid value!", F = class F extends u.Component {
       t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || ke
+        this.validity.valid ? "" : this.props.validationMessage || Ee
       );
-    }, ne(Ie);
+    }, ae(xe);
   }
   get _inputId() {
     return this.props.id;
   }
   get document() {
-    if (K)
+    if (z)
       return this.element && this.element.ownerDocument || document;
   }
   /** @hidden */
@@ -199,7 +199,7 @@ const ke = "Please enter a valid value!", F = class F extends u.Component {
    * The mobile mode of the ComboBox.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= J && this.props.adaptive);
+    return !!(this.state.windowWidth && this.state.windowWidth <= Y && this.props.adaptive);
   }
   /**
    * The value of the ComboBox.
@@ -247,25 +247,25 @@ const ke = "Please enter a valid value!", F = class F extends u.Component {
   }
   /** @hidden */
   componentDidUpdate(s, e) {
-    var f;
-    const { dataItemKey: t, virtual: i, groupField: n = "", textField: l } = this.props, a = S(this.props), r = s.virtual ? s.virtual.total : 0, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, o = s.opened !== void 0 ? s.opened : e.opened;
+    var y;
+    const { dataItemKey: t, virtual: i, groupField: n = "", textField: r } = this.props, a = S(this.props), d = s.virtual ? s.virtual.total : 0, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, o = s.opened !== void 0 ? s.opened : e.opened;
     s.data !== a && this.checkForDuplicatePlainTextRecords();
-    const h = !o && d, c = this.value;
-    if (this._valueOnDidUpdate = c, this.base.didUpdate(), i && i.total !== r)
+    const c = !o && l, p = this.value;
+    if (this._valueOnDidUpdate = p, this.base.didUpdate(), i && i.total !== d)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
-      const b = s.value !== void 0 ? s.value : e.value;
-      let x = this.hasDuplicates ? this.navigationIndex || 0 : a.findIndex((p) => E(p, c, t));
-      this.props.groupMode === "modern" && l && c && (x = (f = this.base.getGroupedDataModernMode(a, n)) == null ? void 0 : f.map((p) => p[l]).indexOf(c[l]));
-      const g = !E(b, c, t);
-      h && i ? this.base.scrollToVirtualItem(i, x) : h && !i ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][n], this), this.base.scrollToItem(x)) : (this.hasDuplicates || d && o && c && g) && this.base.scrollToItem(x);
+      const x = s.value !== void 0 ? s.value : e.value;
+      let v = this.hasDuplicates ? this.navigationIndex || 0 : a.findIndex((h) => E(h, p, t));
+      this.props.groupMode === "modern" && r && p && (v = (y = this.base.getGroupedDataModernMode(a, n)) == null ? void 0 : y.map((h) => h[r]).indexOf(p[r]));
+      const m = !E(x, p, t);
+      c && i ? this.base.scrollToVirtualItem(i, v) : c && !i ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][n], this), this.base.scrollToItem(v)) : (this.hasDuplicates || l && o && p && m) && this.base.scrollToItem(v);
     }
-    h && this._input && this._input.focus(), this.setValidity();
+    c && 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() {
@@ -274,140 +274,139 @@ const ke = "Please enter a valid value!", F = class F extends u.Component {
   }
   /** @hidden */
   render() {
-    const s = Y(this).toLanguageString(
-      W,
-      j[W]
-    ), e = Y(this).toLanguageString(
-      $,
-      j[$]
+    const s = $(this).toLanguageString(
+      U,
+      W[U]
+    ), e = $(this).toLanguageString(
+      j,
+      W[j]
     ), {
       dir: t,
       disabled: i,
       clearButton: n = F.defaultProps.clearButton,
-      label: l,
+      label: r,
       textField: a,
-      adaptive: r,
       className: d,
-      style: o,
-      loading: h,
+      style: l,
+      loading: o,
       iconClassName: c,
-      virtual: f,
-      size: b,
+      virtual: p,
+      size: y,
       rounded: x,
-      fillMode: g,
-      opened: p = this.state.opened,
-      placeholder: m,
-      svgIcon: I,
-      unstyled: M
-    } = this.props, O = !this.validityStyles || this.validity.valid, A = this.props.filter !== void 0 ? this.props.filter : this.state.text, Z = k(this.value, a), T = w(A) ? A : Z, ee = n && (!!T || w(this.value)), V = this.base.vs, L = this.props.id || this._inputId, R = this.mobileMode, _ = M && M.uComboBox;
-    V.enabled = f !== void 0, f !== void 0 && (V.skip = f.skip, V.total = f.total, V.pageSize = f.pageSize);
-    const [te, se] = X(this.props.prefix || u.Fragment), [ie, oe] = X(this.props.suffix || u.Fragment), z = /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
+      fillMode: v,
+      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, L = this.mobileMode, _ = b && b.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 || u.Fragment), [se, ie] = Q(this.props.suffix || u.Fragment), R = /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
       "span",
       {
-        className: y(
+        className: I(
           D.wrapper({
             c: _,
-            size: b,
+            size: y,
             rounded: x,
-            fillMode: g,
+            fillMode: v,
             disabled: i,
-            invalid: !O,
-            loading: h,
+            invalid: !B,
+            loading: o,
             required: this.required
           }),
           d
         ),
         ref: this.componentRef,
-        style: l ? { ...o, width: void 0 } : o,
+        style: r ? { ...l, width: void 0 } : l,
         dir: t
       },
-      this.props.prefix && /* @__PURE__ */ u.createElement(te, { ...se }),
-      this.renderSearchBar(T || "", L, m),
-      ee && !h && /* @__PURE__ */ u.createElement(ye, { onClick: this.clearButtonClick, key: "clearbutton" }),
-      h && /* @__PURE__ */ u.createElement(re, { className: y(D.loadingIcon({ c: _ })), name: "loading", key: "loading" }),
-      this.props.suffix && /* @__PURE__ */ u.createElement(ie, { ...oe }),
+      this.props.prefix && /* @__PURE__ */ u.createElement(ee, { ...te }),
+      this.renderSearchBar(T || "", A, h),
+      Z && !o && /* @__PURE__ */ u.createElement(Ie, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      o && /* @__PURE__ */ u.createElement(le, { className: I(D.loadingIcon({ c: _ })), name: "loading", key: "loading" }),
+      this.props.suffix && /* @__PURE__ */ u.createElement(se, { ...ie }),
       /* @__PURE__ */ u.createElement(
-        U,
+        G,
         {
           tabIndex: -1,
           type: "button",
-          "aria-label": p ? e : s,
+          "aria-label": m ? e : s,
           icon: c ? void 0 : "caret-alt-down",
-          svgIcon: I || Ce,
+          svgIcon: g || ye,
           iconClass: c,
-          size: b,
-          fillMode: g,
+          size: y,
+          fillMode: v,
           rounded: null,
           themeColor: "base",
-          className: y(D.inputButton({ c: _ })),
+          className: I(D.inputButton({ c: _ })),
           onClick: this.toggleBtnClick,
-          onMouseDown: (ae) => ae.preventDefault()
+          onMouseDown: (oe) => oe.preventDefault()
         }
       ),
-      !R && this.renderListContainer()
-    ), R && this.renderAdaptiveListContainer());
-    return l ? /* @__PURE__ */ u.createElement(
-      ue,
+      !L && this.renderListContainer()
+    ), L && this.renderAdaptiveListContainer());
+    return r ? /* @__PURE__ */ u.createElement(
+      ce,
       {
-        label: l,
-        editorId: L,
+        label: r,
+        editorId: A,
         editorValue: T,
-        editorValid: O,
+        editorValid: B,
         editorDisabled: i,
-        style: { width: o ? o.width : void 0 },
-        children: z,
-        unstyled: M
+        style: { width: l ? l.width : void 0 },
+        children: R,
+        unstyled: b
       }
-    ) : z;
+    ) : R;
   }
   /** @hidden */
   onNavigate(s, e, t) {
-    const { virtual: i = { skip: 0 } } = this.props, n = S(this.props), l = this.props.filter ? this.props.filter : this.state.text;
-    let a = -1, r;
-    const d = this.base.vs, o = this.value;
+    const { virtual: i = { skip: 0 } } = this.props, n = S(this.props), r = this.props.filter ? this.props.filter : this.state.text;
+    let a = -1, d;
+    const l = this.base.vs, o = this.value;
     this._suggested = "";
-    const h = this.hasDuplicates && this.duplicates.indexOf(o) !== -1;
-    if (a = this.getFocusedIndex(h), a !== -1 && !w(o))
+    const c = this.hasDuplicates && this.duplicates.indexOf(o) !== -1;
+    if (a = this.getFocusedIndex(c), a !== -1 && !w(o))
       this.handleItemSelect(a, s);
-    else if (l === "")
+    else if (r === "")
       this.handleItemSelect(0, s);
     else {
-      const c = i.skip + a;
-      r = this.base.navigation.navigate({
+      const p = i.skip + a;
+      d = this.base.navigation.navigate({
         keyCode: e,
-        current: c,
-        max: (d.enabled ? d.total : n.length) - 1,
+        current: p,
+        max: (l.enabled ? l.total : n.length) - 1,
         min: 0,
         skipItems: t || void 0
-      }), r !== void 0 && this.handleItemSelect(r, s);
+      }), d !== void 0 && this.handleItemSelect(d, s);
     }
-    this.navigationIndex = r;
+    this.navigationIndex = d;
   }
   getCurrentValueDisabledStatus(s, e, t) {
     return s && e && e[t] && e[t].disabled;
   }
   applyValueOnEnter(s, e) {
-    const { textField: t, allowCustom: i } = this.props, n = S(this.props), l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = k(this.value, t) === s ? this.index : H(n, s, t), d = r !== -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 = k(this.value, t) === s ? this.index : K(n, s, t), l = d !== -1;
     let o;
-    if (this._suggested = "", d)
-      o = n[r];
+    if (this._suggested = "", l)
+      o = n[d];
     else if (i)
       o = t !== void 0 ? { [t]: s } : s;
     else
       return this.selectFocusedItem(s, e);
-    this.triggerOnChange(o, e), l && this.base.togglePopup(e), this.props.filter === void 0 && this.state.text !== void 0 && (e.data.text = void 0), this.applyState(e);
+    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), l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, a = k(this.value, t);
+    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))
-      return this.closeOpenedApplyStateNonMobileMode(e, l), this.applyState(e);
-    const r = H(n, s, t, !0), d = r !== -1;
+      return this.closeOpenedApplyStateNonMobileMode(e, r), this.applyState(e);
+    const d = K(n, s, t, !0), l = d !== -1;
     let o = null;
-    d ? o = n[r] : 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, l), this.applyState(e);
+    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: l = q } = this.props, a = S(this.props), r = n.skip, d = s === "" && r === 0 ? 0 : l(a, s, i);
-    return d !== -1 ? this.handleItemSelect(d + r, e) : (this.triggerOnChange(null, e), this.state.text !== void 0 && (e.data.text = void 0)), t && this.base.togglePopup(e), this.applyState(e);
+    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() {
     const { windowWidth: s = 0 } = this.state, {
@@ -415,31 +414,31 @@ const ke = "Please enter a valid value!", F = class F extends u.Component {
       footer: t,
       size: i,
       groupField: n,
-      groupMode: l,
+      groupMode: r,
       list: a,
-      virtual: r,
-      adaptiveTitle: d,
+      virtual: d,
+      adaptiveTitle: l,
       groupStickyHeaderItemRender: o,
-      unstyled: h
-    } = this.props, c = S(this.props), f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = this.base.getAdaptiveAnimation(), x = h && h.uComboBox, g = h && h.uDropDownsActionSheet;
-    let { group: p } = this.state;
-    p === void 0 && n !== void 0 && (p = k(c[0], n));
-    const m = {
+      unstyled: c
+    } = this.props, p = S(this.props), y = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = this.base.getAdaptiveAnimation(), v = c && c.uComboBox, m = c && c.uDropDownsActionSheet;
+    let { group: h } = this.state;
+    h === void 0 && n !== void 0 && (h = k(p[0], n));
+    const g = {
       navigatable: !1,
       navigatableElements: [],
-      expand: f,
-      animation: b,
-      onClose: (I) => this.toggleBtnClick(I),
-      animationStyles: s <= Q ? { top: 0, width: "100%", height: "100%" } : void 0,
-      className: y(
-        B.wrapper({
-          c: g,
-          isFullScreen: s <= Q
+      expand: y,
+      animation: x,
+      onClose: (b) => this.toggleBtnClick(b),
+      animationStyles: s <= J ? { top: 0, width: "100%", height: "100%" } : void 0,
+      className: I(
+        M.wrapper({
+          c: m,
+          isFullScreen: s <= J
         })
       )
     };
-    return /* @__PURE__ */ u.createElement(De, { ...m }, /* @__PURE__ */ u.createElement(we, null, /* @__PURE__ */ u.createElement("div", { className: y(B.titleBar({ c: g })) }, /* @__PURE__ */ u.createElement("div", { className: y(B.title({ c: g })) }, /* @__PURE__ */ u.createElement("div", { className: y(B.header({ c: g })) }, d), /* @__PURE__ */ u.createElement("div", { className: y(B.subtitle({ c: g })) })), /* @__PURE__ */ u.createElement("div", { className: y(B.actions({ c: g })) }, /* @__PURE__ */ u.createElement(
-      U,
+    return /* @__PURE__ */ u.createElement(Se, { ...g }, /* @__PURE__ */ u.createElement(De, null, /* @__PURE__ */ u.createElement("div", { className: I(M.titleBar({ c: m })) }, /* @__PURE__ */ u.createElement("div", { className: I(M.title({ c: m })) }, /* @__PURE__ */ u.createElement("div", { className: I(M.header({ c: m })) }, l), /* @__PURE__ */ u.createElement("div", { className: I(M.subtitle({ c: m })) })), /* @__PURE__ */ u.createElement("div", { className: I(M.actions({ c: m })) }, /* @__PURE__ */ u.createElement(
+      G,
       {
         tabIndex: 0,
         "aria-label": "Cancel",
@@ -450,80 +449,80 @@ const ke = "Please enter a valid value!", F = class F extends u.Component {
         size: "large",
         onClick: this.toggleBtnClick,
         icon: "x",
-        svgIcon: Se
+        svgIcon: Ce
       }
-    ))), /* @__PURE__ */ u.createElement("div", { className: y(B.titleBarGroup({ c: g })) }, this.renderMobileListFilter())), /* @__PURE__ */ u.createElement(Ee, { overflowHidden: !0 }, /* @__PURE__ */ u.createElement("div", { className: y(
+    ))), /* @__PURE__ */ u.createElement("div", { className: I(M.titleBarGroup({ c: m })) }, this.renderMobileListFilter())), /* @__PURE__ */ u.createElement(we, { overflowHidden: !0 }, /* @__PURE__ */ u.createElement("div", { className: I(
       D.listContainer({
-        c: x
+        c: v
       })
     ) }, /* @__PURE__ */ u.createElement(
       "div",
       {
-        className: y(
+        className: I(
           D.list({
-            c: x,
+            c: v,
             list: a,
             size: "large",
             tableSize: i,
-            virtual: r
+            virtual: d
           })
         )
       },
-      e && /* @__PURE__ */ u.createElement("div", { className: y(D.listHeader({ c: x })) }, e),
-      !a && p && c.length !== 0 && /* @__PURE__ */ u.createElement(
-        G,
+      e && /* @__PURE__ */ u.createElement("div", { className: I(D.listHeader({ c: v })) }, e),
+      !a && h && p.length !== 0 && /* @__PURE__ */ u.createElement(
+        q,
         {
-          group: p,
-          groupMode: l,
+          group: h,
+          groupMode: r,
           render: o
         }
       ),
       this.renderList(),
-      t && /* @__PURE__ */ u.createElement("div", { className: y(D.listFooter({ c: x }), this.props.footerClassName) }, t)
+      t && /* @__PURE__ */ u.createElement("div", { className: I(D.listFooter({ c: v }), this.props.footerClassName) }, t)
     ))));
   }
   renderListContainer() {
-    const s = this.base, { dir: e, header: t, footer: i, groupField: n, groupMode: l, size: a, list: r, virtual: d, groupStickyHeaderItemRender: o, unstyled: h } = this.props, c = S(this.props), f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = s.getPopupSettings(), x = b.width !== void 0 ? b.width : s.popupWidth, g = h && h.uComboBox;
-    let { group: p } = this.state;
-    return p === void 0 && n !== void 0 && (p = k(c[0], n)), /* @__PURE__ */ u.createElement(
-      fe,
+    const s = this.base, { dir: e, header: t, footer: i, groupField: n, groupMode: r, size: a, list: d, virtual: l, groupStickyHeaderItemRender: o, unstyled: c } = this.props, p = S(this.props), y = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = s.getPopupSettings(), v = x.width !== void 0 ? x.width : s.popupWidth, m = c && c.uComboBox;
+    let { group: h } = this.state;
+    return h === void 0 && n !== void 0 && (h = k(p[0], n)), /* @__PURE__ */ u.createElement(
+      ve,
       {
-        width: x,
+        width: v,
         popupSettings: {
-          ...b,
-          anchor: b.anchor || this.element,
-          show: f,
-          popupClass: y(
-            b.popupClass,
+          ...x,
+          anchor: x.anchor || this.element,
+          show: y,
+          popupClass: I(
+            x.popupClass,
             D.listContainer({
-              c: g,
+              c: m,
               popup: !0
             })
           )
         },
         dir: e !== void 0 ? e : this.base.dirCalculated,
-        itemsCount: [c.length]
+        itemsCount: [p.length]
       },
       /* @__PURE__ */ u.createElement(
         "div",
         {
-          className: y(
+          className: I(
             D.list({
-              c: g,
-              list: r,
+              c: m,
+              list: d,
               size: a,
               tableSize: a,
-              virtual: d
+              virtual: l
             })
           )
         },
-        t && /* @__PURE__ */ u.createElement("div", { className: y(D.listHeader({ c: g })) }, t),
-        !r && p && c.length !== 0 && /* @__PURE__ */ u.createElement(G, { group: p, groupMode: l, render: o }),
+        t && /* @__PURE__ */ u.createElement("div", { className: I(D.listHeader({ c: m })) }, t),
+        !d && h && p.length !== 0 && /* @__PURE__ */ u.createElement(q, { group: h, groupMode: r, render: o }),
         this.renderList(),
         i && /* @__PURE__ */ u.createElement(
           "div",
           {
-            className: y(D.listFooter({ c: g }), this.props.footerClassName)
+            className: I(D.listFooter({ c: m }), this.props.footerClassName)
           },
           i
         )
@@ -536,19 +535,19 @@ const ke = "Please enter a valid value!", F = class F extends u.Component {
       dataItemKey: t,
       listNoDataRender: i,
       itemRender: n,
-      groupHeaderItemRender: l,
+      groupHeaderItemRender: r,
       virtual: a = { skip: 0, total: void 0 },
-      unstyled: r
-    } = this.props, d = S(this.props), o = s.getPopupSettings(), h = s.vs, c = a.skip, f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = `translateY(${h.translate}px)`, x = f ? this.getFocusedIndex(this.hasDuplicates) : void 0, g = this.props.filter !== void 0 ? this.props.filter : this.state.text, p = k(this.value, e), m = w(g) && g !== p ? null : this.value, I = this.props.list || be, M = r && r.uComboBox;
+      unstyled: d
+    } = this.props, l = S(this.props), o = s.getPopupSettings(), c = s.vs, p = a.skip, y = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = `translateY(${c.translate}px)`, v = 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;
     return /* @__PURE__ */ u.createElement(
-      I,
+      b,
       {
         id: s.listBoxId,
         virtual: !!a,
-        show: f,
-        data: d,
-        focusedIndex: x,
-        value: m,
+        show: y,
+        data: l,
+        focusedIndex: v,
+        value: g,
         textField: e,
         valueField: t,
         groupField: this.props.groupField,
@@ -557,23 +556,23 @@ const ke = "Please enter a valid value!", F = class F extends u.Component {
         optionsGuid: s.guid,
         hasDuplicates: this.hasDuplicates,
         listRef: (O) => {
-          h.list = this.base.list = O, this.itemHeight = 0;
+          c.list = this.base.list = O, this.itemHeight = 0;
         },
-        wrapperStyle: this.state.windowWidth && this.state.windowWidth > J ? { maxHeight: o.height } : {},
-        wrapperCssClass: y(D.listContent({
-          c: M,
+        wrapperStyle: this.state.windowWidth && this.state.windowWidth > Y ? { maxHeight: o.height } : {},
+        wrapperCssClass: I(D.listContent({
+          c: B,
           virtual: a
         })),
-        listStyle: h.enabled ? { transform: b } : void 0,
+        listStyle: c.enabled ? { transform: x } : void 0,
         key: "listkey",
-        skip: c,
+        skip: p,
         onClick: this.handleItemClick,
         itemRender: n,
-        groupHeaderItemRender: l,
+        groupHeaderItemRender: r,
         noDataRender: i,
         onMouseDown: (O) => O.preventDefault(),
         onScroll: this.onScroll,
-        wrapperRef: h.scrollerRef,
+        wrapperRef: c.scrollerRef,
         scroller: this.base.renderScrollElement(),
         ariaSetSize: a.total
       }
@@ -583,48 +582,50 @@ const ke = "Please enter a valid value!", F = class F extends u.Component {
     const {
       tabIndex: i,
       disabled: n,
-      title: l,
+      title: r,
       ariaLabelledBy: a,
-      ariaDescribedBy: r,
-      dataItemKey: d,
+      ariaDescribedBy: d,
+      dataItemKey: l,
       virtual: o = { skip: 0 },
-      accessKey: h
-    } = this.props, c = S(this.props), f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = this.value, x = Math.max(
+      accessKey: c,
+      unstyled: p
+    } = this.props, y = S(this.props), x = this.props.opened !== void 0 ? this.props.opened : this.state.opened, v = this.value, m = Math.max(
       0,
-      c.findIndex((p) => E(p, b, d))
+      y.findIndex((g) => E(g, v, l))
     );
-    this._suggested && !E(this._valueOnDidUpdate, b, d) && (this._suggested = "");
-    const g = {
-      accessKey: h
+    this._suggested && !E(this._valueOnDidUpdate, v, l) && (this._suggested = "");
+    const h = {
+      accessKey: c
     };
     return /* @__PURE__ */ u.createElement(
-      ve,
+      me,
       {
         id: e,
-        readOnly: f && this.mobileMode,
+        readOnly: x && this.mobileMode,
         placeholder: t,
         tabIndex: i,
-        title: l,
+        title: r,
         value: s + this._suggested,
         suggestedText: this._suggested,
-        ref: (p) => this._input = p && p.input,
+        ref: (g) => this._input = g && g.input,
         onClick: this.onInputClick,
         onKeyDown: this.onInputKeyDown,
         onChange: this.inputOnChange,
         onFocus: this.base.handleFocus,
         onBlur: this.handleBlur,
         disabled: n,
-        expanded: f,
+        expanded: x,
         owns: this.base.listBoxId,
-        activedescendant: `option-${this.base.guid}-${x + o.skip}`,
+        activedescendant: `option-${this.base.guid}-${m + o.skip}`,
         role: "combobox",
         ariaLabelledBy: a,
         ariaLabel: this.props.ariaLabel,
-        ariaDescribedBy: r,
+        ariaDescribedBy: d,
         ariaRequired: this.required,
         render: this.props.valueRender,
         ariaControls: this.base.listBoxId,
-        ...g
+        unstyled: p,
+        ...h
       }
     );
   }
@@ -643,14 +644,14 @@ const ke = "Please enter a valid value!", F = class F extends u.Component {
       textField: t,
       dataItemKey: i,
       virtual: n = { skip: 0 },
-      focusedItemIndex: l = q,
+      focusedItemIndex: r = H,
       skipDisabledItems: a
-    } = this.props, r = S(this.props), d = this.props.filter ? this.props.filter : this.state.text;
-    return s && this.navigationIndex !== void 0 ? this.navigationIndex : w(e) && d === void 0 ? r.findIndex((o) => E(o, e, i)) : d ? l(r, d, t) : a && t && !d && n.skip === 0 ? r.findIndex((o) => !o.disabled && o[t]) : n.skip === 0 ? 0 : -1;
+    } = 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;
   }
   suggestValue(s) {
     const { data: e, textField: t } = this.props;
-    this._suggested = me(s, e, t);
+    this._suggested = ge(s, e, t);
   }
   applyState(s) {
     this.base.applyState(s), this._valueDuringOnChange = void 0;
@@ -662,29 +663,29 @@ const ke = "Please enter a valid value!", F = class F extends u.Component {
 };
 F.displayName = "ComboBox", F.propTypes = {
   ...N.propTypes,
-  size: v.oneOf([null, "small", "medium", "large"]),
-  rounded: v.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: v.oneOf([null, "solid", "flat", "outline"]),
-  dataItemKey: v.string,
-  groupField: v.string,
-  groupMode: v.oneOf([void 0, "classic", "modern"]),
-  isMultiColumn: v.bool,
-  suggest: v.bool,
-  placeholder: v.string,
-  title: v.string,
-  allowCustom: v.bool,
-  clearButton: v.bool,
-  iconClassName: v.string,
-  svgIcon: le,
-  validationMessage: v.string,
-  required: v.bool,
-  id: v.string,
-  ariaLabelledBy: v.string,
-  ariaLabel: v.string,
-  ariaDescribedBy: v.string,
-  list: v.any,
-  valueRender: v.func,
-  skipDisabledItems: v.bool
+  size: f.oneOf([null, "small", "medium", "large"]),
+  rounded: f.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: f.oneOf([null, "solid", "flat", "outline"]),
+  dataItemKey: f.string,
+  groupField: f.string,
+  groupMode: f.oneOf([void 0, "classic", "modern"]),
+  isMultiColumn: f.bool,
+  suggest: f.bool,
+  placeholder: f.string,
+  title: f.string,
+  allowCustom: f.bool,
+  clearButton: f.bool,
+  iconClassName: f.string,
+  svgIcon: ne,
+  validationMessage: f.string,
+  required: f.bool,
+  id: f.string,
+  ariaLabelledBy: f.string,
+  ariaLabel: f.string,
+  ariaDescribedBy: f.string,
+  list: f.any,
+  valueRender: f.func,
+  skipDisabledItems: f.bool
 }, F.defaultProps = {
   ...N.defaultProps,
   size: "medium",
@@ -700,15 +701,15 @@ F.displayName = "ComboBox", F.propTypes = {
   suffix: void 0
 };
 let P = F;
-const Fe = de(), Me = pe(
-  he(
-    Fe,
-    ce(P)
+const ke = re(), Fe = de(
+  pe(
+    ke,
+    he(P)
   )
 );
-Me.displayName = "KendoReactComboBox";
+Fe.displayName = "KendoReactComboBox";
 export {
-  Me as ComboBox,
-  Fe as ComboBoxPropsContext,
+  Fe as ComboBox,
+  ke as ComboBoxPropsContext,
   P as ComboBoxWithoutContext
 };