@progress/kendo-react-dropdowns 13.4.0-develop.4 → 14.0.0-develop.1

package/MultiSelect/MultiSelect.mjs

@@ -7,124 +7,139 @@
  */
 import * as g from "react";
 import v from "prop-types";
-import { withIdHOC as J, createPropsContext as Q, withPropsContext as X, withAdaptiveModeContext as Z, Keys as u, classNames as S, kendoThemeMaps as ee, IconWrap as B, WatermarkOverlay as te, getLicenseMessage as se, canUseDOM as V, validatePackage as ie } from "@progress/kendo-react-common";
-import { plusIcon as oe } from "@progress/kendo-svg-icons";
-import { FloatingLabel as ae } from "@progress/kendo-react-labels";
-import ne from "../common/ListContainer.mjs";
-import le from "../common/List.mjs";
-import de from "../common/GroupStickyHeader.mjs";
-import re from "./TagList.mjs";
-import he from "../common/SearchBar.mjs";
+import { withIdHOC as J, createPropsContext as Q, withPropsContext as X, withAdaptiveModeContext as Z, Keys as u, classNames as S, kendoThemeMaps as tt, IconWrap as B, WatermarkOverlay as et, getLicenseMessage as st, canUseDOM as V, validatePackage as it, subscribeToKendoPaste as ot } from "@progress/kendo-react-common";
+import { plusIcon as at } from "@progress/kendo-svg-icons";
+import { FloatingLabel as nt } from "@progress/kendo-react-labels";
+import lt from "../common/ListContainer.mjs";
+import dt from "../common/List.mjs";
+import rt from "../common/GroupStickyHeader.mjs";
+import ht from "./TagList.mjs";
+import pt from "../common/SearchBar.mjs";
 import O from "../common/DropDownBase.mjs";
 import { ActiveDescendant as w } from "../common/settings.mjs";
-import { getFilteredData as x, areSame as P, removeDataItems as D, isPresent as _, getItemValue as K, preventDefaultNonInputs as pe, matchTags as z, itemIndexStartsWith as ce } from "../common/utils.mjs";
+import { getFilteredData as x, getItemIndexByText as ct, areSame as D, removeDataItems as P, isPresent as K, getItemValue as _, preventDefaultNonInputs as ut, matchTags as z, itemIndexStartsWith as ft } from "../common/utils.mjs";
 import { packageMetadata as A } from "../package-metadata.mjs";
-import ue from "../common/ClearButton.mjs";
-import { AdaptiveMode as fe } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as ge } from "@progress/kendo-react-layout";
-import me from "../common/ListFilter.mjs";
+import gt from "../common/ClearButton.mjs";
+import { AdaptiveMode as mt } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as vt } from "@progress/kendo-react-layout";
+import bt from "../common/ListFilter.mjs";
 import H from "../common/withCustomComponent.mjs";
-const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W = (E) => E.preventDefault(), $ = (E) => E === 2, C = class C extends g.Component {
-  constructor(n) {
-    super(n), this.state = {
+const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W = (E) => E.preventDefault(), $ = (E) => E === 2, C = class C extends g.Component {
+  constructor(l) {
+    super(l), this.state = {
       activedescendant: w.PopupList,
       currentValue: []
     }, this._element = null, this._valueItemsDuringOnChange = null, this.base = new O(this), this._tags = [], this._input = null, this._adaptiveInput = null, this._skipFocusEvent = !1, this._lastSelectedOrDeslectedItemIndex = null, this.itemHeight = 0, this.scrollToFocused = !1, this.showLicenseWatermark = !1, this.focus = () => {
       this._input && this._input.focus();
-    }, this.handleItemSelect = (e, t) => {
-      const { dataItemKey: o, virtual: s } = this.props, a = x(this.props), i = s ? s.skip : 0, p = a[e - i], r = this.value.findIndex((h) => P(h, p, o));
-      this._lastSelectedOrDeslectedItemIndex = a.findIndex((h) => P(h, p, o));
+    }, this.handleKendoPasteValue = (t) => {
+      if (t == null)
+        return;
+      const e = x(this.props), { textField: o, dataItemKey: s } = this.props, a = String(t).split(",").map((h) => h.trim()).filter((h) => h).reduce((h, r) => {
+        const d = ct(e, r, o, !1, !0);
+        if (d !== -1) {
+          const n = e[d];
+          h.some((p) => D(p, n, s)) || h.push(n);
+        }
+        return h;
+      }, []);
+      if (a.length === 0)
+        return;
+      const i = this.base.initState();
+      i.syntheticEvent = { target: this._element }, this.triggerOnChange(a, i), this.applyState(i);
+    }, this.handleItemSelect = (t, e) => {
+      const { dataItemKey: o, virtual: s } = this.props, a = x(this.props), i = s ? s.skip : 0, h = a[t - i], r = this.value.findIndex((p) => D(p, h, o));
+      this._lastSelectedOrDeslectedItemIndex = a.findIndex((p) => D(p, h, o));
       let d = [];
-      r !== -1 ? (d = this.value, d.splice(r, 1)) : d = [...this.value, p], (this.props.filter !== void 0 ? this.props.filter : this.state.text) && !this.mobileMode && (this.state.text && (t.data.text = ""), this.base.filterChanged("", t)), this._adaptiveInput && this._adaptiveInput.blur(), this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.triggerOnChange(d, t), this.base.triggerPageChangeCornerItems(p, t);
-    }, this.onTagDelete = (e, t) => {
+      r !== -1 ? (d = this.value, d.splice(r, 1)) : d = [...this.value, h], (this.props.filter !== void 0 ? this.props.filter : this.state.text) && !this.mobileMode && (this.state.text && (e.data.text = ""), this.base.filterChanged("", e)), this._adaptiveInput && this._adaptiveInput.blur(), this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.triggerOnChange(d, e), this.base.triggerPageChangeCornerItems(h, e);
+    }, this.onTagDelete = (t, e) => {
       const o = this.base.initState();
-      o.syntheticEvent = t, this.opened && this.base.togglePopup(o), !this.state.focused && !this.mobileMode && (o.data.focused = !0, this.focus());
+      o.syntheticEvent = e, this.opened && this.base.togglePopup(o), !this.state.focused && !this.mobileMode && (o.data.focused = !0, this.focus());
       const s = this.value;
-      D(s, e, this.props.dataItemKey), this.triggerOnChange(s, o), this.applyState(o);
-    }, this.itemFocus = (e, t) => {
-      const { allowCustom: o, virtual: s } = this.props, a = x(this.props), i = s ? s.skip : 0, p = s ? s.pageSize : 0, r = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: d } = this.getFocusedState(), l = o && r, h = a[e - i];
-      if (s && !h && e >= 0 && d !== e) {
-        const f = Math.floor(e / p) * p;
+      P(s, t, this.props.dataItemKey), this.triggerOnChange(s, o), this.applyState(o);
+    }, this.itemFocus = (t, e) => {
+      const { allowCustom: o, virtual: s } = this.props, a = x(this.props), i = s ? s.skip : 0, h = s ? s.pageSize : 0, r = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: d } = this.getFocusedState(), n = o && r, p = a[t - i];
+      if (s && !p && t >= 0 && d !== t) {
+        const f = Math.floor(t / h) * h;
         if (f !== i) {
-          this.state.focusedIndex !== e && (t.data.focusedIndex = e, t.data.activedescendant = w.PopupList), this.base.triggerOnPageChange(t, f, p);
+          this.state.focusedIndex !== t && (e.data.focusedIndex = t, e.data.activedescendant = w.PopupList), this.base.triggerOnPageChange(e, f, h);
           return;
         }
       }
-      h && d !== e ? this.state.focusedIndex !== e && (t.data.focusedIndex = e, t.data.activedescendant = w.PopupList) : l && e === -1 && this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.base.triggerPageChangeCornerItems(h, t);
-    }, this.componentRef = (e) => {
-      this._element = e, this.base.wrapper = e;
-    }, this.searchbarRef = (e) => {
-      const t = this._input = e && e.input;
-      t && this.state.focused && window.setTimeout(() => t.focus(), 0);
-    }, this.onChangeHandler = (e) => {
-      const t = this.base.initState(), o = e.target.value;
-      t.syntheticEvent = e, this.props.filter === void 0 && (t.data.text = o), t.data.focusedIndex = void 0, this.opened ? this.scrollToFocused = !0 : (this.base.togglePopup(t), this.setState({ currentValue: this.value })), this.base.filterChanged(o, t), this.applyState(t), this.setState({ group: void 0 });
-    }, this.clearButtonClick = (e) => {
-      const t = this.base.initState();
-      t.syntheticEvent = e, e.stopPropagation(), this.value.length > 0 && this.triggerOnChange([], t), this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.opened && this.base.togglePopup(t);
+      p && d !== t ? this.state.focusedIndex !== t && (e.data.focusedIndex = t, e.data.activedescendant = w.PopupList) : n && t === -1 && this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.base.triggerPageChangeCornerItems(p, e);
+    }, this.componentRef = (t) => {
+      this._element = t, this.base.wrapper = t;
+    }, this.searchbarRef = (t) => {
+      const e = this._input = t && t.input;
+      e && this.state.focused && window.setTimeout(() => e.focus(), 0);
+    }, this.onChangeHandler = (t) => {
+      const e = this.base.initState(), o = t.target.value;
+      e.syntheticEvent = t, this.props.filter === void 0 && (e.data.text = o), e.data.focusedIndex = void 0, this.opened ? this.scrollToFocused = !0 : (this.base.togglePopup(e), this.setState({ currentValue: this.value })), this.base.filterChanged(o, e), this.applyState(e), this.setState({ group: void 0 });
+    }, this.clearButtonClick = (t) => {
+      const e = this.base.initState();
+      e.syntheticEvent = t, t.stopPropagation(), this.value.length > 0 && this.triggerOnChange([], e), this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.opened && this.base.togglePopup(e);
       const o = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-      _(o) && o !== "" && this.base.filterChanged("", t), this.state.text && (t.data.text = ""), this._lastSelectedOrDeslectedItemIndex = null, this.applyState(t);
-    }, this.onInputKeyDown = (e) => {
-      const { textField: t, groupField: o, virtual: s } = this.props, a = x(this.props), i = e.keyCode, p = this.props.filter !== void 0 ? this.props.filter : this.state.text, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: d, focusedIndex: l } = this.getFocusedState(), h = this.base.initState();
-      if (h.syntheticEvent = e, !p && this.value.length > 0 && (i === u.left || i === u.right || i === u.home || i === u.end || i === u.delete || i === u.backspace) && !e.shiftKey)
-        return this.onTagsNavigate(e, h);
+      K(o) && o !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this._lastSelectedOrDeslectedItemIndex = null, this.applyState(e);
+    }, this.onInputKeyDown = (t) => {
+      const { textField: e, groupField: o, virtual: s } = this.props, a = x(this.props), i = t.keyCode, h = this.props.filter !== void 0 ? this.props.filter : this.state.text, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: d, focusedIndex: n } = this.getFocusedState(), p = this.base.initState();
+      if (p.syntheticEvent = t, !h && this.value.length > 0 && (i === u.left || i === u.right || i === u.home || i === u.end || i === u.delete || i === u.backspace) && !t.shiftKey)
+        return this.onTagsNavigate(t, p);
       const f = () => {
-        e.preventDefault(), this.base.togglePopup(h), this.applyState(h);
+        t.preventDefault(), this.base.togglePopup(p), this.applyState(p);
       };
       if (this.opened)
         if (i === u.pageUp)
-          e.preventDefault(), this.base.scrollPopupByPageSize(-1);
+          t.preventDefault(), this.base.scrollPopupByPageSize(-1);
         else if (i === u.pageDown)
-          e.preventDefault(), this.base.scrollPopupByPageSize(1);
-        else if ((e.ctrlKey || e.metaKey) && e.code === "KeyA") {
+          t.preventDefault(), this.base.scrollPopupByPageSize(1);
+        else if ((t.ctrlKey || t.metaKey) && t.code === "KeyA") {
           const b = (this.state.value && this.state.value.length) === a.length ? [] : a;
-          this.updateStateOnKeyboardNavigation(b, h);
-        } else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.keyCode === u.end) {
+          this.updateStateOnKeyboardNavigation(b, p);
+        } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === u.end) {
           const c = a.slice(this.getFocusedState().focusedIndex);
-          this.itemFocus(a.length - 1, h), this.updateStateOnKeyboardNavigation(c, h);
-        } else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.keyCode === u.home) {
+          this.itemFocus(a.length - 1, p), this.updateStateOnKeyboardNavigation(c, p);
+        } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === u.home) {
           const c = a.slice(0, this.getFocusedState().focusedIndex + 1);
-          this.itemFocus(0, h), this.updateStateOnKeyboardNavigation(c, h);
-        } else if (e.shiftKey && e.keyCode === u.up) {
+          this.itemFocus(0, p), this.updateStateOnKeyboardNavigation(c, p);
+        } else if (t.shiftKey && t.keyCode === u.up) {
           let c;
-          const b = this.getLastSelectedOrDeselectedIndex(1, l);
-          b === null ? c = l !== 0 ? a.slice(l - 1, l) : [a[l]] : b === l ? c = [a[b - 1]] : l >= 0 && (c = b > l ? a.slice(l - 1, b) : a.slice(b - 1, l)), c && c.length > 0 && (l >= 1 && this.itemFocus(l - 1, h), this.updateStateOnKeyboardNavigation(c, h));
-        } else if (e.shiftKey && e.keyCode === u.down) {
+          const b = this.getLastSelectedOrDeselectedIndex(1, n);
+          b === null ? c = n !== 0 ? a.slice(n - 1, n) : [a[n]] : b === n ? c = [a[b - 1]] : n >= 0 && (c = b > n ? a.slice(n - 1, b) : a.slice(b - 1, n)), c && c.length > 0 && (n >= 1 && this.itemFocus(n - 1, p), this.updateStateOnKeyboardNavigation(c, p));
+        } else if (t.shiftKey && t.keyCode === u.down) {
           let c;
-          const b = this.getLastSelectedOrDeselectedIndex(0, l);
-          b === null ? c = l !== a.length - 1 ? a.slice(l, l + 1) : [a[l]] : b === l ? c = a.slice(l, l + 2) : l >= 0 && (c = b > l ? a.slice(l + 1, b + 1) : a.slice(b, l + 2)), c && c.length >= 1 && (this.itemFocus(l + 1, h), this.updateStateOnKeyboardNavigation(c, h));
-        } else if (e.altKey && i === u.up)
+          const b = this.getLastSelectedOrDeselectedIndex(0, n);
+          b === null ? c = n !== a.length - 1 ? a.slice(n, n + 1) : [a[n]] : b === n ? c = a.slice(n, n + 2) : n >= 0 && (c = b > n ? a.slice(n + 1, b + 1) : a.slice(b, n + 2)), c && c.length >= 1 && (this.itemFocus(n + 1, p), this.updateStateOnKeyboardNavigation(c, p));
+        } else if (t.altKey && i === u.up)
           f();
         else if (i === u.up || i === u.down) {
-          const c = s ? s.skip : 0, b = l - c;
-          if (o !== "" && t)
+          const c = s ? s.skip : 0, b = n - c;
+          if (o !== "" && e)
             if (!this.props.skipDisabledItems && r)
-              this.onNavigate(h, i);
+              this.onNavigate(p, i);
             else {
               let m = 0;
               if (i === u.down || i === u.right) {
-                const y = a.slice(b + 1).find((I) => !I.disabled && I[t]);
-                m = y && a.findIndex((I) => I[t] === y[t]), m && m !== -1 && (m = m + c);
+                const y = a.slice(b + 1).find((I) => !I.disabled && I[e]);
+                m = y && a.findIndex((I) => I[e] === y[e]), m && m !== -1 && (m = m + c);
               } else if (i === u.up || i === u.left) {
                 let y;
-                if (l === -1)
-                  y = a, m = a.findIndex((I) => !I.disabled && I[t]), m !== -1 && (m = m + c);
+                if (n === -1)
+                  y = a, m = a.findIndex((I) => !I.disabled && I[e]), m !== -1 && (m = m + c);
                 else {
                   y = a.slice(0, b);
                   let I = y.pop();
                   for (; I && I.disabled; )
                     I = y.pop();
-                  m = I && a.findIndex((T) => T[t] === I[t]), m && m !== -1 && (m = m + c);
+                  m = I && a.findIndex((T) => T[e] === I[e]), m && m !== -1 && (m = m + c);
                 }
               }
               if (m) {
-                const y = m - l;
-                this.onNavigate(h, i, y);
+                const y = m - n;
+                this.onNavigate(p, i, y);
               } else
-                this.onNavigate(h, i);
+                this.onNavigate(p, i);
             }
           else if (!this.props.skipDisabledItems && r)
-            this.onNavigate(h, i);
+            this.onNavigate(p, i);
           else {
             let m = null;
             if (i === u.down || i === u.right)
@@ -137,18 +152,18 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
             if (m) {
               const y = a.indexOf(m);
               if (y !== -1) {
-                const I = c + y - l;
-                this.onNavigate(h, i, I);
+                const I = c + y - n;
+                this.onNavigate(p, i, I);
               } else
-                this.onNavigate(h, i);
+                this.onNavigate(p, i);
             } else
-              this.onNavigate(h, i);
+              this.onNavigate(p, i);
           }
-          this.applyState(h), e.preventDefault();
-        } else i === u.enter ? (e.preventDefault(), this.props.allowCustom && p && d === null ? this.customItemSelect(e) : d && d.disabled ? f() : this.selectFocusedItem(e)) : i === u.esc && f();
-      else e.altKey && i === u.down ? f() : i === u.esc && this.clearButtonClick(e);
+          this.applyState(p), t.preventDefault();
+        } else i === u.enter ? (t.preventDefault(), this.props.allowCustom && h && d === null ? this.customItemSelect(t) : d && d.disabled ? f() : this.selectFocusedItem(t)) : i === u.esc && f();
+      else t.altKey && i === u.down ? f() : i === u.esc && this.clearButtonClick(t);
     }, this.listContainerContent = () => {
-      const { header: e, footer: t, allowCustom: o, size: s, groupStickyHeaderItemRender: a, groupField: i, list: p } = this.props, r = x(this.props), d = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: l } = this.getFocusedState(), h = o && d && /* @__PURE__ */ g.createElement(
+      const { header: t, footer: e, allowCustom: o, size: s, groupStickyHeaderItemRender: a, groupField: i, list: h } = this.props, r = x(this.props), d = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: n } = this.getFocusedState(), p = o && d && /* @__PURE__ */ g.createElement(
         "div",
         {
           className: S("k-list", {
@@ -161,15 +176,15 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
         /* @__PURE__ */ g.createElement(
           "div",
           {
-            className: S("k-list-item k-custom-item", { "k-focus": $(l) }),
+            className: S("k-list-item k-custom-item", { "k-focus": $(n) }),
             style: { fontStyle: "italic" }
           },
           d,
-          /* @__PURE__ */ g.createElement(B, { name: "plus", icon: oe, style: { position: "absolute", right: "0.5em" } })
+          /* @__PURE__ */ g.createElement(B, { name: "plus", icon: at, style: { position: "absolute", right: "0.5em" } })
         )
       );
       let { group: f } = this.state;
-      return f === void 0 && i !== void 0 && (f = K(r[0], i)), /* @__PURE__ */ g.createElement(g.Fragment, null, e && /* @__PURE__ */ g.createElement("div", { className: "k-list-header" }, e), h, /* @__PURE__ */ g.createElement(
+      return f === void 0 && i !== void 0 && (f = _(r[0], i)), /* @__PURE__ */ g.createElement(g.Fragment, null, t && /* @__PURE__ */ g.createElement("div", { className: "k-list-header" }, t), p, /* @__PURE__ */ g.createElement(
         "div",
         {
           className: S("k-list", {
@@ -177,12 +192,12 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
             "k-virtual-list": this.base.vs.enabled
           })
         },
-        !p && f && r.length !== 0 && /* @__PURE__ */ g.createElement(de, { group: f, render: a }),
+        !h && f && r.length !== 0 && /* @__PURE__ */ g.createElement(rt, { group: f, render: a }),
         this.renderList()
-      ), this.showLicenseWatermark && /* @__PURE__ */ g.createElement(te, { message: this.licenseMessage }), t && /* @__PURE__ */ g.createElement("div", { className: "k-list-footer" }, t));
+      ), this.showLicenseWatermark && /* @__PURE__ */ g.createElement(et, { message: this.licenseMessage }), e && /* @__PURE__ */ g.createElement("div", { className: "k-list-footer" }, e));
     }, this.renderListContainer = () => {
-      const e = this.base, { dir: t } = this.props, o = x(this.props), s = this.base.getPopupSettings(), a = s.width !== void 0 ? s.width : e.popupWidth, i = {
-        dir: t !== void 0 ? t : e.dirCalculated,
+      const t = this.base, { dir: e } = this.props, o = x(this.props), s = this.base.getPopupSettings(), a = s.width !== void 0 ? s.width : t.popupWidth, i = {
+        dir: e !== void 0 ? e : t.dirCalculated,
         width: a,
         popupSettings: {
           ...s,
@@ -194,10 +209,10 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
         },
         itemsCount: [o.length, this.value.length]
       };
-      return /* @__PURE__ */ g.createElement(ne, { ...i }, this.listContainerContent());
+      return /* @__PURE__ */ g.createElement(lt, { ...i }, this.listContainerContent());
     }, this.renderAdaptiveListContainer = () => {
-      const { adaptiveTitle: e, adaptiveSubtitle: t, filterable: o, filter: s } = this.props, { windowWidth: a = 0 } = this.state, i = s !== void 0 ? s : this.state.text, p = o ? /* @__PURE__ */ g.createElement(
-        me,
+      const { adaptiveTitle: t, adaptiveSubtitle: e, filterable: o, filter: s } = this.props, { windowWidth: a = 0 } = this.state, i = s !== void 0 ? s : this.state.text, h = o ? /* @__PURE__ */ g.createElement(
+        bt,
         {
           value: i,
           ref: (d) => {
@@ -211,57 +226,57 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
           placeholder: this.props.placeholder
         }
       ) : null, r = {
-        title: e || this.props.label,
-        subTitle: t,
+        title: t || this.props.label,
+        subTitle: e,
         expand: this.opened,
         onClose: (d) => this.closePopup(d),
         windowWidth: a,
-        mobileFilter: p
+        mobileFilter: h
       };
-      return /* @__PURE__ */ g.createElement(fe, { ...r }, /* @__PURE__ */ g.createElement(ge, null, /* @__PURE__ */ g.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
-    }, this.closePopup = (e) => {
-      const t = this.base.initState();
-      t.syntheticEvent = e, e.stopPropagation(), this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.opened && this.base.togglePopup(t), t.events.push({ type: "onClose" });
+      return /* @__PURE__ */ g.createElement(mt, { ...r }, /* @__PURE__ */ g.createElement(vt, null, /* @__PURE__ */ g.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
+    }, this.closePopup = (t) => {
+      const e = this.base.initState();
+      e.syntheticEvent = t, t.stopPropagation(), this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.opened && this.base.togglePopup(e), e.events.push({ type: "onClose" });
       const o = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-      _(o) && o !== "" && this.base.filterChanged("", t), this.state.text && (t.data.text = ""), this.applyState(t);
-    }, this.onCancel = (e) => {
-      const t = this.base.initState();
-      t.syntheticEvent = e, e.stopPropagation(), this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.opened && this.base.togglePopup(t), t.events.push({ type: "onCancel" });
+      K(o) && o !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
+    }, this.onCancel = (t) => {
+      const e = this.base.initState();
+      e.syntheticEvent = t, t.stopPropagation(), this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.opened && this.base.togglePopup(e), e.events.push({ type: "onCancel" });
       const o = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-      _(o) && o !== "" && this.base.filterChanged("", t), this.state.text && (t.data.text = ""), this.applyState(t);
+      K(o) && o !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
     }, this.renderList = () => {
       const {
-        textField: e,
-        listNoDataRender: t,
+        textField: t,
+        listNoDataRender: e,
         itemRender: o,
         groupHeaderItemRender: s,
         dataItemKey: a,
         virtual: i = { skip: 0, total: void 0 }
-      } = this.props, p = x(this.props), r = this.base.vs, { focusedIndex: d } = this.getFocusedState(), l = this.base.getPopupSettings(), h = `translateY(${r.translate}px)`;
+      } = this.props, h = x(this.props), r = this.base.vs, { focusedIndex: d } = this.getFocusedState(), n = this.base.getPopupSettings(), p = `translateY(${r.translate}px)`;
       return /* @__PURE__ */ g.createElement(
-        le,
+        dt,
         {
           id: this.base.listBoxId,
           show: this.opened,
-          data: p.slice(),
+          data: h.slice(),
           focusedIndex: d - i.skip,
           value: this.value,
-          textField: e,
+          textField: t,
           valueField: a,
           optionsGuid: this.base.guid,
           groupField: this.props.groupField,
           listRef: (f) => {
             r.list = this.base.list = f;
           },
-          wrapperStyle: this.mobileMode ? {} : { maxHeight: l.height },
+          wrapperStyle: this.mobileMode ? {} : { maxHeight: n.height },
           wrapperCssClass: "k-list-content",
-          listStyle: r.enabled ? { transform: h } : void 0,
+          listStyle: r.enabled ? { transform: p } : void 0,
           key: "listKey",
           skip: i.skip,
           onClick: this.handleItemClick,
           itemRender: o,
           groupHeaderItemRender: s,
-          noDataRender: t,
+          noDataRender: e,
           onMouseDown: W,
           onBlur: this.handleBlur,
           onScroll: this.onScroll,
@@ -270,46 +285,46 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
           ariaSetSize: i.total
         }
       );
-    }, this.onScroll = (e) => {
-      const { vs: t, list: o } = this.base;
-      t.scrollHandler(e);
+    }, this.onScroll = (t) => {
+      const { vs: e, list: o } = this.base;
+      e.scrollHandler(t);
       const { groupField: s } = this.props;
       let a = x(this.props);
       if (!(!s || !a.length) && s) {
-        const i = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : o ? o.children[0].offsetHeight : 0), r = e.target.scrollTop - t.skip * i;
+        const i = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : o ? o.children[0].offsetHeight : 0), r = t.target.scrollTop - e.skip * i;
         a = this.base.getGroupedDataModernMode(a, s);
         let d = a[0][s];
-        for (let l = 1; l < a.length && !(i * l > r); l++)
-          a[l] && a[l][s] && (d = a[l][s]);
+        for (let n = 1; n < a.length && !(i * n > r); n++)
+          a[n] && a[n][s] && (d = a[n][s]);
         d !== this.state.group && this.setState({
           group: d
         });
       }
-    }, this.customItemSelect = (e) => {
-      const t = this.props.filter !== void 0 ? this.props.filter : this.state.text, { textField: o } = this.props;
-      if (!t)
+    }, this.customItemSelect = (t) => {
+      const e = this.props.filter !== void 0 ? this.props.filter : this.state.text, { textField: o } = this.props;
+      if (!e)
         return;
       const s = this.base.initState();
-      s.syntheticEvent = e;
-      const a = o ? { [o]: t } : t;
+      s.syntheticEvent = t;
+      const a = o ? { [o]: e } : e;
       this.state.text !== void 0 && (s.data.text = ""), s.data.focusedIndex = void 0, this.base.filterChanged("", s);
       const i = [...this.value, a];
       this.triggerOnChange(i, s), this.base.togglePopup(s), this.applyState(s);
-    }, this.handleWrapperClick = (e) => {
-      const t = this._input;
-      !this.opened && t && this.focusElement(t);
+    }, this.handleWrapperClick = (t) => {
+      const e = this._input;
+      !this.opened && e && this.focusElement(e);
       const o = this.base.initState();
-      o.syntheticEvent = e, !this.state.focused && !this.mobileMode && (o.events.push({ type: "onFocus" }), o.data.focused = !0), this.mobileMode && (this.setState({ currentValue: this.tagsToRender }), this.mobileMode && window.setTimeout(() => this._adaptiveInput && this._adaptiveInput.focus(), 300)), this.base.togglePopup(o), this.applyState(o);
-    }, this.handleItemClick = (e, t) => {
+      o.syntheticEvent = t, !this.state.focused && !this.mobileMode && (o.events.push({ type: "onFocus" }), o.data.focused = !0), this.mobileMode && (this.setState({ currentValue: this.tagsToRender }), this.mobileMode && window.setTimeout(() => this._adaptiveInput && this._adaptiveInput.focus(), 300)), this.base.togglePopup(o), this.applyState(o);
+    }, this.handleItemClick = (t, e) => {
       const o = this.base.initState();
-      o.syntheticEvent = t, this.handleItemSelect(e, o), this.props.autoClose && this.base.togglePopup(o), t.stopPropagation(), this.applyState(o);
-    }, this.handleBlur = (e) => {
+      o.syntheticEvent = e, this.handleItemSelect(t, o), this.props.autoClose && this.base.togglePopup(o), e.stopPropagation(), this.applyState(o);
+    }, this.handleBlur = (t) => {
       if (!this.state.focused || this._skipFocusEvent)
         return;
-      const t = this.base.initState(), { allowCustom: o, filterable: s } = this.props;
-      t.syntheticEvent = e, t.data.focused = !1, t.events.push({ type: "onBlur" }), this.opened && !this.mobileMode && (this.state.opened && (t.data.opened = !1), t.events.push({ type: "onClose" })), !o && !s && this.state.text && (t.data.text = ""), this.applyState(t);
-    }, this.handleFocus = (e) => {
-      this._skipFocusEvent || this.base.handleFocus(e);
+      const e = this.base.initState(), { allowCustom: o, filterable: s } = this.props;
+      e.syntheticEvent = t, e.data.focused = !1, e.events.push({ type: "onBlur" }), this.opened && !this.mobileMode && (this.state.opened && (e.data.opened = !1), e.events.push({ type: "onClose" })), !o && !s && this.state.text && (e.data.text = ""), this.applyState(e);
+    }, this.handleFocus = (t) => {
+      this._skipFocusEvent || this.base.handleFocus(t);
     }, this.onPopupOpened = () => {
       this._input && this.state.focused && !this.mobileMode && this.focusElement(this._input);
     }, this.onPopupClosed = () => {
@@ -318,9 +333,9 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
       }, 0);
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || be
+        this.validity.valid ? "" : this.props.validationMessage || yt
       );
-    }, this.validate(n), this.licenseMessage = se(A);
+    }, this.validate(l), this.licenseMessage = st(A);
   }
   get _inputId() {
     return this.props.id;
@@ -329,12 +344,12 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
     if (V)
       return this.element && this.element.ownerDocument || document;
   }
-  validate(n) {
-    if (n.filterable || n.virtual) {
-      const e = [];
-      n.filterable && e.push("filterable"), n.virtual && e.push("virtualization"), this.showLicenseWatermark = !ie(A, {
+  validate(l) {
+    if (l.filterable || l.virtual) {
+      const t = [];
+      l.filterable && t.push("filterable"), l.virtual && t.push("virtualization"), this.showLicenseWatermark = !it(A, {
         component: "MultiSelect",
-        features: e
+        features: t
       });
     }
   }
@@ -348,24 +363,24 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
   }
   /** @hidden */
   get tagsToRender() {
-    const { tags: n, textField: e } = this.props, t = [];
-    return n === void 0 ? this.value.forEach((o) => {
-      t.push({ text: K(o, e), data: [o] });
-    }) : t.push(...n), t;
+    const { tags: l, textField: t } = this.props, e = [];
+    return l === void 0 ? this.value.forEach((o) => {
+      e.push({ text: _(o, t), data: [o] });
+    }) : e.push(...l), e;
   }
   /**
    * The mobile mode of the MultiSelect.
    */
   get mobileMode() {
-    var e;
-    return !!(this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth <= ((e = this.props._adaptiveMode) == null ? void 0 : e.medium) && this.props.adaptive);
+    var t;
+    return !!(this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth <= ((t = this.props._adaptiveMode) == null ? void 0 : t.medium) && this.props.adaptive);
   }
   /**
    * Represents the value of the MultiSelect.
    */
   get value() {
-    const n = [];
-    return this._valueItemsDuringOnChange ? n.push(...this._valueItemsDuringOnChange) : this.props.value ? n.push(...this.props.value) : this.state.value ? n.push(...this.state.value) : this.props.defaultValue && n.push(...this.props.defaultValue), n;
+    const l = [];
+    return this._valueItemsDuringOnChange ? l.push(...this._valueItemsDuringOnChange) : this.props.value ? l.push(...this.props.value) : this.state.value ? l.push(...this.state.value) : this.props.defaultValue && l.push(...this.props.defaultValue), l;
   }
   /**
    * Gets the `name` property of the MultiSelect.
@@ -377,10 +392,10 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
    * Represents the validity state into which the MultiSelect is set.
    */
   get validity() {
-    const n = this.props.validationMessage !== void 0, e = !this.required || this.value !== null && this.value.length > 0 && this.value !== void 0, t = this.props.valid !== void 0 ? this.props.valid : e;
+    const l = this.props.validationMessage !== void 0, t = !this.required || this.value !== null && this.value.length > 0 && this.value !== void 0, e = this.props.valid !== void 0 ? this.props.valid : t;
     return {
-      customError: n,
-      valid: t,
+      customError: l,
+      valid: e,
       valueMissing: this.value === null
     };
   }
@@ -392,86 +407,93 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
     return this.props.validityStyles !== void 0 ? this.props.validityStyles : C.defaultProps.validityStyles;
   }
   /** @hidden */
-  componentDidUpdate(n, e) {
-    var h;
-    const { virtual: t, groupField: o = "" } = this.props, s = x(this.props), a = t ? t.skip : 0, i = n.virtual ? n.virtual.total : 0, p = n.opened !== void 0 ? n.opened : e.opened, r = !p && this.opened, d = p && !this.opened, l = this.base.getPopupSettings();
-    if (this.validate(this.props), this.base.didUpdate(), !l.animate && d && this.onPopupClosed(), t && t.total !== i)
+  componentDidUpdate(l, t) {
+    var p;
+    const { virtual: e, groupField: o = "" } = this.props, s = x(this.props), a = e ? e.skip : 0, i = l.virtual ? l.virtual.total : 0, h = l.opened !== void 0 ? l.opened : t.opened, r = !h && this.opened, d = h && !this.opened, n = this.base.getPopupSettings();
+    if (this.validate(this.props), this.base.didUpdate(), !n.animate && d && this.onPopupClosed(), e && e.total !== i)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
       let { focusedItem: f, focusedIndex: c } = this.getFocusedState();
-      o !== "" && (c = (h = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : h.indexOf(f)), r && t ? this.base.scrollToVirtualItem(t, c - a) : r && !t ? (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][o], this), this.base.scrollToItem(c)) : this.opened && p && f && this.scrollToFocused && this.base.scrollToItem(c - a);
+      o !== "" && (c = (p = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : p.indexOf(f)), r && e ? this.base.scrollToVirtualItem(e, c - a) : r && !e ? (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][o], this), this.base.scrollToItem(c)) : this.opened && h && f && this.scrollToFocused && this.base.scrollToItem(c - a);
     }
     this.scrollToFocused = !1, this.setValidity();
   }
   /** @hidden */
   componentDidMount() {
-    var n;
-    this.observerResize = V && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (n = this.document) != null && n.body && this.observerResize && this.observerResize.observe(this.document.body);
+    var t;
+    this.observerResize = V && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (t = this.document) != null && t.body && this.observerResize && this.observerResize.observe(this.document.body);
+    const l = this.props.name || this.props.id;
+    this.KendoPasteSubscription = ot(this._element, {
+      fieldName: l,
+      onValueChange: (e) => {
+        this.handleKendoPasteValue(e);
+      }
+    });
   }
   /** @hidden */
   componentWillUnmount() {
-    var n;
-    (n = this.document) != null && n.body && this.observerResize && this.observerResize.disconnect();
+    var l, t;
+    (l = this.document) != null && l.body && this.observerResize && this.observerResize.disconnect(), (t = this.KendoPasteSubscription) == null || t.unsubscribe();
   }
   /** @hidden */
-  onNavigate(n, e, t) {
-    const { allowCustom: o } = this.props, s = x(this.props), a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: i, focusedIndex: p } = this.getFocusedState(), r = o && a, d = $(i), l = this.base, h = l.vs;
-    if (this.opened && e === u.up && d)
-      this.state.focusedIndex !== void 0 && (n.data.focusedIndex = void 0);
+  onNavigate(l, t, e) {
+    const { allowCustom: o } = this.props, s = x(this.props), a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: i, focusedIndex: h } = this.getFocusedState(), r = o && a, d = $(i), n = this.base, p = n.vs;
+    if (this.opened && t === u.up && d)
+      this.state.focusedIndex !== void 0 && (l.data.focusedIndex = void 0);
     else {
-      const f = l.navigation.navigate({
-        keyCode: e,
-        current: p,
-        max: (h.enabled ? h.total : s.length) - 1,
+      const f = n.navigation.navigate({
+        keyCode: t,
+        current: h,
+        max: (p.enabled ? p.total : s.length) - 1,
         min: r ? -1 : 0,
-        skipItems: t || void 0
+        skipItems: e || void 0
       });
-      f !== void 0 && (this.itemFocus(f, n), this.scrollToFocused = !0);
+      f !== void 0 && (this.itemFocus(f, l), this.scrollToFocused = !0);
     }
-    this.applyState(n);
+    this.applyState(l);
   }
   /** @hidden */
   render() {
     const {
-      style: n,
-      className: e,
-      label: t,
+      style: l,
+      className: t,
+      label: e,
       dir: o,
       disabled: s,
       textField: a,
       dataItemKey: i,
-      virtual: p,
+      virtual: h,
       size: r,
       rounded: d,
-      fillMode: l,
-      loading: h,
+      fillMode: n,
+      loading: p,
       filter: f
     } = this.props, { text: c, focused: b, focusedTag: m, currentValue: y } = this.state, I = this.base.vs, T = this.props.id || this._inputId;
-    I.enabled = p !== void 0, p !== void 0 && (I.skip = p.skip, I.total = p.total, I.pageSize = p.pageSize);
+    I.enabled = h !== void 0, h !== void 0 && (I.skip = h.skip, I.total = h.total, I.pageSize = h.pageSize);
     const k = this.mobileMode && this.opened ? y : this.tagsToRender;
     this.setItems(this.tagsToRender, this._tags);
     const R = !this.validityStyles || this.validity.valid, q = !!(f !== void 0 ? f : c) || k && k.length > 0, [G, U] = H(this.props.prefix || g.Fragment), [j, Y] = H(this.props.suffix || g.Fragment), L = /* @__PURE__ */ g.createElement(g.Fragment, null, /* @__PURE__ */ g.createElement(
       "div",
       {
         ref: this.componentRef,
-        className: S("k-multiselect k-input", e, {
+        className: S("k-multiselect k-input", t, {
           [`k-input-${M[r] || r}`]: r,
-          [`k-rounded-${ve[d] || d}`]: d,
-          [`k-input-${l}`]: l,
+          [`k-rounded-${It[d] || d}`]: d,
+          [`k-input-${n}`]: n,
           "k-focus": b && !s,
           "k-invalid": !R,
           "k-disabled": s,
-          "k-loading": h,
+          "k-loading": p,
           "k-required": this.required
         }),
-        style: t ? { ...n, width: void 0 } : n,
+        style: e ? { ...l, width: void 0 } : l,
         dir: o,
         onFocus: (F) => {
           this.mobileMode ? this.handleWrapperClick(F) : this.handleFocus(F);
         },
         onBlur: this.handleBlur,
         onClick: this.handleWrapperClick,
-        onMouseDown: pe
+        onMouseDown: ut
       },
       this.props.prefix && /* @__PURE__ */ g.createElement(G, { ...U }),
       /* @__PURE__ */ g.createElement("div", { className: S("k-input-values") }, /* @__PURE__ */ g.createElement(
@@ -482,7 +504,7 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
           id: "tagslist-" + this.base.guid
         },
         k && k.length > 0 && /* @__PURE__ */ g.createElement(
-          re,
+          ht,
           {
             tagRender: this.props.tagRender,
             onTagDelete: this.onTagDelete,
@@ -493,36 +515,36 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
           }
         )
       ), this.renderSearchBar(T)),
-      h && /* @__PURE__ */ g.createElement(B, { className: "k-input-loading-icon", name: "loading" }),
+      p && /* @__PURE__ */ g.createElement(B, { className: "k-input-loading-icon", name: "loading" }),
       this.props.suffix && /* @__PURE__ */ g.createElement(j, { ...Y }),
-      q && /* @__PURE__ */ g.createElement(ue, { onClick: this.clearButtonClick }),
+      q && /* @__PURE__ */ g.createElement(gt, { onClick: this.clearButtonClick }),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
-    return t ? /* @__PURE__ */ g.createElement(
-      ae,
+    return e ? /* @__PURE__ */ g.createElement(
+      nt,
       {
-        label: t,
+        label: e,
         editorId: T,
-        editorValue: c || K(this.value[0], a),
+        editorValue: c || _(this.value[0], a),
         editorValid: R,
         editorDisabled: s,
-        style: { width: n ? n.width : void 0 },
+        style: { width: l ? l.width : void 0 },
         children: L
       }
     ) : L;
   }
-  renderSearchBar(n) {
-    const { activedescendant: e, focusedTag: t, currentValue: o } = this.state, { disabled: s, placeholder: a, ariaDescribedBy: i, ariaLabelledBy: p, ariaLabel: r, inputAttributes: d } = this.props, l = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: h } = this.getFocusedState(), f = this.value.length === 0 && !l ? a : void 0, c = o && o.length > 0 ? void 0 : a, b = e === w.TagsList && t !== void 0 ? `tag-${this.base.guid}-${t.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${h}`, m = {
+  renderSearchBar(l) {
+    const { activedescendant: t, focusedTag: e, currentValue: o } = this.state, { disabled: s, placeholder: a, ariaDescribedBy: i, ariaLabelledBy: h, ariaLabel: r, inputAttributes: d } = this.props, n = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: p } = this.getFocusedState(), f = this.value.length === 0 && !n ? a : void 0, c = o && o.length > 0 ? void 0 : a, b = t === w.TagsList && e !== void 0 ? `tag-${this.base.guid}-${e.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${p}`, m = {
       accessKey: this.props.accessKey,
       tabIndex: this.props.tabIndex
     };
     return /* @__PURE__ */ g.createElement(
-      he,
+      pt,
       {
-        id: n,
-        size: Math.max((f || "").length, l.length, 1),
+        id: l,
+        size: Math.max((f || "").length, n.length, 1),
         placeholder: this.mobileMode && this.opened ? c : f,
-        value: l,
+        value: n,
         onChange: this.onChangeHandler,
         onKeyDown: this.onInputKeyDown,
         ref: this.searchbarRef,
@@ -532,7 +554,7 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
         role: "combobox",
         activedescendant: b,
         ariaDescribedBy: `tagslist-${this.base.guid}${i ? " " + i : ""}`,
-        ariaLabelledBy: p,
+        ariaLabelledBy: h,
         ariaRequired: this.required,
         ariaLabel: r,
         inputAttributes: d,
@@ -540,85 +562,85 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
       }
     );
   }
-  onTagsNavigate(n, e) {
-    const t = n.keyCode, { focusedTag: o } = this.state, s = this._tags, a = this.props.dataItemKey;
-    let i = o ? s.findIndex((d) => z(d, o, a)) : -1, p;
+  onTagsNavigate(l, t) {
+    const e = l.keyCode, { focusedTag: o } = this.state, s = this._tags, a = this.props.dataItemKey;
+    let i = o ? s.findIndex((d) => z(d, o, a)) : -1, h;
     const r = i !== -1;
-    if (t === u.left)
-      r ? i = Math.max(0, i - 1) : i = s.length - 1, p = s[i];
-    else if (t === u.right)
-      i === s.length - 1 ? p = void 0 : r && (i = Math.min(s.length - 1, i + 1), p = s[i]);
-    else if (t === u.home && !n.shiftKey)
-      p = s[0];
-    else if (t === u.end && !n.shiftKey)
-      p = s[s.length - 1];
-    else if (t === u.delete) {
+    if (e === u.left)
+      r ? i = Math.max(0, i - 1) : i = s.length - 1, h = s[i];
+    else if (e === u.right)
+      i === s.length - 1 ? h = void 0 : r && (i = Math.min(s.length - 1, i + 1), h = s[i]);
+    else if (e === u.home && !l.shiftKey)
+      h = s[0];
+    else if (e === u.end && !l.shiftKey)
+      h = s[s.length - 1];
+    else if (e === u.delete) {
       if (r) {
         const d = this.value;
-        D(d, s[i].data, a), this.triggerOnChange(d, e);
+        P(d, s[i].data, a), this.triggerOnChange(d, t);
       }
-    } else if (t === u.backspace) {
+    } else if (e === u.backspace) {
       const d = this.value;
       if (r)
-        D(d, s[i].data, a), this.triggerOnChange(d, e);
+        P(d, s[i].data, a), this.triggerOnChange(d, t);
       else if (!r && s.length) {
-        const l = s.pop();
-        D(d, l.data, a), this.triggerOnChange(d, e);
+        const n = s.pop();
+        P(d, n.data, a), this.triggerOnChange(d, t);
       }
     }
-    p !== o && (e.data.focusedTag = p, e.data.activedescendant = w.TagsList), this.applyState(e);
+    h !== o && (t.data.focusedTag = h, t.data.activedescendant = w.TagsList), this.applyState(t);
   }
-  triggerOnChange(n, e) {
-    this.props.value === void 0 && (e.data.value = [...n]), this._valueItemsDuringOnChange = [], this.setItems(n, this._valueItemsDuringOnChange), e.events.push({ type: "onChange" });
+  triggerOnChange(l, t) {
+    this.props.value === void 0 && (t.data.value = [...l]), this._valueItemsDuringOnChange = [], this.setItems(l, this._valueItemsDuringOnChange), t.events.push({ type: "onChange" });
   }
-  selectFocusedItem(n, e) {
-    const { virtual: t } = this.props, o = x(this.props), { focusedIndex: s } = e || this.getFocusedState(), a = t ? t.skip : 0;
-    o[s - a] !== void 0 && this.handleItemClick(s, n);
+  selectFocusedItem(l, t) {
+    const { virtual: e } = this.props, o = x(this.props), { focusedIndex: s } = t || this.getFocusedState(), a = e ? e.skip : 0;
+    o[s - a] !== void 0 && this.handleItemClick(s, l);
   }
-  setItems(n, e) {
-    e.length = 0, e.push(...n);
+  setItems(l, t) {
+    t.length = 0, t.push(...l);
   }
   getFocusedState() {
-    const { focusedIndex: n } = this.state, e = this.props.filter !== void 0 ? this.props.filter : this.state.text, {
-      allowCustom: t,
+    const { focusedIndex: l } = this.state, t = this.props.filter !== void 0 ? this.props.filter : this.state.text, {
+      allowCustom: e,
       dataItemKey: o,
       virtual: s,
       textField: a,
-      focusedItemIndex: i = ce,
-      skipDisabledItems: p
+      focusedItemIndex: i = ft,
+      skipDisabledItems: h
     } = this.props, r = x(this.props), d = s && s.skip || 0;
-    let l;
-    if (n !== void 0)
+    let n;
+    if (l !== void 0)
       return {
-        focusedIndex: n,
-        focusedItem: r[n - d],
+        focusedIndex: l,
+        focusedItem: r[l - d],
         focusedType: 1
         /* ListItem */
       };
-    const h = this.value;
-    if (t && e)
+    const p = this.value;
+    if (e && t)
       return {
         focusedItem: null,
         focusedIndex: -1,
         focusedType: 2
         /* CustomItem */
       };
-    if (e)
-      return l = i(r, e, a), {
-        focusedItem: r[l],
-        focusedIndex: l + d,
+    if (t)
+      return n = i(r, t, a), {
+        focusedItem: r[n],
+        focusedIndex: n + d,
         focusedType: 1
         /* ListItem */
       };
-    if (h.length) {
-      const f = h[h.length - 1];
-      return l = r.findIndex((c) => P(c, f, o)), r[l] !== void 0 ? {
-        focusedIndex: l + d,
-        focusedItem: r[l],
+    if (p.length) {
+      const f = p[p.length - 1];
+      return n = r.findIndex((c) => D(c, f, o)), r[n] !== void 0 ? {
+        focusedIndex: n + d,
+        focusedItem: r[n],
         focusedType: 1
         /* ListItem */
       } : { focusedType: 0, focusedIndex: -1 };
-    } else if (p && a && !e && d === 0) {
+    } else if (h && a && !t && d === 0) {
       const f = r.findIndex((c) => !c.disabled && c[a]);
       return {
         focusedIndex: f,
@@ -634,15 +656,15 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
       /* ListItem */
     } : { focusedType: 0, focusedIndex: -1 };
   }
-  focusElement(n) {
-    this._skipFocusEvent = !0, n.focus(), window.setTimeout(() => this._skipFocusEvent = !1, 0);
+  focusElement(l) {
+    this._skipFocusEvent = !0, l.focus(), window.setTimeout(() => this._skipFocusEvent = !1, 0);
   }
-  applyState(n) {
-    this.base.applyState(n), this._valueItemsDuringOnChange = null;
+  applyState(l) {
+    this.base.applyState(l), this._valueItemsDuringOnChange = null;
   }
-  calculateMedia(n) {
-    for (const e of n)
-      this.setState({ windowWidth: e.target.clientWidth });
+  calculateMedia(l) {
+    for (const t of l)
+      this.setState({ windowWidth: t.target.clientWidth });
   }
   /**
    * Updates the state of the MultiSelect when the complex keyboard navigation that
@@ -651,16 +673,16 @@ const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W
    * @param {Array<string | Object>} dataToSet Defines the array of new values that will be applied to the MultiSelect
    * @param {MultiSelectInternalState} state The current state of the MultiSelect
    */
-  updateStateOnKeyboardNavigation(n, e) {
-    this.setState({ value: n }), this.triggerOnChange(n, e), this.applyState(e);
+  updateStateOnKeyboardNavigation(l, t) {
+    this.setState({ value: l }), this.triggerOnChange(l, t), this.applyState(t);
   }
   /**
    * Returns the last element that was selected or deselected. Needed for the keyboard navigation specifications
    *
    * @param {number} correction A correction is needed depending on if UP or DOWN key is pressed
    */
-  getLastSelectedOrDeselectedIndex(n, e) {
-    return this._lastSelectedOrDeslectedItemIndex === null && (this._lastSelectedOrDeslectedItemIndex = e), this._lastSelectedOrDeslectedItemIndex !== null ? this._lastSelectedOrDeslectedItemIndex + n : null;
+  getLastSelectedOrDeselectedIndex(l, t) {
+    return this._lastSelectedOrDeslectedItemIndex === null && (this._lastSelectedOrDeslectedItemIndex = t), this._lastSelectedOrDeslectedItemIndex !== null ? this._lastSelectedOrDeslectedItemIndex + l : null;
   }
 };
 C.displayName = "MultiSelect", C.propTypes = {
@@ -700,15 +722,15 @@ C.displayName = "MultiSelect", C.propTypes = {
   suffix: void 0
 };
 let N = C;
-const Ie = Q(), ye = J(
+const xt = Q(), St = J(
   X(
-    Ie,
+    xt,
     Z(N)
   )
 );
-ye.displayName = "KendoReactMultiSelect";
+St.displayName = "KendoReactMultiSelect";
 export {
-  ye as MultiSelect,
-  Ie as MultiSelectPropsContext,
+  St as MultiSelect,
+  xt as MultiSelectPropsContext,
   N as MultiSelectWithoutContext
 };