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

package/MultiSelect/MultiSelect.mjs

@@ -8,7 +8,7 @@
 "use client";
 import * as f from "react";
 import m from "prop-types";
-import { Keys as u, classNames as b, IconWrap as R, validatePackage as X, canUseDOM as L, ADAPTIVE_MEDIUM_BREAKPOINT as Z, createPropsContext as tt, withIdHOC as et, withPropsContext as st, kendoThemeMaps as it } from "@progress/kendo-react-common";
+import { Keys as u, classNames as b, IconWrap as R, validatePackage as X, canUseDOM as L, createPropsContext as Z, withIdHOC as tt, withPropsContext as et, withAdaptiveModeContext as st, kendoThemeMaps as it } from "@progress/kendo-react-common";
 import { plusIcon as ot } from "@progress/kendo-svg-icons";
 import { FloatingLabel as at } from "@progress/kendo-react-labels";
 import nt from "../common/ListContainer.mjs";
@@ -18,7 +18,7 @@ import rt from "./TagList.mjs";
 import ht 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 pt, matchTags as B, itemIndexStartsWith as ct } from "../common/utils.mjs";
+import { getFilteredData as I, areSame as M, removeDataItems as w, isPresent as E, getItemValue as O, preventDefaultNonInputs as pt, matchTags as B, itemIndexStartsWith as ct } from "../common/utils.mjs";
 import { packageMetadata as ut } from "../package-metadata.mjs";
 import ft from "../common/ClearButton.mjs";
 import { AdaptiveMode as gt } from "../common/AdaptiveMode.mjs";
@@ -34,82 +34,82 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
       currentValue: []
     }, 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 = (e, t) => {
-      const { dataItemKey: o, virtual: s } = this.props, a = I(this.props), p = s ? s.skip : 0, c = a[e - p], r = this.value.findIndex((g) => E(g, c, o));
-      this._lastSelectedOrDeslectedItemIndex = a.findIndex((g) => E(g, c, o));
+    }, this.handleItemSelect = (t, e) => {
+      const { dataItemKey: o, virtual: s } = this.props, a = I(this.props), p = s ? s.skip : 0, c = a[t - p], r = this.value.findIndex((g) => M(g, c, o));
+      this._lastSelectedOrDeslectedItemIndex = a.findIndex((g) => M(g, c, o));
       let i = [];
-      r !== -1 ? (i = this.value, i.splice(r, 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) => {
+      r !== -1 ? (i = this.value, i.splice(r, 1)) : i = [...this.value, c], (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(c, 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;
-      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), p = s ? s.skip : 0, c = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: r } = this.getFocusedState(), i = o && c, l = a[e - p];
-      l && r !== 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);
+      w(s, t, this.props.dataItemKey), this.triggerOnChange(s, o), this.applyState(o);
+    }, this.itemFocus = (t, e) => {
+      const { allowCustom: o, virtual: s } = this.props, a = I(this.props), p = s ? s.skip : 0, c = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: r } = this.getFocusedState(), i = o && c, l = a[t - p];
+      l && r !== t ? this.state.focusedIndex !== t && (e.data.focusedIndex = t, e.data.activedescendant = k.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(), o = t.target.value;
+      e.syntheticEvent = t, this.props.filter === void 0 && (e.data.text = o), e.data.focusedIndex = void 0, this.opened || (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;
-      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, p = this.props.filter !== void 0 ? this.props.filter : this.state.text, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: r, focusedIndex: i } = this.getFocusedState(), l = this.base.initState();
-      if (l.syntheticEvent = e, !p && 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);
+      E(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 } = this.props, s = I(this.props), a = t.keyCode, p = this.props.filter !== void 0 ? this.props.filter : this.state.text, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: r, 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);
       const g = () => {
-        e.preventDefault(), this.base.togglePopup(l), this.applyState(l);
+        t.preventDefault(), this.base.togglePopup(l), this.applyState(l);
       };
       if (this.opened)
         if (a === u.pageUp)
-          e.preventDefault(), this.base.scrollPopupByPageSize(-1);
+          t.preventDefault(), this.base.scrollPopupByPageSize(-1);
         else if (a === 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 h = (this.state.value && this.state.value.length) === s.length ? [] : s;
           this.updateStateOnKeyboardNavigation(h, l);
-        } else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.keyCode === u.end) {
+        } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === u.end) {
           const d = s.slice(this.getFocusedState().focusedIndex);
           this.itemFocus(s.length - 1, l), this.updateStateOnKeyboardNavigation(d, l);
-        } else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.keyCode === u.home) {
+        } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === u.home) {
           const d = s.slice(0, this.getFocusedState().focusedIndex + 1);
           this.itemFocus(0, l), this.updateStateOnKeyboardNavigation(d, l);
-        } else if (e.shiftKey && e.keyCode === u.up) {
+        } else if (t.shiftKey && t.keyCode === u.up) {
           let d;
           const h = this.getLastSelectedOrDeselectedIndex(1, i);
           h === null ? d = i !== 0 ? s.slice(i - 1, i) : [s[i]] : h === i ? d = [s[h - 1]] : i >= 0 && (d = h > i ? s.slice(i - 1, h) : s.slice(h - 1, i)), d && d.length > 0 && (i >= 1 && this.itemFocus(i - 1, l), this.updateStateOnKeyboardNavigation(d, l));
-        } else if (e.shiftKey && e.keyCode === u.down) {
+        } else if (t.shiftKey && t.keyCode === u.down) {
           let d;
           const h = this.getLastSelectedOrDeselectedIndex(0, i);
           h === null ? d = i !== s.length - 1 ? s.slice(i, i + 1) : [s[i]] : h === i ? d = s.slice(i, i + 2) : i >= 0 && (d = h > i ? s.slice(i + 1, h + 1) : s.slice(h, i + 2)), d && d.length >= 1 && (this.itemFocus(i + 1, l), this.updateStateOnKeyboardNavigation(d, l));
-        } else if (e.altKey && a === u.up)
+        } else if (t.altKey && a === u.up)
           g();
         else if (a === u.up || a === u.down) {
-          if (o !== "" && t)
+          if (o !== "" && e)
             if (!this.props.skipDisabledItems && c)
               this.onNavigate(l, a);
             else {
               let d = 0;
               if (a === u.down || a === u.right) {
-                const h = s.slice(i + 1).find((v) => !v.disabled && v[t]);
-                d = h && s.findIndex((v) => v[t] === h[t]);
+                const h = s.slice(i + 1).find((v) => !v.disabled && v[e]);
+                d = h && s.findIndex((v) => v[e] === h[e]);
               } else if (a === u.up || a === u.left) {
                 let h;
                 if (i === -1)
-                  h = s, d = s.findIndex((v) => !v.disabled && v[t]);
+                  h = s, d = s.findIndex((v) => !v.disabled && v[e]);
                 else {
                   h = s.slice(0, i);
                   let v = h.pop();
                   for (; v && v.disabled; )
                     v = h.pop();
-                  d = v && s.findIndex((x) => x[t] === v[t]);
+                  d = v && s.findIndex((x) => x[e] === v[e]);
                 }
               }
               if (d) {
@@ -135,13 +135,13 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
             } else
               this.onNavigate(l, a);
           }
-          this.applyState(l), e.preventDefault();
+          this.applyState(l), t.preventDefault();
         } else
-          a === u.enter ? (e.preventDefault(), this.props.allowCustom && p && r === null ? this.customItemSelect(e) : r && r.disabled ? g() : this.selectFocusedItem(e)) : a === u.esc && g();
+          a === u.enter ? (t.preventDefault(), this.props.allowCustom && p && r === null ? this.customItemSelect(t) : r && r.disabled ? g() : this.selectFocusedItem(t)) : a === u.esc && g();
       else
-        e.altKey && a === u.down ? g() : a === u.esc && this.clearButtonClick(e);
+        t.altKey && a === u.down ? g() : a === u.esc && this.clearButtonClick(t);
     }, this.listContainerContent = () => {
-      const { header: e, footer: t, allowCustom: o, size: s, groupStickyHeaderItemRender: a, groupField: p, list: c } = this.props, r = 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(
+      const { header: t, footer: e, allowCustom: o, size: s, groupStickyHeaderItemRender: a, groupField: p, list: c } = this.props, r = 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: b("k-list", {
@@ -162,7 +162,7 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
         )
       );
       let { group: d } = this.state;
-      return d === void 0 && p !== void 0 && (d = O(r[0], p)), /* @__PURE__ */ f.createElement(f.Fragment, null, e && /* @__PURE__ */ f.createElement("div", { className: "k-list-header" }, e), g, /* @__PURE__ */ f.createElement(
+      return d === void 0 && p !== void 0 && (d = O(r[0], p)), /* @__PURE__ */ f.createElement(f.Fragment, null, t && /* @__PURE__ */ f.createElement("div", { className: "k-list-header" }, t), g, /* @__PURE__ */ f.createElement(
         "div",
         {
           className: b("k-list", {
@@ -172,10 +172,10 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
         },
         !c && d && r.length !== 0 && /* @__PURE__ */ f.createElement(dt, { group: d, groupMode: "modern", render: a }),
         this.renderList()
-      ), t && /* @__PURE__ */ f.createElement("div", { className: "k-list-footer" }, t));
+      ), e && /* @__PURE__ */ f.createElement("div", { className: "k-list-footer" }, e));
     }, this.renderListContainer = () => {
-      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, p = {
-        dir: t !== void 0 ? t : e.dirCalculated,
+      const t = this.base, { dir: e } = this.props, o = I(this.props), s = this.base.getPopupSettings(), a = s.width !== void 0 ? s.width : t.popupWidth, p = {
+        dir: e !== void 0 ? e : t.dirCalculated,
         width: a,
         popupSettings: {
           ...s,
@@ -189,9 +189,9 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
       };
       return /* @__PURE__ */ f.createElement(nt, { ...p }, this.listContainerContent());
     }, this.renderAdaptiveListContainer = () => {
-      const { adaptiveTitle: e, filterable: t, filter: o } = this.props, { windowWidth: s = 0 } = this.state, a = o !== void 0 ? o : this.state.text;
+      const { adaptiveTitle: t, filterable: e, filter: o } = this.props, { windowWidth: s = 0 } = this.state, a = o !== void 0 ? o : this.state.text;
       this.localization = vt(this);
-      const p = t ? /* @__PURE__ */ f.createElement(
+      const p = e ? /* @__PURE__ */ f.createElement(
         It,
         {
           value: a,
@@ -203,7 +203,7 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
           fillMode: this.props.fillMode
         }
       ) : null, c = {
-        title: e,
+        title: t,
         expand: this.opened,
         onClose: (r) => this.onCancel(r),
         windowWidth: s,
@@ -222,20 +222,20 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
         }
       };
       return /* @__PURE__ */ f.createElement(gt, { ...c }, /* @__PURE__ */ f.createElement(mt, { overflowHidden: !0 }, /* @__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" });
+    }, 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;
-      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" });
+      E(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;
-      M(o) && o !== "" && this.base.filterChanged("", t), this.state.text && (t.data.text = ""), this.applyState(t);
+      E(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,
@@ -249,7 +249,7 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
           data: c.slice(),
           focusedIndex: i - p.skip,
           value: this.value,
-          textField: e,
+          textField: t,
           valueField: a,
           optionsGuid: this.base.guid,
           groupField: this.props.groupField,
@@ -265,7 +265,7 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
           onClick: this.handleItemClick,
           itemRender: o,
           groupHeaderItemRender: s,
-          noDataRender: t,
+          noDataRender: e,
           onMouseDown: $,
           onBlur: this.handleBlur,
           onScroll: this.onScroll,
@@ -274,13 +274,13 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
           ariaSetSize: p.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 = I(this.props);
       if (!(!s || !a.length) && s) {
-        const p = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : o ? o.children[0].offsetHeight : 0), r = e.target.scrollTop - t.skip * p;
+        const p = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : o ? o.children[0].offsetHeight : 0), r = t.target.scrollTop - e.skip * p;
         a = this.base.getGroupedDataModernMode(a, s);
         let i = a[0][s];
         for (let l = 1; l < a.length && !(p * l > r); l++)
@@ -289,31 +289,31 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
           group: i
         });
       }
-    }, 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 p = [...this.value, a];
       this.triggerOnChange(p, 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.mobileMode && this.base.togglePopup(o), t.stopPropagation(), this.applyState(o);
-    }, this.handleBlur = (e) => {
+      o.syntheticEvent = e, this.handleItemSelect(t, o), this.props.autoClose && !this.mobileMode && 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 = () => {
@@ -343,16 +343,17 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
   }
   /** @hidden */
   get tagsToRender() {
-    const { tags: n, textField: e } = this.props, t = [];
+    const { tags: n, textField: t } = this.props, e = [];
     return n === void 0 ? this.value.forEach((o) => {
-      t.push({ text: O(o, e), data: [o] });
-    }) : t.push(...n), t;
+      e.push({ text: O(o, t), data: [o] });
+    }) : e.push(...n), e;
   }
   /**
    * The mobile mode of the MultiSelect.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= Z && 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.
@@ -371,10 +372,10 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
    * 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 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;
     return {
       customError: n,
-      valid: t,
+      valid: e,
       valueMissing: this.value === null
     };
   }
@@ -386,14 +387,14 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
     return this.props.validityStyles !== void 0 ? this.props.validityStyles : y.defaultProps.validityStyles;
   }
   /** @hidden */
-  componentDidUpdate(n, e) {
+  componentDidUpdate(n, t) {
     var g;
-    const { virtual: t, groupField: o = "" } = this.props, s = I(this.props), a = t ? t.skip : 0, p = n.virtual ? n.virtual.total : 0, c = n.opened !== void 0 ? n.opened : e.opened, r = !c && this.opened, i = c && !this.opened, l = this.base.getPopupSettings();
-    if (this.base.didUpdate(), !l.animate && i && this.onPopupClosed(), t && t.total !== p)
+    const { virtual: e, groupField: o = "" } = this.props, s = I(this.props), a = e ? e.skip : 0, p = n.virtual ? n.virtual.total : 0, c = n.opened !== void 0 ? n.opened : t.opened, r = !c && this.opened, i = c && !this.opened, l = this.base.getPopupSettings();
+    if (this.base.didUpdate(), !l.animate && i && this.onPopupClosed(), e && e.total !== p)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
       let { focusedItem: d, focusedIndex: h } = this.getFocusedState();
-      o !== "" && (h = (g = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : g.indexOf(d)), r && t ? this.base.scrollToVirtualItem(t, h - a) : r && !t ? (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][o], this), this.base.scrollToItem(h)) : this.opened && c && d && this.scrollToFocused && this.base.scrollToItem(h - a);
+      o !== "" && (h = (g = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : g.indexOf(d)), r && e ? this.base.scrollToVirtualItem(e, h - a) : r && !e ? (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][o], this), this.base.scrollToItem(h)) : this.opened && c && d && this.scrollToFocused && this.base.scrollToItem(h - a);
     }
     this.scrollToFocused = !1, this.setValidity();
   }
@@ -408,17 +409,17 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
     (n = this.document) != null && n.body && this.observerResize && this.observerResize.disconnect();
   }
   /** @hidden */
-  onNavigate(n, e, t) {
+  onNavigate(n, t, e) {
     const { allowCustom: o } = this.props, s = I(this.props), a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: p, focusedIndex: c } = this.getFocusedState(), r = o && a, i = q(p), l = this.base, g = l.vs;
-    if (this.opened && e === u.up && i)
+    if (this.opened && t === u.up && i)
       this.state.focusedIndex !== void 0 && (n.data.focusedIndex = void 0);
     else {
       const d = l.navigation.navigate({
-        keyCode: e,
+        keyCode: t,
         current: c,
         max: (g.enabled ? g.total : s.length) - 1,
         min: r ? -1 : 0,
-        skipItems: t || void 0
+        skipItems: e || void 0
       });
       d !== void 0 && (this.itemFocus(d, n), this.scrollToFocused = !0);
     }
@@ -428,8 +429,8 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
   render() {
     const {
       style: n,
-      className: e,
-      label: t,
+      className: t,
+      label: e,
       dir: o,
       disabled: s,
       textField: a,
@@ -440,25 +441,25 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
       fillMode: l,
       loading: g,
       filter: d
-    } = this.props, { text: h, focused: v, focusedTag: x, currentValue: W } = this.state, C = this.base.vs, K = this.props.id || this._inputId;
+    } = this.props, { text: h, focused: v, focusedTag: x, 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 S = this.mobileMode && this.opened ? W : this.tagsToRender;
     this.setItems(this.tagsToRender, this._tags);
-    const _ = !this.validityStyles || this.validity.valid, G = !!(d !== void 0 ? d : h) || S && S.length > 0, [U, j] = H(this.props.prefix || f.Fragment), [Y, J] = H(this.props.suffix || f.Fragment), N = /* @__PURE__ */ f.createElement(f.Fragment, null, /* @__PURE__ */ f.createElement(
+    const K = !this.validityStyles || this.validity.valid, G = !!(d !== void 0 ? d : h) || S && S.length > 0, [U, j] = H(this.props.prefix || f.Fragment), [Y, J] = H(this.props.suffix || f.Fragment), N = /* @__PURE__ */ f.createElement(f.Fragment, null, /* @__PURE__ */ f.createElement(
       "div",
       {
         ref: this.componentRef,
-        className: b("k-multiselect k-input", e, {
+        className: b("k-multiselect k-input", t, {
           [`k-input-${T[r] || r}`]: r,
           [`k-rounded-${bt[i] || i}`]: i,
           [`k-input-${l}`]: l,
           "k-focus": v && !s,
-          "k-invalid": !_,
+          "k-invalid": !K,
           "k-disabled": s,
           "k-loading": g,
           "k-required": this.required
         }),
-        style: t ? { ...n, width: void 0 } : n,
+        style: e ? { ...n, width: void 0 } : n,
         dir: o,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
@@ -484,19 +485,19 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
             size: r
           }
         )
-      ), this.renderSearchBar(K)),
+      ), this.renderSearchBar(_)),
       g && /* @__PURE__ */ f.createElement(R, { className: "k-input-loading-icon", name: "loading" }),
       this.props.suffix && /* @__PURE__ */ f.createElement(Y, { ...J }),
       G && /* @__PURE__ */ f.createElement(ft, { onClick: this.clearButtonClick }),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
-    return t ? /* @__PURE__ */ f.createElement(
+    return e ? /* @__PURE__ */ f.createElement(
       at,
       {
-        label: t,
-        editorId: K,
+        label: e,
+        editorId: _,
         editorValue: h || O(this.value[0], a),
-        editorValid: _,
+        editorValid: K,
         editorDisabled: s,
         style: { width: n ? n.width : void 0 },
         children: N
@@ -504,7 +505,7 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
     ) : N;
   }
   renderSearchBar(n) {
-    const { activedescendant: e, focusedTag: t, currentValue: o } = this.state, { disabled: s, placeholder: a, ariaDescribedBy: p, ariaLabelledBy: c, ariaLabel: r, inputAttributes: i } = this.props, l = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: g } = this.getFocusedState(), d = this.value.length === 0 && !l ? a : void 0, h = o && o.length > 0 ? void 0 : a, v = e === k.TagsList && t !== void 0 ? `tag-${this.base.guid}-${t.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${g}`, x = {
+    const { activedescendant: t, focusedTag: e, currentValue: o } = this.state, { disabled: s, placeholder: a, ariaDescribedBy: p, ariaLabelledBy: c, ariaLabel: r, inputAttributes: i } = this.props, l = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: g } = this.getFocusedState(), d = this.value.length === 0 && !l ? a : void 0, h = o && o.length > 0 ? void 0 : a, v = t === k.TagsList && e !== void 0 ? `tag-${this.base.guid}-${e.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${g}`, x = {
       accessKey: this.props.accessKey,
       tabIndex: this.props.tabIndex
     };
@@ -532,47 +533,47 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
       }
     );
   }
-  onTagsNavigate(n, e) {
-    const t = n.keyCode, { focusedTag: o } = this.state, s = this._tags, a = this.props.dataItemKey;
+  onTagsNavigate(n, t) {
+    const e = n.keyCode, { focusedTag: o } = this.state, s = this._tags, a = this.props.dataItemKey;
     let p = o ? s.findIndex((i) => B(i, o, a)) : -1, c;
     const r = p !== -1;
-    if (t === u.left)
+    if (e === u.left)
       r ? p = Math.max(0, p - 1) : p = s.length - 1, c = s[p];
-    else if (t === u.right)
+    else if (e === u.right)
       p === s.length - 1 ? c = void 0 : r && (p = Math.min(s.length - 1, p + 1), c = s[p]);
-    else if (t === u.home && !n.shiftKey)
+    else if (e === u.home && !n.shiftKey)
       c = s[0];
-    else if (t === u.end && !n.shiftKey)
+    else if (e === u.end && !n.shiftKey)
       c = s[s.length - 1];
-    else if (t === u.delete) {
+    else if (e === u.delete) {
       if (r) {
         const i = this.value;
-        w(i, s[p].data, a), this.triggerOnChange(i, e);
+        w(i, s[p].data, a), this.triggerOnChange(i, t);
       }
-    } else if (t === u.backspace) {
+    } else if (e === u.backspace) {
       const i = this.value;
       if (r)
-        w(i, s[p].data, a), this.triggerOnChange(i, e);
+        w(i, s[p].data, a), this.triggerOnChange(i, t);
       else if (!r && s.length) {
         const l = s.pop();
-        w(i, l.data, a), this.triggerOnChange(i, e);
+        w(i, l.data, a), this.triggerOnChange(i, t);
       }
     }
-    c !== o && (e.data.focusedTag = c, e.data.activedescendant = k.TagsList), this.applyState(e);
+    c !== o && (t.data.focusedTag = c, t.data.activedescendant = k.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(n, t) {
+    this.props.value === void 0 && (t.data.value = [...n]), this._valueItemsDuringOnChange = [], this.setItems(n, this._valueItemsDuringOnChange), t.events.push({ type: "onChange" });
   }
-  selectFocusedItem(n, e) {
-    const { virtual: t } = this.props, o = I(this.props), { focusedIndex: s } = e || this.getFocusedState(), a = t ? t.skip : 0;
+  selectFocusedItem(n, t) {
+    const { virtual: e } = this.props, o = I(this.props), { focusedIndex: s } = t || this.getFocusedState(), a = e ? e.skip : 0;
     o[s - a] !== void 0 && this.handleItemClick(s, n);
   }
-  setItems(n, e) {
-    e.length = 0, e.push(...n);
+  setItems(n, t) {
+    t.length = 0, t.push(...n);
   }
   getFocusedState() {
-    const { focusedIndex: n } = this.state, e = this.props.filter !== void 0 ? this.props.filter : this.state.text, {
-      allowCustom: t,
+    const { focusedIndex: n } = this.state, t = this.props.filter !== void 0 ? this.props.filter : this.state.text, {
+      allowCustom: e,
       dataItemKey: o,
       virtual: s,
       textField: a,
@@ -588,15 +589,15 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
         /* ListItem */
       };
     const g = this.value;
-    if (t && e)
+    if (e && t)
       return {
         focusedItem: null,
         focusedIndex: -1,
         focusedType: 2
         /* CustomItem */
       };
-    if (e)
-      return l = p(r, e, a), {
+    if (t)
+      return l = p(r, t, a), {
         focusedItem: r[l],
         focusedIndex: l + i,
         focusedType: 1
@@ -604,13 +605,13 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
       };
     if (g.length) {
       const d = g[g.length - 1];
-      return l = r.findIndex((h) => E(h, d, o)), r[l] !== void 0 ? {
+      return l = r.findIndex((h) => M(h, d, o)), r[l] !== void 0 ? {
         focusedIndex: l + i,
         focusedItem: r[l],
         focusedType: 1
         /* ListItem */
       } : { focusedType: 0, focusedIndex: -1 };
-    } else if (c && a && !e && i === 0) {
+    } else if (c && a && !t && i === 0) {
       const d = r.findIndex((h) => !h.disabled && h[a]);
       return {
         focusedIndex: d,
@@ -633,8 +634,8 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
     this.base.applyState(n), this._valueItemsDuringOnChange = null;
   }
   calculateMedia(n) {
-    for (const e of n)
-      this.setState({ windowWidth: e.target.clientWidth });
+    for (const t of n)
+      this.setState({ windowWidth: t.target.clientWidth });
   }
   /**
    * Updates the state of the MultiSelect when the complex keyboard navigation that
@@ -643,16 +644,16 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
    * @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(n, t) {
+    this.setState({ value: n }), this.triggerOnChange(n, 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(n, t) {
+    return this._lastSelectedOrDeslectedItemIndex === null && (this._lastSelectedOrDeslectedItemIndex = t), this._lastSelectedOrDeslectedItemIndex !== null ? this._lastSelectedOrDeslectedItemIndex + n : null;
   }
 };
 y.displayName = "MultiSelect", y.propTypes = {
@@ -692,10 +693,10 @@ y.displayName = "MultiSelect", y.propTypes = {
   suffix: void 0
 };
 let P = y;
-const xt = tt(), St = et(
-  st(
+const xt = Z(), St = tt(
+  et(
     xt,
-    P
+    st(P)
   )
 );
 St.displayName = "KendoReactMultiSelect";