@progress/kendo-react-dropdowns 8.2.0-develop.9 → 8.2.1-develop.1

package/MultiSelect/MultiSelect.mjs

@@ -8,315 +8,314 @@
 "use client";
 import * as f from "react";
 import m from "prop-types";
-import { Keys as u, classNames as I, IconWrap as N, validatePackage as Q, canUseDOM as R, createPropsContext as X, withIdHOC as Z, withPropsContext as ee, kendoThemeMaps as te } from "@progress/kendo-react-common";
-import { plusIcon as se } from "@progress/kendo-svg-icons";
-import { FloatingLabel as ie } from "@progress/kendo-react-labels";
-import oe from "../common/ListContainer.mjs";
-import ae from "../common/List.mjs";
-import ne from "../common/GroupStickyHeader.mjs";
-import le from "./TagList.mjs";
-import de from "../common/SearchBar.mjs";
-import D from "../common/DropDownBase.mjs";
-import { ActiveDescendant as C } from "../common/settings.mjs";
-import { areSame as F, removeDataItems as k, isPresent as E, getItemValue as M, preventDefaultNonInputs as re, matchTags as L, itemIndexStartsWith as he } from "../common/utils.mjs";
-import { packageMetadata as pe } from "../package-metadata.mjs";
-import ce from "../common/ClearButton.mjs";
-import { AdaptiveMode as ue } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as fe } from "@progress/kendo-react-layout";
-import { MOBILE_MEDIUM_DEVISE as ge } from "../common/constants.mjs";
-import { provideLocalizationService as me } from "@progress/kendo-react-intl";
-import { adaptiveModeFooterCancel as B, messages as z, adaptiveModeFooterApply as V } from "../messages/index.mjs";
-import ve from "../common/ListFilter.mjs";
-import H from "../common/withCustomComponent.mjs";
-const { sizeMap: w, roundedMap: Ie } = te, ye = "Please enter a valid value!", A = (T) => T.preventDefault(), $ = (T) => T === 2, y = class y extends f.Component {
+import { Keys as u, classNames as y, IconWrap as R, validatePackage as X, canUseDOM as L, createPropsContext as Z, withIdHOC as tt, withPropsContext as et, kendoThemeMaps as st } from "@progress/kendo-react-common";
+import { plusIcon as it } from "@progress/kendo-svg-icons";
+import { FloatingLabel as ot } from "@progress/kendo-react-labels";
+import at from "../common/ListContainer.mjs";
+import nt from "../common/List.mjs";
+import lt from "../common/GroupStickyHeader.mjs";
+import dt from "./TagList.mjs";
+import rt from "../common/SearchBar.mjs";
+import F from "../common/DropDownBase.mjs";
+import { ActiveDescendant as k } from "../common/settings.mjs";
+import { getFilteredData as I, areSame as E, removeDataItems as w, isPresent as M, getItemValue as O, preventDefaultNonInputs as ht, matchTags as B, itemIndexStartsWith as pt } from "../common/utils.mjs";
+import { packageMetadata as ct } from "../package-metadata.mjs";
+import ut from "../common/ClearButton.mjs";
+import { AdaptiveMode as ft } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as gt } from "@progress/kendo-react-layout";
+import { MOBILE_MEDIUM_DEVISE as mt } from "../common/constants.mjs";
+import { provideLocalizationService as vt } from "@progress/kendo-react-intl";
+import { adaptiveModeFooterCancel as z, messages as V, adaptiveModeFooterApply as H } from "../messages/index.mjs";
+import It from "../common/ListFilter.mjs";
+import A from "../common/withCustomComponent.mjs";
+const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $ = (T) => T.preventDefault(), q = (T) => T === 2, b = class b extends f.Component {
   constructor(n) {
     super(n), this.state = {
-      activedescendant: C.PopupList,
+      activedescendant: k.PopupList,
       currentValue: []
-    }, this._element = null, this._valueItemsDuringOnChange = null, this.base = new D(this), this._tags = [], this._input = null, this._adaptiveInput = null, this._skipFocusEvent = !1, this._lastSelectedOrDeslectedItemIndex = null, this.itemHeight = 0, this.scrollToFocused = !1, this.localization = null, this.focus = () => {
+    }, this._element = null, this._valueItemsDuringOnChange = null, this.base = new F(this), this._tags = [], this._input = null, this._adaptiveInput = null, this._skipFocusEvent = !1, this._lastSelectedOrDeslectedItemIndex = null, this.itemHeight = 0, this.scrollToFocused = !1, this.localization = null, this.focus = () => {
       this._input && this._input.focus();
-    }, this.handleItemSelect = (t, e) => {
-      const { data: s = [], dataItemKey: o, virtual: a } = this.props, p = a ? a.skip : 0, r = s[t - p], h = this.value.findIndex((g) => F(g, r, o));
-      this._lastSelectedOrDeslectedItemIndex = s.findIndex((g) => F(g, r, o));
+    }, this.handleItemSelect = (e, t) => {
+      const { dataItemKey: o, virtual: s } = this.props, a = I(this.props), h = s ? s.skip : 0, c = a[e - h], d = this.value.findIndex((g) => E(g, c, o));
+      this._lastSelectedOrDeslectedItemIndex = a.findIndex((g) => E(g, c, o));
       let i = [];
-      h !== -1 ? (i = this.value, i.splice(h, 1)) : i = [...this.value, r], (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(i, e), this.base.triggerPageChangeCornerItems(r, e);
-    }, this.onTagDelete = (t, e) => {
-      const s = this.base.initState();
-      s.syntheticEvent = e, this.opened && this.base.togglePopup(s), !this.state.focused && !this.mobileMode && (s.data.focused = !0, this.focus());
-      const o = this.value;
-      k(o, t, this.props.dataItemKey), this.triggerOnChange(o, s), this.applyState(s);
-    }, this.itemFocus = (t, e) => {
-      const { data: s = [], allowCustom: o, virtual: a } = this.props, p = a ? a.skip : 0, r = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: h } = this.getFocusedState(), i = o && r, l = s[t - p];
-      l && h !== t ? this.state.focusedIndex !== t && (e.data.focusedIndex = t, e.data.activedescendant = C.PopupList) : i && t === -1 && this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.base.triggerPageChangeCornerItems(l, 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(), s = t.target.value;
-      e.syntheticEvent = t, this.props.filter === void 0 && (e.data.text = s), e.data.focusedIndex = void 0, this.opened || (this.base.togglePopup(e), this.setState({ currentValue: this.value })), this.base.filterChanged(s, 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 s = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-      E(s) && s !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this._lastSelectedOrDeslectedItemIndex = null, this.applyState(e);
-    }, this.onInputKeyDown = (t) => {
-      const { data: e = [], textField: s, groupField: o } = this.props, a = t.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: h, focusedIndex: i } = this.getFocusedState(), l = this.base.initState();
-      if (l.syntheticEvent = t, !p && this.value.length > 0 && (a === u.left || a === u.right || a === u.home || a === u.end || a === u.delete || a === u.backspace) && !t.shiftKey)
-        return this.onTagsNavigate(t, l);
+      d !== -1 ? (i = this.value, i.splice(d, 1)) : i = [...this.value, c], (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(i, t), this.base.triggerPageChangeCornerItems(c, t);
+    }, this.onTagDelete = (e, t) => {
+      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());
+      const s = this.value;
+      w(s, e, this.props.dataItemKey), this.triggerOnChange(s, o), this.applyState(o);
+    }, this.itemFocus = (e, t) => {
+      const { allowCustom: o, virtual: s } = this.props, a = I(this.props), h = s ? s.skip : 0, c = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: d } = this.getFocusedState(), i = o && c, l = a[e - h];
+      l && d !== e ? this.state.focusedIndex !== e && (t.data.focusedIndex = e, t.data.activedescendant = k.PopupList) : i && e === -1 && this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.base.triggerPageChangeCornerItems(l, 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.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);
+      const o = this.props.filter !== void 0 ? this.props.filter : this.state.text;
+      M(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 } = this.props, s = I(this.props), a = e.keyCode, h = this.props.filter !== void 0 ? this.props.filter : this.state.text, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: d, focusedIndex: i } = this.getFocusedState(), l = this.base.initState();
+      if (l.syntheticEvent = e, !h && this.value.length > 0 && (a === u.left || a === u.right || a === u.home || a === u.end || a === u.delete || a === u.backspace) && !e.shiftKey)
+        return this.onTagsNavigate(e, l);
       const g = () => {
-        t.preventDefault(), this.base.togglePopup(l), this.applyState(l);
+        e.preventDefault(), this.base.togglePopup(l), this.applyState(l);
       };
       if (this.opened)
         if (a === u.pageUp)
-          t.preventDefault(), this.base.scrollPopupByPageSize(-1);
+          e.preventDefault(), this.base.scrollPopupByPageSize(-1);
         else if (a === u.pageDown)
-          t.preventDefault(), this.base.scrollPopupByPageSize(1);
-        else if ((t.ctrlKey || t.metaKey) && t.code === "KeyA") {
-          const c = (this.state.value && this.state.value.length) === e.length ? [] : e;
-          this.updateStateOnKeyboardNavigation(c, l);
-        } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === u.end) {
-          const d = e.slice(this.getFocusedState().focusedIndex);
-          this.itemFocus(e.length - 1, l), this.updateStateOnKeyboardNavigation(d, l);
-        } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === u.home) {
-          const d = e.slice(0, this.getFocusedState().focusedIndex + 1);
-          this.itemFocus(0, l), this.updateStateOnKeyboardNavigation(d, l);
-        } else if (t.shiftKey && t.keyCode === u.up) {
-          let d;
-          const c = this.getLastSelectedOrDeselectedIndex(1, i);
-          c === null ? d = i !== 0 ? e.slice(i - 1, i) : [e[i]] : c === i ? d = [e[c - 1]] : i >= 0 && (d = c > i ? e.slice(i - 1, c) : e.slice(c - 1, i)), d && d.length > 0 && (i >= 1 && this.itemFocus(i - 1, l), this.updateStateOnKeyboardNavigation(d, l));
-        } else if (t.shiftKey && t.keyCode === u.down) {
-          let d;
-          const c = this.getLastSelectedOrDeselectedIndex(0, i);
-          c === null ? d = i !== e.length - 1 ? e.slice(i, i + 1) : [e[i]] : c === i ? d = e.slice(i, i + 2) : i >= 0 && (d = c > i ? e.slice(i + 1, c + 1) : e.slice(c, i + 2)), d && d.length >= 1 && (this.itemFocus(i + 1, l), this.updateStateOnKeyboardNavigation(d, l));
-        } else if (t.altKey && a === u.up)
+          e.preventDefault(), this.base.scrollPopupByPageSize(1);
+        else if ((e.ctrlKey || e.metaKey) && e.code === "KeyA") {
+          const p = (this.state.value && this.state.value.length) === s.length ? [] : s;
+          this.updateStateOnKeyboardNavigation(p, l);
+        } else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.keyCode === u.end) {
+          const r = s.slice(this.getFocusedState().focusedIndex);
+          this.itemFocus(s.length - 1, l), this.updateStateOnKeyboardNavigation(r, l);
+        } else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.keyCode === u.home) {
+          const r = s.slice(0, this.getFocusedState().focusedIndex + 1);
+          this.itemFocus(0, l), this.updateStateOnKeyboardNavigation(r, l);
+        } else if (e.shiftKey && e.keyCode === u.up) {
+          let r;
+          const p = this.getLastSelectedOrDeselectedIndex(1, i);
+          p === null ? r = i !== 0 ? s.slice(i - 1, i) : [s[i]] : p === i ? r = [s[p - 1]] : i >= 0 && (r = p > i ? s.slice(i - 1, p) : s.slice(p - 1, i)), r && r.length > 0 && (i >= 1 && this.itemFocus(i - 1, l), this.updateStateOnKeyboardNavigation(r, l));
+        } else if (e.shiftKey && e.keyCode === u.down) {
+          let r;
+          const p = this.getLastSelectedOrDeselectedIndex(0, i);
+          p === null ? r = i !== s.length - 1 ? s.slice(i, i + 1) : [s[i]] : p === i ? r = s.slice(i, i + 2) : i >= 0 && (r = p > i ? s.slice(i + 1, p + 1) : s.slice(p, i + 2)), r && r.length >= 1 && (this.itemFocus(i + 1, l), this.updateStateOnKeyboardNavigation(r, l));
+        } else if (e.altKey && a === u.up)
           g();
         else if (a === u.up || a === u.down) {
-          if (o !== "" && s)
-            if (!this.props.skipDisabledItems && r)
+          if (o !== "" && t)
+            if (!this.props.skipDisabledItems && c)
               this.onNavigate(l, a);
             else {
-              let d = 0;
+              let r = 0;
               if (a === u.down || a === u.right) {
-                const c = e.slice(i + 1).find((v) => !v.disabled && v[s]);
-                d = c && e.findIndex((v) => v[s] === c[s]);
+                const p = s.slice(i + 1).find((v) => !v.disabled && v[t]);
+                r = p && s.findIndex((v) => v[t] === p[t]);
               } else if (a === u.up || a === u.left) {
-                let c;
+                let p;
                 if (i === -1)
-                  c = e, d = e.findIndex((v) => !v.disabled && v[s]);
+                  p = s, r = s.findIndex((v) => !v.disabled && v[t]);
                 else {
-                  c = e.slice(0, i);
-                  let v = c.pop();
+                  p = s.slice(0, i);
+                  let v = p.pop();
                   for (; v && v.disabled; )
-                    v = c.pop();
-                  d = v && e.findIndex((x) => x[s] === v[s]);
+                    v = p.pop();
+                  r = v && s.findIndex((S) => S[t] === v[t]);
                 }
               }
-              if (d) {
-                const c = d - i;
-                this.onNavigate(l, a, c);
+              if (r) {
+                const p = r - i;
+                this.onNavigate(l, a, p);
               } else
-                d !== void 0 && this.onNavigate(l, a);
+                r !== void 0 && this.onNavigate(l, a);
             }
-          else if (!this.props.skipDisabledItems && r)
+          else if (!this.props.skipDisabledItems && c)
             this.onNavigate(l, a);
           else {
-            let d = null;
+            let r = null;
             if (a === u.down || a === u.right)
-              d = e.slice(i + 1).find((c) => !c.disabled);
+              r = s.slice(i + 1).find((p) => !p.disabled);
             else if (a === u.up || a === u.left) {
-              const c = e.slice(0, i);
-              for (d = c.pop(); d && d.disabled; )
-                d = c.pop();
+              const p = s.slice(0, i);
+              for (r = p.pop(); r && r.disabled; )
+                r = p.pop();
             }
-            if (d) {
-              const c = d.id - i - 1;
-              this.onNavigate(l, a, c);
+            if (r) {
+              const p = r.id - i - 1;
+              this.onNavigate(l, a, p);
             } else
               this.onNavigate(l, a);
           }
-          this.applyState(l), t.preventDefault();
+          this.applyState(l), e.preventDefault();
         } else
-          a === u.enter ? (t.preventDefault(), this.props.allowCustom && p && h === null ? this.customItemSelect(t) : h && h.disabled ? g() : this.selectFocusedItem(t)) : a === u.esc && g();
+          a === u.enter ? (e.preventDefault(), this.props.allowCustom && h && d === null ? this.customItemSelect(e) : d && d.disabled ? g() : this.selectFocusedItem(e)) : a === u.esc && g();
       else
-        t.altKey && a === u.down ? g() : a === u.esc && this.clearButtonClick(t);
+        e.altKey && a === u.down ? g() : a === u.esc && this.clearButtonClick(e);
     }, this.listContainerContent = () => {
-      const { header: t, footer: e, allowCustom: s, size: o, data: a = [], groupStickyHeaderItemRender: p, groupField: r, list: h } = this.props, i = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: l } = this.getFocusedState(), g = s && i && /* @__PURE__ */ f.createElement(
+      const { header: e, footer: t, allowCustom: o, size: s, groupStickyHeaderItemRender: a, groupField: h, list: c } = this.props, d = I(this.props), i = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: l } = this.getFocusedState(), g = o && i && /* @__PURE__ */ f.createElement(
         "div",
         {
-          className: I("k-list", {
-            [`k-list-${w[o] || o}`]: o
+          className: y("k-list", {
+            [`k-list-${D[s] || s}`]: s
           }),
           key: "customitem",
           onClick: this.customItemSelect,
-          onMouseDown: A
+          onMouseDown: $
         },
         /* @__PURE__ */ f.createElement(
           "div",
           {
-            className: I("k-list-item k-custom-item", { "k-focus": $(l) }),
+            className: y("k-list-item k-custom-item", { "k-focus": q(l) }),
             style: { fontStyle: "italic" }
           },
           i,
-          /* @__PURE__ */ f.createElement(N, { name: "plus", icon: se, style: { position: "absolute", right: "0.5em" } })
+          /* @__PURE__ */ f.createElement(R, { name: "plus", icon: it, style: { position: "absolute", right: "0.5em" } })
         )
       );
-      let { group: d } = this.state;
-      return d === void 0 && r !== void 0 && (d = M(a[0], r)), /* @__PURE__ */ f.createElement(f.Fragment, null, t && /* @__PURE__ */ f.createElement("div", { className: "k-list-header" }, t), g, /* @__PURE__ */ f.createElement(
+      let { group: r } = this.state;
+      return r === void 0 && h !== void 0 && (r = O(d[0], h)), /* @__PURE__ */ f.createElement(f.Fragment, null, e && /* @__PURE__ */ f.createElement("div", { className: "k-list-header" }, e), g, /* @__PURE__ */ f.createElement(
         "div",
         {
-          className: I(
+          className: y(
             "k-list",
             {
-              [`k-list-${this.mobileMode ? "lg" : w[o] || o}`]: o,
+              [`k-list-${this.mobileMode ? "lg" : D[s] || s}`]: s,
               "k-virtual-list": this.base.vs.enabled
             }
           )
         },
-        !h && d && a.length !== 0 && /* @__PURE__ */ f.createElement(ne, { group: d, groupMode: "modern", render: p }),
+        !c && r && d.length !== 0 && /* @__PURE__ */ f.createElement(lt, { group: r, groupMode: "modern", render: a }),
         this.renderList()
-      ), e && /* @__PURE__ */ f.createElement("div", { className: "k-list-footer" }, e));
+      ), t && /* @__PURE__ */ f.createElement("div", { className: "k-list-footer" }, t));
     }, this.renderListContainer = () => {
-      const t = this.base, { dir: e, data: s = [] } = this.props, o = this.base.getPopupSettings(), a = o.width !== void 0 ? o.width : t.popupWidth, p = {
-        dir: e !== void 0 ? e : t.dirCalculated,
+      const e = this.base, { dir: t } = this.props, o = I(this.props), s = this.base.getPopupSettings(), a = s.width !== void 0 ? s.width : e.popupWidth, h = {
+        dir: t !== void 0 ? t : e.dirCalculated,
         width: a,
         popupSettings: {
-          ...o,
-          popupClass: I(
-            o.popupClass,
+          ...s,
+          popupClass: y(
+            s.popupClass,
             "k-list-container",
             "k-multiselect-popup"
           ),
-          anchor: o.anchor || this.element,
+          anchor: s.anchor || this.element,
           show: this.opened,
           onOpen: this.onPopupOpened,
           onClose: this.onPopupClosed
         },
-        itemsCount: [s.length, this.value.length]
+        itemsCount: [o.length, this.value.length]
       };
-      return /* @__PURE__ */ f.createElement(oe, { ...p }, this.listContainerContent());
+      return /* @__PURE__ */ f.createElement(at, { ...h }, this.listContainerContent());
     }, this.renderAdaptiveListContainer = () => {
-      const { adaptiveTitle: t, filterable: e, filter: s } = this.props, { windowWidth: o = 0 } = this.state, a = s !== void 0 ? s : this.state.text;
-      this.localization = me(this);
-      const p = e ? /* @__PURE__ */ f.createElement(
-        ve,
+      const { adaptiveTitle: e, filterable: t, filter: o } = this.props, { windowWidth: s = 0 } = this.state, a = o !== void 0 ? o : this.state.text;
+      this.localization = vt(this);
+      const h = t ? /* @__PURE__ */ f.createElement(
+        It,
         {
           value: a,
-          ref: (h) => this._adaptiveInput = h && h.element,
+          ref: (d) => this._adaptiveInput = d && d.element,
           onChange: this.onChangeHandler,
           onKeyDown: this.onInputKeyDown,
           size: this.props.size,
           rounded: this.props.rounded,
           fillMode: this.props.fillMode
         }
-      ) : null, r = {
-        adaptiveTitle: t,
+      ) : null, c = {
+        adaptiveTitle: e,
         expand: this.opened,
-        onClose: (h) => this.onCancel(h),
-        windowWidth: o,
-        mobileFilter: p,
+        onClose: (d) => this.onCancel(d),
+        windowWidth: s,
+        mobileFilter: h,
         footer: {
-          cancelText: this.localization.toLanguageString(B, z[B]),
+          cancelText: this.localization.toLanguageString(z, V[z]),
           onCancel: this.onCancel,
-          applyText: this.localization.toLanguageString(V, z[V]),
+          applyText: this.localization.toLanguageString(H, V[H]),
           onApply: this.closePopup
         }
       };
-      return /* @__PURE__ */ f.createElement(ue, { ...r }, /* @__PURE__ */ f.createElement(fe, { className: "!k-overflow-hidden" }, /* @__PURE__ */ f.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 s = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-      E(s) && s !== "" && 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 s = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-      E(s) && s !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
+      return /* @__PURE__ */ f.createElement(ft, { ...c }, /* @__PURE__ */ f.createElement(gt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ f.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" });
+      const o = this.props.filter !== void 0 ? this.props.filter : this.state.text;
+      M(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" });
+      const o = this.props.filter !== void 0 ? this.props.filter : this.state.text;
+      M(o) && o !== "" && this.base.filterChanged("", t), this.state.text && (t.data.text = ""), this.applyState(t);
     }, this.renderList = () => {
       const {
-        data: t = [],
         textField: e,
-        listNoDataRender: s,
+        listNoDataRender: t,
         itemRender: o,
-        groupHeaderItemRender: a,
-        dataItemKey: p,
-        virtual: r = { skip: 0, total: void 0 }
-      } = this.props, h = this.base.vs, { focusedIndex: i } = this.getFocusedState(), l = this.base.getPopupSettings(), g = `translateY(${h.translate}px)`;
+        groupHeaderItemRender: s,
+        dataItemKey: a,
+        virtual: h = { skip: 0, total: void 0 }
+      } = this.props, c = I(this.props), d = this.base.vs, { focusedIndex: i } = this.getFocusedState(), l = this.base.getPopupSettings(), g = `translateY(${d.translate}px)`;
       return /* @__PURE__ */ f.createElement(
-        ae,
+        nt,
         {
           id: this.base.listBoxId,
           show: this.opened,
-          data: t.slice(),
-          focusedIndex: i - r.skip,
+          data: c.slice(),
+          focusedIndex: i - h.skip,
           value: this.value,
           textField: e,
-          valueField: p,
+          valueField: a,
           optionsGuid: this.base.guid,
           groupField: this.props.groupField,
           groupMode: "modern",
-          listRef: (d) => {
-            h.list = this.base.list = d;
+          listRef: (r) => {
+            d.list = this.base.list = r;
           },
           wrapperStyle: this.mobileMode ? {} : { maxHeight: l.height },
           wrapperCssClass: "k-list-content",
-          listStyle: h.enabled ? { transform: g } : void 0,
+          listStyle: d.enabled ? { transform: g } : void 0,
           key: "listKey",
-          skip: r.skip,
+          skip: h.skip,
           onClick: this.handleItemClick,
           itemRender: o,
-          groupHeaderItemRender: a,
-          noDataRender: s,
-          onMouseDown: A,
+          groupHeaderItemRender: s,
+          noDataRender: t,
+          onMouseDown: $,
           onBlur: this.handleBlur,
           onScroll: this.onScroll,
-          wrapperRef: h.scrollerRef,
+          wrapperRef: d.scrollerRef,
           scroller: this.base.renderScrollElement(),
-          ariaSetSize: r.total
+          ariaSetSize: h.total
         }
       );
-    }, this.onScroll = (t) => {
-      const { vs: e, list: s } = this.base;
-      e.scrollHandler(t);
-      const { groupField: o } = this.props;
-      let { data: a = [] } = this.props;
-      if (!(!o || !a.length) && o) {
-        const p = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : s ? s.children[0].offsetHeight : 0), h = t.target.scrollTop - e.skip * p;
-        a = this.base.getGroupedDataModernMode(a, o);
-        let i = a[0][o];
-        for (let l = 1; l < a.length && !(p * l > h); l++)
-          a[l] && a[l][o] && (i = a[l][o]);
+    }, this.onScroll = (e) => {
+      const { vs: t, list: o } = this.base;
+      t.scrollHandler(e);
+      const { groupField: s } = this.props;
+      let a = I(this.props);
+      if (!(!s || !a.length) && s) {
+        const h = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : o ? o.children[0].offsetHeight : 0), d = e.target.scrollTop - t.skip * h;
+        a = this.base.getGroupedDataModernMode(a, s);
+        let i = a[0][s];
+        for (let l = 1; l < a.length && !(h * l > d); l++)
+          a[l] && a[l][s] && (i = a[l][s]);
         i !== this.state.group && this.setState({
           group: i
         });
       }
-    }, this.customItemSelect = (t) => {
-      const e = this.props.filter !== void 0 ? this.props.filter : this.state.text, { textField: s } = this.props;
-      if (!e)
+    }, this.customItemSelect = (e) => {
+      const t = this.props.filter !== void 0 ? this.props.filter : this.state.text, { textField: o } = this.props;
+      if (!t)
         return;
-      const o = this.base.initState();
-      o.syntheticEvent = t;
-      const a = s ? { [s]: e } : e;
-      this.state.text !== void 0 && (o.data.text = ""), o.data.focusedIndex = void 0, this.base.filterChanged("", o);
-      const p = [...this.value, a];
-      this.triggerOnChange(p, o), this.base.togglePopup(o), this.applyState(o);
-    }, this.handleWrapperClick = (t) => {
-      const e = this._input;
-      !this.opened && e && this.focusElement(e);
       const s = this.base.initState();
-      s.syntheticEvent = t, !this.state.focused && !this.mobileMode && (s.events.push({ type: "onFocus" }), s.data.focused = !0), this.mobileMode && (this.setState({ currentValue: this.tagsToRender }), this.mobileMode && window.setTimeout(() => this._adaptiveInput && this._adaptiveInput.focus(), 300)), this.base.togglePopup(s), this.applyState(s);
-    }, this.handleItemClick = (t, e) => {
-      const s = this.base.initState();
-      s.syntheticEvent = e, this.handleItemSelect(t, s), this.props.autoClose && !this.mobileMode && this.base.togglePopup(s), e.stopPropagation(), this.applyState(s);
-    }, this.handleBlur = (t) => {
+      s.syntheticEvent = e;
+      const a = o ? { [o]: t } : t;
+      this.state.text !== void 0 && (s.data.text = ""), s.data.focusedIndex = void 0, this.base.filterChanged("", s);
+      const h = [...this.value, a];
+      this.triggerOnChange(h, s), this.base.togglePopup(s), this.applyState(s);
+    }, this.handleWrapperClick = (e) => {
+      const t = this._input;
+      !this.opened && t && this.focusElement(t);
+      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) => {
+      const o = this.base.initState();
+      o.syntheticEvent = t, this.handleItemSelect(e, o), this.props.autoClose && !this.mobileMode && this.base.togglePopup(o), t.stopPropagation(), this.applyState(o);
+    }, this.handleBlur = (e) => {
       if (!this.state.focused || this._skipFocusEvent)
         return;
-      const e = this.base.initState(), { allowCustom: s, filterable: o } = 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" })), !s && !o && this.state.text && (e.data.text = ""), this.applyState(e);
-    }, this.handleFocus = (t) => {
-      this._skipFocusEvent || this.base.handleFocus(t);
+      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);
     }, this.onPopupOpened = () => {
       this._input && this.state.focused && !this.mobileMode && this.focusElement(this._input);
     }, this.onPopupClosed = () => {
@@ -325,15 +324,15 @@ const { sizeMap: w, roundedMap: Ie } = te, ye = "Please enter a valid value!", A
       }, 0);
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || ye
+        this.validity.valid ? "" : this.props.validationMessage || bt
       );
-    }, Q(pe);
+    }, X(ct);
   }
   get _inputId() {
     return this.props.id;
   }
   get document() {
-    if (R)
+    if (L)
       return this.element && this.element.ownerDocument || document;
   }
   /** @hidden */
@@ -346,16 +345,16 @@ const { sizeMap: w, roundedMap: Ie } = te, ye = "Please enter a valid value!", A
   }
   /** @hidden */
   get tagsToRender() {
-    const { tags: n, textField: t } = this.props, e = [];
-    return n === void 0 ? this.value.forEach((s) => {
-      e.push({ text: M(s, t), data: [s] });
-    }) : e.push(...n), e;
+    const { tags: n, textField: e } = this.props, t = [];
+    return n === void 0 ? this.value.forEach((o) => {
+      t.push({ text: O(o, e), data: [o] });
+    }) : t.push(...n), t;
   }
   /**
    * The mobile mode of the ComboBox.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= ge && this.props.adaptive);
+    return !!(this.state.windowWidth && this.state.windowWidth <= mt && this.props.adaptive);
   }
   /**
    * Represents the value of the MultiSelect.
@@ -374,36 +373,36 @@ const { sizeMap: w, roundedMap: Ie } = te, ye = "Please enter a valid value!", A
    * Represents the validity state into which the MultiSelect is set.
    */
   get validity() {
-    const n = 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;
+    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;
     return {
       customError: n,
-      valid: e,
+      valid: t,
       valueMissing: this.value === null
     };
   }
   /** @hidden */
   get required() {
-    return this.props.required !== void 0 ? this.props.required : y.defaultProps.required;
+    return this.props.required !== void 0 ? this.props.required : b.defaultProps.required;
   }
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : y.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : b.defaultProps.validityStyles;
   }
   /** @hidden */
-  componentDidUpdate(n, t) {
+  componentDidUpdate(n, e) {
     var g;
-    const { virtual: e, groupField: s = "", data: o = [] } = this.props, a = e ? e.skip : 0, p = n.virtual ? n.virtual.total : 0, r = n.opened !== void 0 ? n.opened : t.opened, h = !r && this.opened, i = r && !this.opened, l = this.base.getPopupSettings();
-    if (this.base.didUpdate(), !l.animate && i && this.onPopupClosed(), e && e.total !== p)
+    const { virtual: t, groupField: o = "" } = this.props, s = I(this.props), a = t ? t.skip : 0, h = n.virtual ? n.virtual.total : 0, c = n.opened !== void 0 ? n.opened : e.opened, d = !c && this.opened, i = c && !this.opened, l = this.base.getPopupSettings();
+    if (this.base.didUpdate(), !l.animate && i && this.onPopupClosed(), t && t.total !== h)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
-      let { focusedItem: d, focusedIndex: c } = this.getFocusedState();
-      s !== "" && (c = (g = this.base.getGroupedDataModernMode(o, s)) == null ? void 0 : g.indexOf(d)), h && e ? this.base.scrollToVirtualItem(e, c - a) : h && !e ? (o && o.length !== 0 && this.base.resetGroupStickyHeader(o[0][s], this), this.base.scrollToItem(c)) : this.opened && r && d && this.scrollToFocused && this.base.scrollToItem(c - a);
+      let { focusedItem: r, focusedIndex: p } = this.getFocusedState();
+      o !== "" && (p = (g = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : g.indexOf(r)), d && t ? this.base.scrollToVirtualItem(t, p - a) : d && !t ? (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][o], this), this.base.scrollToItem(p)) : this.opened && c && r && this.scrollToFocused && this.base.scrollToItem(p - a);
     }
     this.scrollToFocused = !1, this.setValidity();
   }
   /** @hidden */
   componentDidMount() {
     var n;
-    this.observerResize = R && 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);
+    this.observerResize = L && 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);
   }
   /** @hidden */
   componentWillUnmount() {
@@ -411,19 +410,19 @@ const { sizeMap: w, roundedMap: Ie } = te, ye = "Please enter a valid value!", A
     (n = this.document) != null && n.body && this.observerResize && this.observerResize.disconnect();
   }
   /** @hidden */
-  onNavigate(n, t, e) {
-    const { allowCustom: s, data: o = [] } = this.props, a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: p, focusedIndex: r } = this.getFocusedState(), h = s && a, i = $(p), l = this.base, g = l.vs;
-    if (this.opened && t === u.up && i)
+  onNavigate(n, e, t) {
+    const { allowCustom: o } = this.props, s = I(this.props), a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: h, focusedIndex: c } = this.getFocusedState(), d = o && a, i = q(h), l = this.base, g = l.vs;
+    if (this.opened && e === u.up && i)
       this.state.focusedIndex !== void 0 && (n.data.focusedIndex = void 0);
     else {
-      const d = l.navigation.navigate({
-        keyCode: t,
-        current: r,
-        max: (g.enabled ? g.total : o.length) - 1,
-        min: h ? -1 : 0,
-        skipItems: e || void 0
+      const r = l.navigation.navigate({
+        keyCode: e,
+        current: c,
+        max: (g.enabled ? g.total : s.length) - 1,
+        min: d ? -1 : 0,
+        skipItems: t || void 0
       });
-      d !== void 0 && (this.itemFocus(d, n), this.scrollToFocused = !0);
+      r !== void 0 && (this.itemFocus(r, n), this.scrollToFocused = !0);
     }
     this.applyState(n);
   }
@@ -431,191 +430,191 @@ const { sizeMap: w, roundedMap: Ie } = te, ye = "Please enter a valid value!", A
   render() {
     const {
       style: n,
-      className: t,
-      label: e,
-      dir: s,
-      disabled: o,
+      className: e,
+      label: t,
+      dir: o,
+      disabled: s,
       textField: a,
-      dataItemKey: p,
-      virtual: r,
-      size: h,
+      dataItemKey: h,
+      virtual: c,
+      size: d,
       rounded: i,
       fillMode: l,
       loading: g,
-      filter: d
-    } = this.props, { text: c, focused: v, focusedTag: x, currentValue: q } = this.state, S = this.base.vs, P = this.props.id || this._inputId;
-    S.enabled = r !== void 0, r !== void 0 && (S.skip = r.skip, S.total = r.total, S.pageSize = r.pageSize);
-    const b = this.mobileMode && this.opened ? q : this.tagsToRender;
+      filter: r
+    } = this.props, { text: p, focused: v, focusedTag: S, currentValue: W } = this.state, C = this.base.vs, _ = this.props.id || this._inputId;
+    C.enabled = c !== void 0, c !== void 0 && (C.skip = c.skip, C.total = c.total, C.pageSize = c.pageSize);
+    const x = this.mobileMode && this.opened ? W : this.tagsToRender;
     this.setItems(this.tagsToRender, this._tags);
-    const _ = !this.validityStyles || this.validity.valid, W = !!(d !== void 0 ? d : c) || b && b.length > 0, [G, U] = H(this.props.prefix || f.Fragment), [Y, j] = H(this.props.suffix || f.Fragment), K = /* @__PURE__ */ f.createElement(f.Fragment, null, /* @__PURE__ */ f.createElement(
+    const K = !this.validityStyles || this.validity.valid, G = !!(r !== void 0 ? r : p) || x && x.length > 0, [U, Y] = A(this.props.prefix || f.Fragment), [j, J] = A(this.props.suffix || f.Fragment), N = /* @__PURE__ */ f.createElement(f.Fragment, null, /* @__PURE__ */ f.createElement(
       "div",
       {
         ref: this.componentRef,
-        className: I("k-multiselect k-input", t, {
-          [`k-input-${w[h] || h}`]: h,
-          [`k-rounded-${Ie[i] || i}`]: i,
+        className: y("k-multiselect k-input", e, {
+          [`k-input-${D[d] || d}`]: d,
+          [`k-rounded-${yt[i] || i}`]: i,
           [`k-input-${l}`]: l,
-          "k-focus": v && !o,
-          "k-invalid": !_,
-          "k-disabled": o,
+          "k-focus": v && !s,
+          "k-invalid": !K,
+          "k-disabled": s,
           "k-loading": g,
           "k-required": this.required
         }),
-        style: e ? { ...n, width: void 0 } : n,
-        dir: s,
+        style: t ? { ...n, width: void 0 } : n,
+        dir: o,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onClick: this.handleWrapperClick,
-        onMouseDown: re
+        onMouseDown: ht
       },
-      this.props.prefix && /* @__PURE__ */ f.createElement(G, { ...U }),
-      /* @__PURE__ */ f.createElement("div", { className: I("k-input-values") }, /* @__PURE__ */ f.createElement(
+      this.props.prefix && /* @__PURE__ */ f.createElement(U, { ...Y }),
+      /* @__PURE__ */ f.createElement("div", { className: y("k-input-values") }, /* @__PURE__ */ f.createElement(
         "div",
         {
-          className: I(
+          className: y(
             "k-chip-list",
-            { [`k-chip-list-${w[h] || h}`]: h }
+            { [`k-chip-list-${D[d] || d}`]: d }
           ),
           role: "listbox",
           id: "tagslist-" + this.base.guid
         },
-        b && b.length > 0 && /* @__PURE__ */ f.createElement(
-          le,
+        x && x.length > 0 && /* @__PURE__ */ f.createElement(
+          dt,
           {
             tagRender: this.props.tagRender,
             onTagDelete: this.onTagDelete,
-            data: b,
+            data: x,
             guid: this.base.guid,
-            focused: x ? b.find((J) => L(J, x, p)) : void 0,
-            size: h
+            focused: S ? x.find((Q) => B(Q, S, h)) : void 0,
+            size: d
           }
         )
-      ), this.renderSearchBar(P)),
-      g && /* @__PURE__ */ f.createElement(N, { className: "k-input-loading-icon", name: "loading" }),
-      this.props.suffix && /* @__PURE__ */ f.createElement(Y, { ...j }),
-      W && /* @__PURE__ */ f.createElement(ce, { onClick: this.clearButtonClick }),
+      ), this.renderSearchBar(_)),
+      g && /* @__PURE__ */ f.createElement(R, { className: "k-input-loading-icon", name: "loading" }),
+      this.props.suffix && /* @__PURE__ */ f.createElement(j, { ...J }),
+      G && /* @__PURE__ */ f.createElement(ut, { onClick: this.clearButtonClick }),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
-    return e ? /* @__PURE__ */ f.createElement(
-      ie,
+    return t ? /* @__PURE__ */ f.createElement(
+      ot,
       {
-        label: e,
-        editorId: P,
-        editorValue: c || M(this.value[0], a),
-        editorValid: _,
-        editorDisabled: o,
+        label: t,
+        editorId: _,
+        editorValue: p || O(this.value[0], a),
+        editorValid: K,
+        editorDisabled: s,
         style: { width: n ? n.width : void 0 },
-        children: K
+        children: N
       }
-    ) : K;
+    ) : N;
   }
   renderSearchBar(n) {
-    const { activedescendant: t, focusedTag: e, currentValue: s } = this.state, { disabled: o, placeholder: a, ariaDescribedBy: p } = this.props, r = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: h } = this.getFocusedState(), i = this.value.length === 0 && !r ? a : void 0, l = s && s.length > 0 ? void 0 : a, g = t === C.TagsList && e !== void 0 ? `tag-${this.base.guid}-${e.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${h}`;
+    const { activedescendant: e, focusedTag: t, currentValue: o } = this.state, { disabled: s, placeholder: a, ariaDescribedBy: h } = this.props, c = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: d } = this.getFocusedState(), i = this.value.length === 0 && !c ? a : void 0, l = o && o.length > 0 ? void 0 : a, g = e === k.TagsList && t !== void 0 ? `tag-${this.base.guid}-${t.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${d}`;
     return /* @__PURE__ */ f.createElement(
-      de,
+      rt,
       {
         id: n,
-        size: Math.max((i || "").length, r.length, 1),
+        size: Math.max((i || "").length, c.length, 1),
         tabIndex: this.props.tabIndex,
         accessKey: this.props.accessKey,
         placeholder: this.mobileMode && this.opened ? l : i,
-        value: r,
+        value: c,
         onChange: this.onChangeHandler,
         onKeyDown: this.onInputKeyDown,
         ref: this.searchbarRef,
-        disabled: o,
+        disabled: s,
         expanded: this.opened,
         owns: this.base.listBoxId,
         role: "combobox",
         activedescendant: g,
-        ariaDescribedBy: `tagslist-${this.base.guid}${p ? " " + p : ""}`,
+        ariaDescribedBy: `tagslist-${this.base.guid}${h ? " " + h : ""}`,
         ariaLabelledBy: this.props.ariaLabelledBy,
         ariaRequired: this.required
       }
     );
   }
-  onTagsNavigate(n, t) {
-    const e = n.keyCode, { focusedTag: s } = this.state, o = this._tags, a = this.props.dataItemKey;
-    let p = s ? o.findIndex((i) => L(i, s, a)) : -1, r;
-    const h = p !== -1;
-    if (e === u.left)
-      h ? p = Math.max(0, p - 1) : p = o.length - 1, r = o[p];
-    else if (e === u.right)
-      p === o.length - 1 ? r = void 0 : h && (p = Math.min(o.length - 1, p + 1), r = o[p]);
-    else if (e === u.home && !n.shiftKey)
-      r = o[0];
-    else if (e === u.end && !n.shiftKey)
-      r = o[o.length - 1];
-    else if (e === u.delete) {
-      if (h) {
+  onTagsNavigate(n, e) {
+    const t = n.keyCode, { focusedTag: o } = this.state, s = this._tags, a = this.props.dataItemKey;
+    let h = o ? s.findIndex((i) => B(i, o, a)) : -1, c;
+    const d = h !== -1;
+    if (t === u.left)
+      d ? h = Math.max(0, h - 1) : h = s.length - 1, c = s[h];
+    else if (t === u.right)
+      h === s.length - 1 ? c = void 0 : d && (h = Math.min(s.length - 1, h + 1), c = s[h]);
+    else if (t === u.home && !n.shiftKey)
+      c = s[0];
+    else if (t === u.end && !n.shiftKey)
+      c = s[s.length - 1];
+    else if (t === u.delete) {
+      if (d) {
         const i = this.value;
-        k(i, o[p].data, a), this.triggerOnChange(i, t);
+        w(i, s[h].data, a), this.triggerOnChange(i, e);
       }
-    } else if (e === u.backspace) {
+    } else if (t === u.backspace) {
       const i = this.value;
-      if (h)
-        k(i, o[p].data, a), this.triggerOnChange(i, t);
-      else if (!h && o.length) {
-        const l = o.pop();
-        k(i, l.data, a), this.triggerOnChange(i, t);
+      if (d)
+        w(i, s[h].data, a), this.triggerOnChange(i, e);
+      else if (!d && s.length) {
+        const l = s.pop();
+        w(i, l.data, a), this.triggerOnChange(i, e);
       }
     }
-    r !== s && (t.data.focusedTag = r, t.data.activedescendant = C.TagsList), this.applyState(t);
+    c !== o && (e.data.focusedTag = c, e.data.activedescendant = k.TagsList), this.applyState(e);
   }
-  triggerOnChange(n, t) {
-    this.props.value === void 0 && (t.data.value = [...n]), this._valueItemsDuringOnChange = [], this.setItems(n, this._valueItemsDuringOnChange), t.events.push({ type: "onChange" });
+  triggerOnChange(n, e) {
+    this.props.value === void 0 && (e.data.value = [...n]), this._valueItemsDuringOnChange = [], this.setItems(n, this._valueItemsDuringOnChange), e.events.push({ type: "onChange" });
   }
-  selectFocusedItem(n, t) {
-    const { data: e = [], virtual: s } = this.props, { focusedIndex: o } = t || this.getFocusedState(), a = s ? s.skip : 0;
-    e[o - a] !== void 0 && this.handleItemClick(o, n);
+  selectFocusedItem(n, e) {
+    const { virtual: t } = this.props, o = I(this.props), { focusedIndex: s } = e || this.getFocusedState(), a = t ? t.skip : 0;
+    o[s - a] !== void 0 && this.handleItemClick(s, n);
   }
-  setItems(n, t) {
-    t.length = 0, t.push(...n);
+  setItems(n, e) {
+    e.length = 0, e.push(...n);
   }
   getFocusedState() {
-    const { focusedIndex: n } = this.state, t = this.props.filter !== void 0 ? this.props.filter : this.state.text, { allowCustom: e, data: s = [], dataItemKey: o, virtual: a, textField: p, focusedItemIndex: r = he, skipDisabledItems: h } = this.props, i = a && a.skip || 0;
+    const { focusedIndex: n } = this.state, e = this.props.filter !== void 0 ? this.props.filter : this.state.text, { allowCustom: t, dataItemKey: o, virtual: s, textField: a, focusedItemIndex: h = pt, skipDisabledItems: c } = this.props, d = I(this.props), i = s && s.skip || 0;
     let l;
     if (n !== void 0)
       return {
         focusedIndex: n,
-        focusedItem: s[n - i],
+        focusedItem: d[n - i],
         focusedType: 1
         /* ListItem */
       };
     const g = this.value;
-    if (e && t)
+    if (t && e)
       return {
         focusedItem: null,
         focusedIndex: -1,
         focusedType: 2
         /* CustomItem */
       };
-    if (t)
-      return l = r(s, t, p), {
-        focusedItem: s[l],
+    if (e)
+      return l = h(d, e, a), {
+        focusedItem: d[l],
         focusedIndex: l + i,
         focusedType: 1
         /* ListItem */
       };
     if (g.length) {
-      const d = g[g.length - 1];
-      return l = s.findIndex((c) => F(c, d, o)), s[l] !== void 0 ? {
+      const r = g[g.length - 1];
+      return l = d.findIndex((p) => E(p, r, o)), d[l] !== void 0 ? {
         focusedIndex: l + i,
-        focusedItem: s[l],
+        focusedItem: d[l],
         focusedType: 1
         /* ListItem */
       } : { focusedType: 0, focusedIndex: -1 };
-    } else if (h && p && !t && i === 0) {
-      const d = s.findIndex((c) => !c.disabled && c[p]);
+    } else if (c && a && !e && i === 0) {
+      const r = d.findIndex((p) => !p.disabled && p[a]);
       return {
-        focusedIndex: d,
-        focusedItem: s[d - i],
+        focusedIndex: r,
+        focusedItem: d[r - i],
         focusedType: 1
         /* ListItem */
       };
     }
     return i === 0 ? {
-      focusedItem: s[0],
+      focusedItem: d[0],
       focusedIndex: 0,
       focusedType: 1
       /* ListItem */
@@ -628,8 +627,8 @@ const { sizeMap: w, roundedMap: Ie } = te, ye = "Please enter a valid value!", A
     this.base.applyState(n), this._valueItemsDuringOnChange = null;
   }
   calculateMedia(n) {
-    for (const t of n)
-      this.setState({ windowWidth: t.target.clientWidth });
+    for (const e of n)
+      this.setState({ windowWidth: e.target.clientWidth });
   }
   /**
    * Updates the state of the MultiSelect when the complex keyboard navigation that
@@ -638,20 +637,20 @@ const { sizeMap: w, roundedMap: Ie } = te, ye = "Please enter a valid value!", A
    * @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, t) {
-    this.setState({ value: n }), this.triggerOnChange(n, t), this.applyState(t);
+  updateStateOnKeyboardNavigation(n, e) {
+    this.setState({ value: n }), this.triggerOnChange(n, e), this.applyState(e);
   }
   /**
    * 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, t) {
-    return this._lastSelectedOrDeslectedItemIndex === null && (this._lastSelectedOrDeslectedItemIndex = t), this._lastSelectedOrDeslectedItemIndex !== null ? this._lastSelectedOrDeslectedItemIndex + n : null;
+  getLastSelectedOrDeselectedIndex(n, e) {
+    return this._lastSelectedOrDeslectedItemIndex === null && (this._lastSelectedOrDeslectedItemIndex = e), this._lastSelectedOrDeslectedItemIndex !== null ? this._lastSelectedOrDeslectedItemIndex + n : null;
   }
 };
-y.displayName = "MultiSelect", y.propTypes = {
-  ...D.propTypes,
+b.displayName = "MultiSelect", b.propTypes = {
+  ...F.propTypes,
   autoClose: m.bool,
   value: m.arrayOf(m.any),
   defaultValue: m.arrayOf(m.any),
@@ -671,8 +670,8 @@ y.displayName = "MultiSelect", y.propTypes = {
   adaptiveTitle: m.string,
   onCancel: m.func,
   skipDisabledItems: m.bool
-}, y.defaultProps = {
-  ...D.defaultProps,
+}, b.defaultProps = {
+  ...F.defaultProps,
   autoClose: !0,
   required: !1,
   size: "medium",
@@ -683,11 +682,11 @@ y.displayName = "MultiSelect", y.propTypes = {
   prefix: void 0,
   suffix: void 0
 };
-let O = y;
-const be = X(), xe = Z(ee(be, O));
-xe.displayName = "KendoReactMultiSelect";
+let P = b;
+const xt = Z(), St = tt(et(xt, P));
+St.displayName = "KendoReactMultiSelect";
 export {
-  xe as MultiSelect,
-  be as MultiSelectPropsContext,
-  O as MultiSelectWithoutContext
+  St as MultiSelect,
+  xt as MultiSelectPropsContext,
+  P as MultiSelectWithoutContext
 };