@progress/kendo-react-dropdowns 7.4.0-develop.1 → 7.4.0-develop.3

package/ComboBox/ComboBox.mjs

@@ -6,33 +6,39 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as u from "react";
+import * as h from "react";
 import f from "prop-types";
 import B from "../common/DropDownBase.mjs";
-import { Keys as x, validatePackage as ie, svgIconPropType as oe, canUseDOM as z, classNames as E, IconWrap as ae, createPropsContext as ne, withIdHOC as le, withPropsContext as re, kendoThemeMaps as de } from "@progress/kendo-react-common";
+import { Keys as x, validatePackage as ie, svgIconPropType as oe, canUseDOM as K, classNames as D, IconWrap as ae, createPropsContext as ne, withIdHOC as le, withPropsContext as re, kendoThemeMaps as de } from "@progress/kendo-react-common";
 import { FloatingLabel as pe } from "@progress/kendo-react-labels";
-import { areSame as C, getItemValue as S, isPresent as k, getItemIndexByText as A, suggestValue as he, itemIndexStartsWith as K } from "../common/utils.mjs";
+import { getPlainDataDuplicates as he, areSame as C, getItemValue as S, isPresent as k, getItemIndexByText as z, suggestValue as ce, itemIndexStartsWith as A } from "../common/utils.mjs";
 import ue from "../common/SearchBar.mjs";
-import ce from "../common/ListContainer.mjs";
-import ge from "../common/List.mjs";
-import me from "../common/ListFilter.mjs";
+import ge from "../common/ListContainer.mjs";
+import me from "../common/List.mjs";
+import ve from "../common/ListFilter.mjs";
 import H from "../common/GroupStickyHeader.mjs";
-import { packageMetadata as ve } from "../package-metadata.mjs";
-import fe from "../common/ClearButton.mjs";
+import { packageMetadata as fe } from "../package-metadata.mjs";
+import be from "../common/ClearButton.mjs";
 import { Button as q } from "@progress/kendo-react-buttons";
-import { caretAltDownIcon as be, xIcon as xe } from "@progress/kendo-svg-icons";
+import { caretAltDownIcon as xe, xIcon as Ie } from "@progress/kendo-svg-icons";
 import { comboArrowBtnAriaLabelExpand as W, messages as $, comboArrowBtnAriaLabelCollapse as G } from "../messages/index.mjs";
 import { provideLocalizationService as U } from "@progress/kendo-react-intl";
-import { ActionSheet as Ie, ActionSheetHeader as ye, ActionSheetContent as ke } from "@progress/kendo-react-layout";
-import { MOBILE_MEDIUM_DEVISE as D, MOBILE_SMALL_DEVISE as j } from "../common/constants.mjs";
+import { ActionSheet as ye, ActionSheetHeader as ke, ActionSheetContent as Ce } from "@progress/kendo-react-layout";
+import { MOBILE_MEDIUM_DEVISE as F, MOBILE_SMALL_DEVISE as j } from "../common/constants.mjs";
 import Y from "../common/withCustomComponent.mjs";
-const Ce = "Please enter a valid value!", { sizeMap: V, roundedMap: Se } = de, w = class w extends u.Component {
+const Se = "Please enter a valid value!", { sizeMap: M, roundedMap: we } = de, w = class w extends h.Component {
   constructor(s) {
-    super(s), this.state = {}, this.base = new B(this), this._element = null, this._suggested = "", this._skipBlur = !1, this._input = null, this._adaptiveFilterInput = null, this.itemHeight = 0, this.focus = () => {
+    super(s), this.state = {}, this.base = new B(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();
+    }, this.checkForDuplicatePlainTextRecords = () => {
+      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 a = this.props.data;
+        this.duplicates = he(a), this.hasDuplicates = this.duplicates.length > 0;
+      }
     }, this.handleItemSelect = (e, t) => {
-      const { data: n = [], virtual: i, dataItemKey: l } = this.props, d = i ? i.skip : 0, a = n[e - d], r = !C(a, this.value, l);
-      this.triggerOnChange(a, t), this.state.text !== void 0 && (t.data.text = void 0), r && this.base.triggerPageChangeCornerItems(a, t);
+      const { data: a = [], virtual: o, dataItemKey: n } = this.props, d = o ? o.skip : 0, l = a[e - d], r = this.hasDuplicates || !C(l, this.value, n);
+      this.triggerOnChange(l, t), this.state.text !== void 0 && (t.data.text = void 0), r && this.base.triggerPageChangeCornerItems(l, t);
     }, this.onPopupOpened = () => {
       setTimeout(() => {
         this.mobileMode && this._adaptiveFilterInput && (this._skipBlur = !0, this._adaptiveFilterInput.focus(), this._skipBlur = !1);
@@ -40,19 +46,19 @@ const Ce = "Please enter a valid value!", { sizeMap: V, roundedMap: Se } = de, w
     }, this.componentRef = (e) => {
       this._element = e, this.base.wrapper = e;
     }, this.toggleBtnClick = (e) => {
-      const { data: t = [], skipDisabledItems: n, textField: i } = this.props, l = this.getFocusedIndex(), d = this.getCurrentValueDisabledStatus(i, t, l), a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = this.base.initState();
-      if (r.syntheticEvent = e, !n && i && d && this.clearValueOnToggleBtnClick(e), this.base.togglePopup(r), !a && this.mobileMode) {
-        const o = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
-        this.base.filterChanged(o, r);
+      const { data: t = [], skipDisabledItems: a, textField: o } = this.props, n = this.getFocusedIndex(), d = this.getCurrentValueDisabledStatus(o, t, n), l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = this.base.initState();
+      if (r.syntheticEvent = e, !a && o && d && this.clearValueOnToggleBtnClick(e), this.base.togglePopup(r), !l && this.mobileMode) {
+        const i = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
+        this.base.filterChanged(i, r);
       }
       this.applyState(r);
     }, this.renderMobileListFilter = () => {
-      const e = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, t = S(this.value, this.props.textField), n = k(e) ? e : t;
-      return /* @__PURE__ */ u.createElement(
-        me,
+      const e = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, t = S(this.value, this.props.textField), a = k(e) ? e : t;
+      return /* @__PURE__ */ h.createElement(
+        ve,
         {
-          value: n,
-          ref: (i) => this._adaptiveFilterInput = i && i.element,
+          value: a,
+          ref: (o) => this._adaptiveFilterInput = o && o.element,
           onChange: this.handleMobileFilterChange,
           onKeyDown: this.onInputKeyDown,
           size: this.props.size,
@@ -64,97 +70,97 @@ const Ce = "Please enter a valid value!", { sizeMap: V, roundedMap: Se } = de, w
       const t = this.base.initState();
       t.syntheticEvent = e.syntheticEvent, t.data.text = e.target.value, this.base.filterChanged(e.target.value, t), this.applyState(t);
     }, this.onScroll = (e) => {
-      const { vs: t, list: n } = this.base;
+      const { vs: t, list: a } = this.base;
       t.scrollHandler(e);
-      const { groupField: i } = this.props;
-      let { data: l = [] } = this.props;
-      if (!i || !l.length)
+      const { groupField: o } = this.props;
+      let { data: n = [] } = this.props;
+      if (!o || !n.length)
         return;
-      const d = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : n ? n.children[0].offsetHeight : 0), r = e.target.scrollTop - t.skip * d;
-      this.props.groupMode === "modern" && (l = this.base.getGroupedDataModernMode(l, i));
-      let o = l[0][i];
-      for (let h = 1; h < l.length && !(d * h > r); h++)
-        l[h] && l[h][i] && (o = l[h][i]);
-      o !== this.state.group && (this.setState({
-        group: o
-      }), this.props.onGroupScroll && this.props.onGroupScroll.call(void 0, { group: o }));
+      const d = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : a ? a.children[0].offsetHeight : 0), r = e.target.scrollTop - t.skip * d;
+      this.props.groupMode === "modern" && (n = this.base.getGroupedDataModernMode(n, o));
+      let i = n[0][o];
+      for (let c = 1; c < n.length && !(d * c > r); c++)
+        n[c] && n[c][o] && (i = n[c][o]);
+      i !== this.state.group && (this.setState({
+        group: i
+      }), this.props.onGroupScroll && this.props.onGroupScroll.call(void 0, { group: i }));
     }, this.handleItemClick = (e, t) => {
-      this.base.handleItemClick(e, t), this._valueDuringOnChange = void 0;
+      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: n, data: i = [] } = this.props, l = this.getFocusedIndex(), a = !(l === -1) && this.getCurrentValueDisabledStatus(n, i, l);
-        t.data.focused = !1, t.events.push({ type: "onBlur" }), t.syntheticEvent = e, n && a && this.clearValueOnBlur(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, t);
+        const t = this.base.initState(), { textField: a, data: o = [] } = this.props, n = this.getFocusedIndex(), l = !(n === -1) && this.getCurrentValueDisabledStatus(a, o, n);
+        t.data.focused = !1, t.events.push({ type: "onBlur" }), t.syntheticEvent = e, a && l && 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, n = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
+      const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, a = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
       if (!t && this.mobileMode) {
-        const i = this.base.initState();
-        i.syntheticEvent = e, this.base.togglePopup(i), this.base.filterChanged(n, i), this.applyState(i);
+        const o = this.base.initState();
+        o.syntheticEvent = e, this.base.togglePopup(o), this.base.filterChanged(a, o), this.applyState(o);
       }
     }, this.onInputKeyDown = (e) => {
-      const { data: t = [], skipDisabledItems: n, textField: i, dataItemKey: l, groupField: d } = this.props, a = this.value, r = Math.max(0, t.findIndex((c) => C(c, a, l))), o = e.keyCode, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = this.base.initState();
-      if (p.syntheticEvent = e, !e.altKey && (o === x.up || o === x.down)) {
-        if (e.preventDefault(), d !== "" && i)
-          if (!this.props.skipDisabledItems && h)
-            this.onNavigate(p, o);
+      const { data: t = [], skipDisabledItems: a, textField: o, dataItemKey: n, groupField: d } = this.props, l = this.value, r = Math.max(0, t.findIndex((u) => C(u, l, n))), i = e.keyCode, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = this.base.initState();
+      if (p.syntheticEvent = e, !e.altKey && (i === x.up || i === x.down)) {
+        if (e.preventDefault(), d !== "" && o)
+          if (!this.props.skipDisabledItems && c)
+            this.onNavigate(p, i);
           else {
-            let c = 0;
-            if (o === x.down || o === x.right) {
-              const m = t.slice(r + 1 < t.length ? r + 1 : r).find((b) => !b.disabled && b[i]);
-              c = m && t.findIndex((b) => b[i] === m[i]);
-            } else if (o === x.up || o === x.left) {
+            let u = 0;
+            if (i === x.down || i === x.right) {
+              const m = t.slice(r + 1 < t.length ? r + 1 : r).find((b) => !b.disabled && b[o]);
+              u = m && t.findIndex((b) => b[o] === m[o]);
+            } else if (i === x.up || i === x.left) {
               let m;
               if (r === 0)
-                m = t, c = t.findIndex((b) => !b.disabled && b[i]);
+                m = t, u = t.findIndex((b) => !b.disabled && b[o]);
               else {
                 m = t.slice(0, r);
                 let b = m.pop();
                 for (; b && b.disabled; )
                   b = m.pop();
-                c = b && t.findIndex((F) => F[i] === b[i]);
+                u = b && t.findIndex((V) => V[o] === b[o]);
               }
             }
-            if (c !== void 0) {
-              const m = c - r;
-              this.onNavigate(p, o, m);
+            if (u !== void 0) {
+              const m = u - r;
+              this.onNavigate(p, i, m);
             } else
-              c === void 0 && t.findIndex((m) => m[i] === a[i]) === t.length - 1 && this.onNavigate(p, o);
+              u === void 0 && t.findIndex((m) => m[o] === l[o]) === t.length - 1 && this.onNavigate(p, i);
           }
-        else if (!this.props.skipDisabledItems && h)
-          this.onNavigate(p, o);
+        else if (!this.props.skipDisabledItems && c)
+          this.onNavigate(p, i);
         else {
-          let c = null;
-          if (o === x.down || o === x.right)
-            c = t.slice(r + 1).find((m) => !m.disabled);
-          else if (o === x.up || o === x.left) {
+          let u = null;
+          if (i === x.down || i === x.right)
+            u = t.slice(r + 1).find((m) => !m.disabled);
+          else if (i === x.up || i === x.left) {
             const m = t.slice(0, r);
-            for (c = m.pop(); c && c.disabled; )
-              c = m.pop();
+            for (u = m.pop(); u && u.disabled; )
+              u = m.pop();
           }
-          if (c) {
-            const m = c.id - r - 1;
-            this.onNavigate(p, o, m);
+          if (u) {
+            const m = u.id - r - 1;
+            this.onNavigate(p, i, m);
           } else
-            this.onNavigate(p, o);
+            this.onNavigate(p, i);
         }
         this.applyState(p);
       }
       const g = () => {
         e.preventDefault(), this.base.togglePopup(p), this.applyState(p);
-      }, I = this.getFocusedIndex(), v = I === -1, y = !v && this.getCurrentValueDisabledStatus(i, t, I);
-      h ? o === x.pageUp ? this.base.scrollPopupByPageSize(-1) : o === x.pageDown ? this.base.scrollPopupByPageSize(1) : e.altKey && o === x.up ? g() : o === x.enter ? (e.preventDefault(), (i && !v && e.currentTarget.value ? t[I][i] : void 0) ? !n && i && y ? this.clearValueOnEnterOrEsc(e) : y || this.applyValueOnEnter(e.currentTarget.value, p) : this.applyValueOnEnter(e.currentTarget.value, p)) : o === x.esc && (!n && i && y && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, p)) : !h && o === x.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && o === x.down && g();
+      }, I = this.getFocusedIndex(), v = I === -1, y = !v && this.getCurrentValueDisabledStatus(o, t, I);
+      c ? i === x.pageUp ? this.base.scrollPopupByPageSize(-1) : i === x.pageDown ? this.base.scrollPopupByPageSize(1) : e.altKey && i === x.up ? g() : i === x.enter ? (e.preventDefault(), (o && !v && e.currentTarget.value ? t[I][o] : void 0) ? !a && o && y ? this.clearValueOnEnterOrEsc(e) : y || this.applyValueOnEnter(e.currentTarget.value, p) : this.applyValueOnEnter(e.currentTarget.value, p)) : i === x.esc && (!a && o && y && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, p)) : !c && i === x.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && i === x.down && g();
     }, this.inputOnChange = (e) => {
       const t = this.base.initState();
       t.syntheticEvent = e;
-      const n = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = e.currentTarget, l = i.value;
+      const a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, o = e.currentTarget, n = o.value;
       if (this.props.suggest) {
-        const d = i.selectionEnd === l.length;
-        let a = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-        k(a) || (a = S(this.value, this.props.textField) || "");
-        const r = a && a === l, o = a && a.length > l.length;
-        r || o || !d ? this._suggested = "" : this.suggestValue(l);
+        const d = o.selectionEnd === n.length;
+        let l = this.props.filter !== void 0 ? this.props.filter : this.state.text;
+        k(l) || (l = S(this.value, this.props.textField) || "");
+        const r = l && l === n, i = l && l.length > n.length;
+        r || i || !d ? this._suggested = "" : this.suggestValue(n);
       }
-      this.props.filter === void 0 && (t.data.text = l), this.state.focusedItem !== void 0 && (t.data.focusedItem = void 0), n || 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 = n), this.state.focusedItem !== void 0 && (t.data.focusedItem = void 0), a || this.base.togglePopup(t), this.base.filterChanged(n, t), this.applyState(t), this.setState({ group: void 0 });
     }, this.clearButtonClick = (e) => {
       const t = this.base.initState();
       t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
@@ -169,15 +175,15 @@ const Ce = "Please enter a valid value!", { sizeMap: V, roundedMap: Se } = de, w
       t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || Ce
+        this.validity.valid ? "" : this.props.validationMessage || Se
       );
-    }, ie(ve);
+    }, ie(fe);
   }
   get _inputId() {
     return this.props.id;
   }
   get document() {
-    if (z)
+    if (K)
       return this.element && this.element.ownerDocument || document;
   }
   /** @hidden */
@@ -188,7 +194,7 @@ const Ce = "Please enter a valid value!", { sizeMap: V, roundedMap: Se } = de, w
    * The mobile mode of the ComboBox.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= D && this.props.adaptive);
+    return !!(this.state.windowWidth && this.state.windowWidth <= F && this.props.adaptive);
   }
   /**
    * The value of the ComboBox.
@@ -208,7 +214,7 @@ const Ce = "Please enter a valid value!", { sizeMap: V, roundedMap: Se } = de, w
    */
   get index() {
     const { data: s = [], dataItemKey: e } = this.props, t = this.value;
-    return s.findIndex((n) => C(n, t, e));
+    return s.findIndex((a) => C(a, t, e));
   }
   /**
    * Gets the `name` property of the ComboBox.
@@ -237,22 +243,24 @@ const Ce = "Please enter a valid value!", { sizeMap: V, roundedMap: Se } = de, w
   /** @hidden */
   componentDidUpdate(s, e) {
     var g;
-    const { dataItemKey: t, virtual: n, groupField: i = "", data: l = [], textField: d } = this.props, a = s.virtual ? s.virtual.total : 0, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, o = s.opened !== void 0 ? s.opened : e.opened, h = !o && r, p = this.value;
-    if (this._valueOnDidUpdate = p, n && n.total !== a)
+    const { dataItemKey: t, virtual: a, groupField: o = "", data: n = [], textField: d } = this.props, l = s.virtual ? s.virtual.total : 0, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = s.opened !== void 0 ? s.opened : e.opened;
+    s.data !== n && this.checkForDuplicatePlainTextRecords();
+    const c = !i && r, p = this.value;
+    if (this._valueOnDidUpdate = p, a && a.total !== l)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
       const I = s.value !== void 0 ? s.value : e.value;
-      let v = l.findIndex((c) => C(c, p, t));
-      this.props.groupMode === "modern" && d && p && (v = (g = this.base.getGroupedDataModernMode(l, i)) == null ? void 0 : g.map((c) => c[d]).indexOf(p[d]));
+      let v = this.hasDuplicates ? this.navigationIndex || 0 : n.findIndex((u) => C(u, p, t));
+      this.props.groupMode === "modern" && d && p && (v = (g = this.base.getGroupedDataModernMode(n, o)) == null ? void 0 : g.map((u) => u[d]).indexOf(p[d]));
       const y = !C(I, p, t);
-      h && n ? this.base.scrollToVirtualItem(n, v) : h && !n ? (this.onPopupOpened(), l && l.length !== 0 && this.base.resetGroupStickyHeader(l[0][i], this), this.base.scrollToItem(v)) : r && o && p && y && this.base.scrollToItem(v);
+      c && a ? this.base.scrollToVirtualItem(a, v) : c && !a ? (this.onPopupOpened(), n && n.length !== 0 && this.base.resetGroupStickyHeader(n[0][o], this), this.base.scrollToItem(v)) : (this.hasDuplicates || r && i && p && y) && 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 = 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.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();
   }
   /** @hidden */
   componentWillUnmount() {
@@ -266,57 +274,57 @@ const Ce = "Please enter a valid value!", { sizeMap: V, roundedMap: Se } = de, w
       $[G]
     ), {
       dir: t,
-      disabled: n,
-      clearButton: i = w.defaultProps.clearButton,
-      label: l,
+      disabled: a,
+      clearButton: o = w.defaultProps.clearButton,
+      label: n,
       textField: d,
-      adaptive: a,
+      adaptive: l,
       className: r,
-      style: o,
-      loading: h,
+      style: i,
+      loading: c,
       iconClassName: p,
       virtual: g,
       size: I,
       rounded: v,
       fillMode: y,
-      opened: c = this.state.opened,
+      opened: u = this.state.opened,
       placeholder: m,
       svgIcon: b
-    } = this.props, { windowWidth: F = 0 } = this.state, _ = !this.validityStyles || this.validity.valid, P = this.props.filter !== void 0 ? this.props.filter : this.state.text, J = S(this.value, d), O = k(P) ? P : J, Q = i && (!!O || k(this.value)), M = this.base.vs, N = this.props.id || this._inputId, L = F <= D && a;
-    M.enabled = g !== void 0, g !== void 0 && (M.skip = g.skip, M.total = g.total, M.pageSize = g.pageSize);
-    const [X, Z] = Y(this.props.prefix || u.Fragment), [ee, te] = Y(this.props.suffix || u.Fragment), R = /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
+    } = this.props, { windowWidth: V = 0 } = this.state, _ = !this.validityStyles || this.validity.valid, P = this.props.filter !== void 0 ? this.props.filter : this.state.text, J = S(this.value, d), O = k(P) ? P : J, Q = o && (!!O || k(this.value)), E = this.base.vs, N = this.props.id || this._inputId, L = V <= F && l;
+    E.enabled = g !== void 0, g !== void 0 && (E.skip = g.skip, E.total = g.total, E.pageSize = g.pageSize);
+    const [X, Z] = Y(this.props.prefix || h.Fragment), [ee, te] = Y(this.props.suffix || h.Fragment), R = /* @__PURE__ */ h.createElement(h.Fragment, null, /* @__PURE__ */ h.createElement(
       "span",
       {
-        className: E(
+        className: D(
           "k-combobox k-input",
           {
-            [`k-input-${V[I] || I}`]: I,
-            [`k-rounded-${Se[v] || v}`]: v,
+            [`k-input-${M[I] || I}`]: I,
+            [`k-rounded-${we[v] || v}`]: v,
             [`k-input-${y}`]: y,
             "k-invalid": !_,
-            "k-loading": h,
+            "k-loading": c,
             "k-required": this.required,
-            "k-disabled": n
+            "k-disabled": a
           },
           r
         ),
         ref: this.componentRef,
-        style: l ? { ...o, width: void 0 } : o,
+        style: n ? { ...i, width: void 0 } : i,
         dir: t
       },
-      this.props.prefix && /* @__PURE__ */ u.createElement(X, { ...Z }),
+      this.props.prefix && /* @__PURE__ */ h.createElement(X, { ...Z }),
       this.renderSearchBar(O || "", N, m),
-      Q && !h && /* @__PURE__ */ u.createElement(fe, { onClick: this.clearButtonClick, key: "clearbutton" }),
-      h && /* @__PURE__ */ u.createElement(ae, { className: "k-input-loading-icon", name: "loading", key: "loading" }),
-      this.props.suffix && /* @__PURE__ */ u.createElement(ee, { ...te }),
-      /* @__PURE__ */ u.createElement(
+      Q && !c && /* @__PURE__ */ h.createElement(be, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      c && /* @__PURE__ */ h.createElement(ae, { className: "k-input-loading-icon", name: "loading", key: "loading" }),
+      this.props.suffix && /* @__PURE__ */ h.createElement(ee, { ...te }),
+      /* @__PURE__ */ h.createElement(
         q,
         {
           tabIndex: -1,
           type: "button",
-          "aria-label": c ? e : s,
+          "aria-label": u ? e : s,
           icon: p ? void 0 : "caret-alt-down",
-          svgIcon: b || be,
+          svgIcon: b || xe,
           iconClass: p,
           size: I,
           fillMode: y,
@@ -329,67 +337,72 @@ const Ce = "Please enter a valid value!", { sizeMap: V, roundedMap: Se } = de, w
       ),
       !L && this.renderListContainer()
     ), L && this.renderAdaptiveListContainer());
-    return l ? /* @__PURE__ */ u.createElement(
+    return n ? /* @__PURE__ */ h.createElement(
       pe,
       {
-        label: l,
+        label: n,
         editorId: N,
         editorValue: O,
         editorValid: _,
-        editorDisabled: n,
-        style: { width: o ? o.width : void 0 },
+        editorDisabled: a,
+        style: { width: i ? i.width : void 0 },
         children: R
       }
     ) : R;
   }
   /** @hidden */
   onNavigate(s, e, t) {
-    const { data: n = [], virtual: i = { skip: 0 } } = this.props, l = this.props.filter ? this.props.filter : this.state.text, d = this.getFocusedIndex(), a = this.base.vs, r = this.value;
-    if (this._suggested = "", d !== -1 && !k(r))
+    const { data: a = [], virtual: o = { skip: 0 } } = this.props, n = this.props.filter ? this.props.filter : this.state.text;
+    let d = -1, l;
+    const r = this.base.vs, i = this.value;
+    this._suggested = "";
+    const c = this.hasDuplicates && this.duplicates.indexOf(i) !== -1;
+    if (d = this.getFocusedIndex(c), d !== -1 && !k(i))
       this.handleItemSelect(d, s);
-    else if (l === "")
+    else if (n === "")
       this.handleItemSelect(0, s);
     else {
-      const o = i.skip + d, h = this.base.navigation.navigate({
+      const p = o.skip + d;
+      l = this.base.navigation.navigate({
         keyCode: e,
-        current: o,
-        max: (a.enabled ? a.total : n.length) - 1,
+        current: p,
+        max: (r.enabled ? r.total : a.length) - 1,
         min: 0,
         skipItems: t || void 0
-      });
-      h !== void 0 && this.handleItemSelect(h, s);
+      }), l !== void 0 && this.handleItemSelect(l, s);
     }
+    this.navigationIndex = l;
   }
   getCurrentValueDisabledStatus(s, e, t) {
     return s && e && e[t] && e[t].disabled;
   }
   applyValueOnEnter(s, e) {
-    const { data: t = [], textField: n, allowCustom: i } = this.props, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, a = S(this.value, n) === s ? this.index : A(t, s, n), r = a !== -1;
-    let o;
+    const { data: t = [], textField: a, allowCustom: o } = this.props, n = this.props.opened !== void 0 ? this.props.opened : this.state.opened, l = S(this.value, a) === s ? this.index : z(t, s, a), r = l !== -1;
+    let i;
     if (this._suggested = "", r)
-      o = t[a];
-    else if (i)
-      o = n !== void 0 ? { [n]: s } : s;
+      i = t[l];
+    else if (o)
+      i = a !== void 0 ? { [a]: 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(i, e), n && 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 { data: t = [], textField: n, allowCustom: i } = this.props, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = S(this.value, n), a = this.state.windowWidth && this.state.windowWidth <= D;
+    const { data: t = [], textField: a, allowCustom: o } = this.props, n = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = S(this.value, a), l = this.state.windowWidth && this.state.windowWidth <= F;
     if (this._suggested = "", s === d || s === "" && !k(d))
-      return l && !a && this.base.togglePopup(e), this.applyState(e);
-    const r = A(t, s, n, !0), o = r !== -1;
-    let h = null;
-    o ? h = t[r] : i && (h = s ? n ? { [n]: s } : s : null), this.triggerOnChange(h, e), this.state.text !== void 0 && (e.data.text = void 0, this.base.filterChanged("", e)), l && !a && this.base.togglePopup(e), this.applyState(e);
+      return n && !l && this.base.togglePopup(e), this.applyState(e);
+    const r = z(t, s, a, !0), i = r !== -1;
+    let c = null;
+    i ? c = t[r] : o && (c = s ? a ? { [a]: s } : s : null), this.triggerOnChange(c, e), this.state.text !== void 0 && (e.data.text = void 0, this.base.filterChanged("", e)), n && !l && this.base.togglePopup(e), this.applyState(e);
   }
   selectFocusedItem(s, e) {
-    const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { data: n = [], textField: i, virtual: l = { skip: 0 }, focusedItemIndex: d = K } = this.props, a = l.skip, r = s === "" && a === 0 ? 0 : d(n, s, i);
-    return r !== -1 ? this.handleItemSelect(r + a, 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, { data: a = [], textField: o, virtual: n = { skip: 0 }, focusedItemIndex: d = A } = this.props, l = n.skip, r = s === "" && l === 0 ? 0 : d(a, s, o);
+    return r !== -1 ? this.handleItemSelect(r + l, 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, { header: e, footer: t, size: n, data: i = [], groupField: l, groupMode: d, list: a, virtual: r, adaptiveTitle: o, groupStickyHeaderItemRender: h } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+    const { windowWidth: s = 0 } = this.state, { header: e, footer: t, size: a, data: o = [], groupField: n, groupMode: d, list: l, virtual: r, adaptiveTitle: i, groupStickyHeaderItemRender: c } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
     let { group: g } = this.state;
-    g === void 0 && l !== void 0 && (g = S(i[0], l));
+    g === void 0 && n !== void 0 && (g = S(o[0], n));
     const I = {
       navigatable: !1,
       navigatableElements: [],
@@ -399,7 +412,7 @@ const Ce = "Please enter a valid value!", { sizeMap: V, roundedMap: Se } = de, w
       animationStyles: s <= j ? { top: 0, width: "100%", height: "100%" } : void 0,
       className: s <= j ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
     };
-    return /* @__PURE__ */ u.createElement(Ie, { ...I }, /* @__PURE__ */ u.createElement(ye, { className: "k-text-center" }, /* @__PURE__ */ u.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ u.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ u.createElement("div", null, o)), /* @__PURE__ */ u.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ u.createElement(
+    return /* @__PURE__ */ h.createElement(ye, { ...I }, /* @__PURE__ */ h.createElement(ke, { className: "k-text-center" }, /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ h.createElement("div", null, i)), /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ h.createElement(
       q,
       {
         tabIndex: 0,
@@ -409,119 +422,120 @@ const Ce = "Please enter a valid value!", { sizeMap: V, roundedMap: Se } = de, w
         fillMode: "flat",
         onClick: this.toggleBtnClick,
         icon: "x",
-        svgIcon: xe
+        svgIcon: Ie
       }
-    ))), /* @__PURE__ */ u.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderMobileListFilter())), /* @__PURE__ */ u.createElement(ke, { className: "!k-overflow-hidden" }, /* @__PURE__ */ u.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ u.createElement("div", { className: E(
+    ))), /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderMobileListFilter())), /* @__PURE__ */ h.createElement(Ce, { className: "!k-overflow-hidden" }, /* @__PURE__ */ h.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ h.createElement("div", { className: D(
       {
-        "k-list": !a,
+        "k-list": !l,
         "k-list-lg": !0,
         "k-virtual-list": r,
-        "k-data-table": a,
-        [`k-table-${V[n] || n}`]: a && n
+        "k-data-table": l,
+        [`k-table-${M[a] || a}`]: l && a
       }
-    ) }, e && /* @__PURE__ */ u.createElement("div", { className: "k-table-header" }, e), !a && g && i.length !== 0 && /* @__PURE__ */ u.createElement(H, { group: g, groupMode: d, render: h }), this.renderList(), t && /* @__PURE__ */ u.createElement("div", { className: "k-list-footer" }, t)))));
+    ) }, e && /* @__PURE__ */ h.createElement("div", { className: "k-table-header" }, e), !l && g && o.length !== 0 && /* @__PURE__ */ h.createElement(H, { group: g, groupMode: d, render: c }), this.renderList(), t && /* @__PURE__ */ h.createElement("div", { className: "k-list-footer" }, t)))));
   }
   renderListContainer() {
-    const s = this.base, { dir: e, header: t, footer: n, data: i = [], groupField: l, groupMode: d, size: a, list: r, virtual: o, groupStickyHeaderItemRender: h } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = s.getPopupSettings(), I = g.width !== void 0 ? g.width : s.popupWidth;
+    const s = this.base, { dir: e, header: t, footer: a, data: o = [], groupField: n, groupMode: d, size: l, list: r, virtual: i, groupStickyHeaderItemRender: c } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = s.getPopupSettings(), I = g.width !== void 0 ? g.width : s.popupWidth;
     let { group: v } = this.state;
-    return v === void 0 && l !== void 0 && (v = S(i[0], l)), /* @__PURE__ */ u.createElement(
-      ce,
+    return v === void 0 && n !== void 0 && (v = S(o[0], n)), /* @__PURE__ */ h.createElement(
+      ge,
       {
         width: I,
         popupSettings: {
           ...g,
           anchor: g.anchor || this.element,
           show: p,
-          popupClass: E(
+          popupClass: D(
             g.popupClass,
             "k-list-container",
             "k-combobox-popup"
           )
         },
         dir: e !== void 0 ? e : this.base.dirCalculated,
-        itemsCount: [i.length]
+        itemsCount: [o.length]
       },
-      /* @__PURE__ */ u.createElement("div", { className: E(
+      /* @__PURE__ */ h.createElement("div", { className: D(
         {
           "k-list": !r,
-          [`k-list-${V[a] || a}`]: !r && a,
-          "k-virtual-list": o,
+          [`k-list-${M[l] || l}`]: !r && l,
+          "k-virtual-list": i,
           "k-data-table": r,
-          [`k-table-${V[a] || a}`]: r && a
+          [`k-table-${M[l] || l}`]: r && l
         }
-      ) }, t && /* @__PURE__ */ u.createElement("div", { className: "k-table-header" }, t), !r && v && i.length !== 0 && /* @__PURE__ */ u.createElement(H, { group: v, groupMode: d, render: h }), this.renderList(), n && /* @__PURE__ */ u.createElement("div", { className: E(
+      ) }, t && /* @__PURE__ */ h.createElement("div", { className: "k-table-header" }, t), !r && v && o.length !== 0 && /* @__PURE__ */ h.createElement(H, { group: v, groupMode: d, render: c }), this.renderList(), a && /* @__PURE__ */ h.createElement("div", { className: D(
         {
           "k-list-footer": !this.props.footerClassName
         },
         this.props.footerClassName
-      ) }, n))
+      ) }, a))
     );
   }
   renderList() {
     const s = this.base, {
       textField: e,
       dataItemKey: t,
-      listNoDataRender: n,
-      itemRender: i,
-      groupHeaderItemRender: l,
+      listNoDataRender: a,
+      itemRender: o,
+      groupHeaderItemRender: n,
       data: d = [],
-      virtual: a = { skip: 0, total: void 0 }
-    } = this.props, r = s.getPopupSettings(), o = s.vs, h = a.skip, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = `translateY(${o.translate}px)`, I = p ? this.getFocusedIndex() : void 0, v = this.props.filter !== void 0 ? this.props.filter : this.state.text, y = S(this.value, e), c = k(v) && v !== y ? null : this.value, m = this.props.list || ge;
-    return /* @__PURE__ */ u.createElement(
+      virtual: l = { skip: 0, total: void 0 }
+    } = this.props, r = s.getPopupSettings(), i = s.vs, c = l.skip, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = `translateY(${i.translate}px)`, I = p ? this.getFocusedIndex(this.hasDuplicates) : void 0, v = this.props.filter !== void 0 ? this.props.filter : this.state.text, y = S(this.value, e), u = k(v) && v !== y ? null : this.value, m = this.props.list || me;
+    return /* @__PURE__ */ h.createElement(
       m,
       {
         id: s.listBoxId,
-        virtual: !!a,
+        virtual: !!l,
         show: p,
         data: d,
         focusedIndex: I,
-        value: c,
+        value: u,
         textField: e,
         valueField: t,
         groupField: this.props.groupField,
         groupMode: this.props.groupMode,
         isMultiColumn: this.props.isMultiColumn,
         optionsGuid: s.guid,
+        hasDuplicates: this.hasDuplicates,
         listRef: (b) => {
-          o.list = this.base.list = b, this.itemHeight = 0;
+          i.list = this.base.list = b, this.itemHeight = 0;
         },
-        wrapperStyle: this.state.windowWidth && this.state.windowWidth > D ? { maxHeight: r.height } : {},
-        wrapperCssClass: E(
+        wrapperStyle: this.state.windowWidth && this.state.windowWidth > F ? { maxHeight: r.height } : {},
+        wrapperCssClass: D(
           "k-list-content",
           {
-            "k-list-scroller": !a
+            "k-list-scroller": !l
           }
         ),
-        listStyle: o.enabled ? { transform: g } : void 0,
+        listStyle: i.enabled ? { transform: g } : void 0,
         key: "listkey",
-        skip: h,
+        skip: c,
         onClick: this.handleItemClick,
-        itemRender: i,
-        groupHeaderItemRender: l,
-        noDataRender: n,
+        itemRender: o,
+        groupHeaderItemRender: n,
+        noDataRender: a,
         onMouseDown: (b) => b.preventDefault(),
         onScroll: this.onScroll,
-        wrapperRef: o.scrollerRef,
+        wrapperRef: i.scrollerRef,
         scroller: this.base.renderScrollElement(),
-        ariaSetSize: a.total
+        ariaSetSize: l.total
       }
     );
   }
   renderSearchBar(s, e, t) {
     const {
-      tabIndex: n,
-      disabled: i,
-      data: l = [],
+      tabIndex: a,
+      disabled: o,
+      data: n = [],
       dataItemKey: d,
-      virtual: a = { skip: 0 }
-    } = this.props, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, o = this.value, h = Math.max(0, l.findIndex((p) => C(p, o, d)));
-    return this._suggested && !C(this._valueOnDidUpdate, o, d) && (this._suggested = ""), /* @__PURE__ */ u.createElement(
+      virtual: l = { skip: 0 }
+    } = this.props, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = this.value, c = Math.max(0, n.findIndex((p) => C(p, i, d)));
+    return this._suggested && !C(this._valueOnDidUpdate, i, d) && (this._suggested = ""), /* @__PURE__ */ h.createElement(
       ue,
       {
         id: e,
         readOnly: r && this.mobileMode,
         placeholder: t,
-        tabIndex: n,
+        tabIndex: a,
         title: this.props.title,
         accessKey: this.props.accessKey,
         value: s + this._suggested,
@@ -532,10 +546,10 @@ const Ce = "Please enter a valid value!", { sizeMap: V, roundedMap: Se } = de, w
         onChange: this.inputOnChange,
         onFocus: this.base.handleFocus,
         onBlur: this.handleBlur,
-        disabled: i,
+        disabled: o,
         expanded: r,
         owns: this.base.listBoxId,
-        activedescendant: `option-${this.base.guid}-${h + a.skip}`,
+        activedescendant: `option-${this.base.guid}-${c + l.skip}`,
         role: "combobox",
         ariaLabelledBy: this.props.ariaLabelledBy,
         ariaDescribedBy: this.props.ariaDescribedBy,
@@ -546,21 +560,21 @@ const Ce = "Please enter a valid value!", { sizeMap: V, roundedMap: Se } = de, w
   }
   clearValue() {
     const s = this.base.initState();
-    this._suggested = "", this.base.filterChanged("", s), this.props.filter === void 0 && this.state.text !== void 0 && (s.data.text = void 0), this.triggerOnChange(null, s);
+    this._suggested = "", this.navigationIndex = void 0, this.base.filterChanged("", s), this.props.filter === void 0 && this.state.text !== void 0 && (s.data.text = void 0), this.triggerOnChange(null, s);
     const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, t = this.mobileMode;
     e && !t && this.base.togglePopup(s), this.applyState(s);
   }
   triggerOnChange(s, e) {
     const t = this.value;
-    !k(t) && !k(s) || C(t, s, this.props.dataItemKey) || (this.props.value === void 0 && (e.data.value = s), this._valueDuringOnChange = s, e.events.push({ type: "onChange" }));
+    !this.hasDuplicates && (!k(t) && !k(s) || C(t, s, this.props.dataItemKey)) || (this.props.value === void 0 && (e.data.value = s), this._valueDuringOnChange = s, e.events.push({ type: "onChange" }));
   }
-  getFocusedIndex() {
-    const s = this.value, { data: e = [], textField: t, dataItemKey: n, virtual: i = { skip: 0 }, focusedItemIndex: l = K, skipDisabledItems: d } = this.props, a = this.props.filter ? this.props.filter : this.state.text;
-    return k(s) && a === void 0 ? e.findIndex((r) => C(r, s, n)) : a ? l(e, a, t) : d && t && !a && i.skip === 0 ? e.findIndex((r) => !r.disabled && r[t]) : i.skip === 0 ? 0 : -1;
+  getFocusedIndex(s) {
+    const e = this.value, { data: t = [], textField: a, dataItemKey: o, virtual: n = { skip: 0 }, focusedItemIndex: d = A, skipDisabledItems: l } = this.props, r = this.props.filter ? this.props.filter : this.state.text;
+    return s && this.navigationIndex !== void 0 ? this.navigationIndex : k(e) && r === void 0 ? t.findIndex((i) => C(i, e, o)) : r ? d(t, r, a) : l && a && !r && n.skip === 0 ? t.findIndex((i) => !i.disabled && i[a]) : n.skip === 0 ? 0 : -1;
   }
   suggestValue(s) {
     const { data: e, textField: t } = this.props;
-    this._suggested = he(s, e, t);
+    this._suggested = ce(s, e, t);
   }
   applyState(s) {
     this.base.applyState(s), this._valueDuringOnChange = void 0;
@@ -609,10 +623,10 @@ w.displayName = "ComboBox", w.propTypes = {
   suffix: void 0
 };
 let T = w;
-const we = ne(), Ee = le(re(we, T));
+const De = ne(), Ee = le(re(De, T));
 Ee.displayName = "KendoReactComboBox";
 export {
   Ee as ComboBox,
-  we as ComboBoxPropsContext,
+  De as ComboBoxPropsContext,
   T as ComboBoxWithoutContext
 };