@progress/kendo-react-dropdowns 11.0.0-develop.3 → 11.0.0-develop.4

package/MultiSelect/MultiSelect.mjs

@@ -7,69 +7,68 @@
  */
 import * as f from "react";
 import g from "prop-types";
-import { Keys as u, classNames as I, IconWrap as R, WatermarkOverlay as X, canUseDOM as L, validatePackage as Z, createPropsContext as tt, withIdHOC as et, withPropsContext as st, withAdaptiveModeContext as it, kendoThemeMaps as ot } from "@progress/kendo-react-common";
-import { plusIcon as at } from "@progress/kendo-svg-icons";
-import { FloatingLabel as nt } from "@progress/kendo-react-labels";
-import lt from "../common/ListContainer.mjs";
-import dt from "../common/List.mjs";
-import rt from "../common/GroupStickyHeader.mjs";
-import ht from "./TagList.mjs";
-import pt from "../common/SearchBar.mjs";
-import D from "../common/DropDownBase.mjs";
-import { ActiveDescendant as k } from "../common/settings.mjs";
-import { getFilteredData as b, areSame as M, removeDataItems as w, isPresent as E, getItemValue as O, preventDefaultNonInputs as ct, matchTags as z, itemIndexStartsWith as ut } from "../common/utils.mjs";
-import { packageMetadata as ft } from "../package-metadata.mjs";
-import mt from "../common/ClearButton.mjs";
-import { AdaptiveMode as gt } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as vt } from "@progress/kendo-react-layout";
-import { provideLocalizationService as bt } from "@progress/kendo-react-intl";
-import { adaptiveModeFooterCancel as B, messages as V, adaptiveModeFooterApply as A } from "../messages/index.mjs";
-import It from "../common/ListFilter.mjs";
-import H from "../common/withCustomComponent.mjs";
-const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $ = (F) => F.preventDefault(), W = (F) => F === 2, y = class y extends f.Component {
+import { Keys as u, classNames as I, IconWrap as L, WatermarkOverlay as Y, canUseDOM as B, validatePackage as J, createPropsContext as Q, withIdHOC as X, withPropsContext as Z, withAdaptiveModeContext as tt, kendoThemeMaps as et } from "@progress/kendo-react-common";
+import { plusIcon as st } from "@progress/kendo-svg-icons";
+import { FloatingLabel as it } from "@progress/kendo-react-labels";
+import ot from "../common/ListContainer.mjs";
+import at from "../common/List.mjs";
+import nt from "../common/GroupStickyHeader.mjs";
+import lt from "./TagList.mjs";
+import dt from "../common/SearchBar.mjs";
+import E from "../common/DropDownBase.mjs";
+import { ActiveDescendant as w } from "../common/settings.mjs";
+import { getFilteredData as b, areSame as M, removeDataItems as T, isPresent as O, getItemValue as P, preventDefaultNonInputs as rt, matchTags as V, itemIndexStartsWith as ht } from "../common/utils.mjs";
+import { packageMetadata as pt } from "../package-metadata.mjs";
+import ct from "../common/ClearButton.mjs";
+import { AdaptiveMode as ut } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as ft } from "@progress/kendo-react-layout";
+import { provideLocalizationService as mt } from "@progress/kendo-react-intl";
+import gt from "../common/ListFilter.mjs";
+import z from "../common/withCustomComponent.mjs";
+const { sizeMap: D, roundedMap: vt } = et, bt = "Please enter a valid value!", A = (F) => F.preventDefault(), H = (F) => F === 2, y = class y extends f.Component {
   constructor(n) {
     super(n), this.state = {
-      activedescendant: k.PopupList,
+      activedescendant: w.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.showLicenseWatermark = !1, this.focus = () => {
+    }, this._element = null, this._valueItemsDuringOnChange = null, this.base = new E(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.showLicenseWatermark = !1, this.focus = () => {
       this._input && this._input.focus();
     }, this.handleItemSelect = (t, e) => {
-      const { dataItemKey: o, virtual: s } = this.props, a = b(this.props), p = s ? s.skip : 0, c = a[t - p], r = this.value.findIndex((m) => M(m, c, o));
-      this._lastSelectedOrDeslectedItemIndex = a.findIndex((m) => M(m, c, o));
+      const { dataItemKey: a, virtual: s } = this.props, o = b(this.props), p = s ? s.skip : 0, c = o[t - p], r = this.value.findIndex((m) => M(m, c, a));
+      this._lastSelectedOrDeslectedItemIndex = o.findIndex((m) => M(m, c, a));
       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 && (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 = e, this.opened && this.base.togglePopup(o), !this.state.focused && !this.mobileMode && (o.data.focused = !0, this.focus());
+      const a = this.base.initState();
+      a.syntheticEvent = e, this.opened && this.base.togglePopup(a), !this.state.focused && !this.mobileMode && (a.data.focused = !0, this.focus());
       const s = this.value;
-      w(s, t, this.props.dataItemKey), this.triggerOnChange(s, o), this.applyState(o);
+      T(s, t, this.props.dataItemKey), this.triggerOnChange(s, a), this.applyState(a);
     }, this.itemFocus = (t, e) => {
-      const { allowCustom: o, virtual: s } = this.props, a = b(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);
+      const { allowCustom: a, virtual: s } = this.props, o = b(this.props), p = s ? s.skip : 0, c = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: r } = this.getFocusedState(), i = a && c, l = o[t - p];
+      l && r !== t ? this.state.focusedIndex !== t && (e.data.focusedIndex = t, e.data.activedescendant = w.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 });
+      const e = this.base.initState(), a = t.target.value;
+      e.syntheticEvent = t, this.props.filter === void 0 && (e.data.text = a), e.data.focusedIndex = void 0, this.opened || (this.base.togglePopup(e), this.setState({ currentValue: this.value })), this.base.filterChanged(a, 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;
-      E(o) && o !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this._lastSelectedOrDeslectedItemIndex = null, this.applyState(e);
+      const a = this.props.filter !== void 0 ? this.props.filter : this.state.text;
+      O(a) && a !== "" && 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 = b(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)
+      const { textField: e, groupField: a } = this.props, s = b(this.props), o = 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 && (o === u.left || o === u.right || o === u.home || o === u.end || o === u.delete || o === u.backspace) && !t.shiftKey)
         return this.onTagsNavigate(t, l);
       const m = () => {
         t.preventDefault(), this.base.togglePopup(l), this.applyState(l);
       };
       if (this.opened)
-        if (a === u.pageUp)
+        if (o === u.pageUp)
           t.preventDefault(), this.base.scrollPopupByPageSize(-1);
-        else if (a === u.pageDown)
+        else if (o === u.pageDown)
           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;
@@ -88,18 +87,18 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
           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 (t.altKey && a === u.up)
+        } else if (t.altKey && o === u.up)
           m();
-        else if (a === u.up || a === u.down) {
-          if (o !== "" && e)
+        else if (o === u.up || o === u.down) {
+          if (a !== "" && e)
             if (!this.props.skipDisabledItems && c)
-              this.onNavigate(l, a);
+              this.onNavigate(l, o);
             else {
               let d = 0;
-              if (a === u.down || a === u.right) {
+              if (o === u.down || o === u.right) {
                 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) {
+              } else if (o === u.up || o === u.left) {
                 let h;
                 if (i === -1)
                   h = s, d = s.findIndex((v) => !v.disabled && v[e]);
@@ -113,66 +112,66 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
               }
               if (d) {
                 const h = d - i;
-                this.onNavigate(l, a, h);
-              } else d !== void 0 && this.onNavigate(l, a);
+                this.onNavigate(l, o, h);
+              } else d !== void 0 && this.onNavigate(l, o);
             }
           else if (!this.props.skipDisabledItems && c)
-            this.onNavigate(l, a);
+            this.onNavigate(l, o);
           else {
             let d = null;
-            if (a === u.down || a === u.right)
+            if (o === u.down || o === u.right)
               d = s.slice(i + 1).find((h) => !h.disabled);
-            else if (a === u.up || a === u.left) {
+            else if (o === u.up || o === u.left) {
               const h = s.slice(0, i);
               for (d = h.pop(); d && d.disabled; )
                 d = h.pop();
             }
             if (d) {
               const h = d.id - i - 1;
-              this.onNavigate(l, a, h);
+              this.onNavigate(l, o, h);
             } else
-              this.onNavigate(l, a);
+              this.onNavigate(l, o);
           }
           this.applyState(l), t.preventDefault();
-        } else a === u.enter ? (t.preventDefault(), this.props.allowCustom && p && r === null ? this.customItemSelect(t) : r && r.disabled ? m() : this.selectFocusedItem(t)) : a === u.esc && m();
-      else t.altKey && a === u.down ? m() : a === u.esc && this.clearButtonClick(t);
+        } else o === u.enter ? (t.preventDefault(), this.props.allowCustom && p && r === null ? this.customItemSelect(t) : r && r.disabled ? m() : this.selectFocusedItem(t)) : o === u.esc && m();
+      else t.altKey && o === u.down ? m() : o === u.esc && this.clearButtonClick(t);
     }, this.listContainerContent = () => {
-      const { header: t, footer: e, allowCustom: o, size: s, groupStickyHeaderItemRender: a, groupField: p, list: c } = this.props, r = b(this.props), i = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: l } = this.getFocusedState(), m = o && i && /* @__PURE__ */ f.createElement(
+      const { header: t, footer: e, allowCustom: a, size: s, groupStickyHeaderItemRender: o, groupField: p, list: c } = this.props, r = b(this.props), i = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: l } = this.getFocusedState(), m = a && i && /* @__PURE__ */ f.createElement(
         "div",
         {
           className: I("k-list", {
-            [`k-list-${T[s] || s}`]: s
+            [`k-list-${D[s] || s}`]: s
           }),
           key: "customitem",
           onClick: this.customItemSelect,
-          onMouseDown: $
+          onMouseDown: A
         },
         /* @__PURE__ */ f.createElement(
           "div",
           {
-            className: I("k-list-item k-custom-item", { "k-focus": W(l) }),
+            className: I("k-list-item k-custom-item", { "k-focus": H(l) }),
             style: { fontStyle: "italic" }
           },
           i,
-          /* @__PURE__ */ f.createElement(R, { name: "plus", icon: at, style: { position: "absolute", right: "0.5em" } })
+          /* @__PURE__ */ f.createElement(L, { name: "plus", icon: st, style: { position: "absolute", right: "0.5em" } })
         )
       );
       let { group: d } = this.state;
-      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), m, /* @__PURE__ */ f.createElement(
+      return d === void 0 && p !== void 0 && (d = P(r[0], p)), /* @__PURE__ */ f.createElement(f.Fragment, null, t && /* @__PURE__ */ f.createElement("div", { className: "k-list-header" }, t), m, /* @__PURE__ */ f.createElement(
         "div",
         {
           className: I("k-list", {
-            [`k-list-${this.mobileMode ? "lg" : T[s] || s}`]: s,
+            [`k-list-${this.mobileMode ? "lg" : D[s] || s}`]: s,
             "k-virtual-list": this.base.vs.enabled
           })
         },
-        !c && d && r.length !== 0 && /* @__PURE__ */ f.createElement(rt, { group: d, groupMode: "modern", render: a }),
+        !c && d && r.length !== 0 && /* @__PURE__ */ f.createElement(nt, { group: d, groupMode: "modern", render: o }),
         this.renderList()
-      ), this.showLicenseWatermark && /* @__PURE__ */ f.createElement(X, null), e && /* @__PURE__ */ f.createElement("div", { className: "k-list-footer" }, e));
+      ), this.showLicenseWatermark && /* @__PURE__ */ f.createElement(Y, null), e && /* @__PURE__ */ f.createElement("div", { className: "k-list-footer" }, e));
     }, this.renderListContainer = () => {
-      const t = this.base, { dir: e } = this.props, o = b(this.props), s = this.base.getPopupSettings(), a = s.width !== void 0 ? s.width : t.popupWidth, p = {
+      const t = this.base, { dir: e } = this.props, a = b(this.props), s = this.base.getPopupSettings(), o = s.width !== void 0 ? s.width : t.popupWidth, p = {
         dir: e !== void 0 ? e : t.dirCalculated,
-        width: a,
+        width: o,
         popupSettings: {
           ...s,
           popupClass: I(s.popupClass, "k-list-container", "k-multiselect-popup"),
@@ -181,66 +180,56 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
           onOpen: this.onPopupOpened,
           onClose: this.onPopupClosed
         },
-        itemsCount: [o.length, this.value.length]
+        itemsCount: [a.length, this.value.length]
       };
-      return /* @__PURE__ */ f.createElement(lt, { ...p }, this.listContainerContent());
+      return /* @__PURE__ */ f.createElement(ot, { ...p }, this.listContainerContent());
     }, this.renderAdaptiveListContainer = () => {
-      const { adaptiveTitle: t, filterable: e, filter: o } = this.props, { windowWidth: s = 0 } = this.state, a = o !== void 0 ? o : this.state.text;
-      this.localization = bt(this);
-      const p = e ? /* @__PURE__ */ f.createElement(
-        It,
+      const { adaptiveTitle: t, adaptiveSubtitle: e, filterable: a, filter: s } = this.props, { windowWidth: o = 0 } = this.state, p = s !== void 0 ? s : this.state.text;
+      this.localization = mt(this);
+      const c = a ? /* @__PURE__ */ f.createElement(
+        gt,
         {
-          value: a,
-          ref: (r) => {
-            this._adaptiveInput = r && r.element;
+          value: p,
+          ref: (i) => {
+            this._adaptiveInput = i && i.element;
           },
           onChange: this.onChangeHandler,
           onKeyDown: this.onInputKeyDown,
-          size: this.props.size,
+          size: "large",
           rounded: this.props.rounded,
-          fillMode: this.props.fillMode
+          fillMode: this.props.fillMode,
+          placeholder: this.props.placeholder
         }
-      ) : null, c = {
-        title: t,
+      ) : null, r = {
+        title: t || this.props.label,
+        subTitle: e,
         expand: this.opened,
-        onClose: (r) => this.onCancel(r),
-        windowWidth: s,
-        mobileFilter: p,
-        footer: {
-          cancelText: this.localization.toLanguageString(
-            B,
-            V[B]
-          ),
-          onCancel: this.onCancel,
-          applyText: this.localization.toLanguageString(
-            A,
-            V[A]
-          ),
-          onApply: this.closePopup
-        }
+        onClose: (i) => this.closePopup(i),
+        windowWidth: o,
+        mobileFilter: c
       };
-      return /* @__PURE__ */ f.createElement(gt, { ...c }, /* @__PURE__ */ f.createElement(vt, null, /* @__PURE__ */ f.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
+      return /* @__PURE__ */ f.createElement(ut, { ...r }, /* @__PURE__ */ f.createElement(ft, null, /* @__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 o = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-      E(o) && o !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
+      const a = this.props.filter !== void 0 ? this.props.filter : this.state.text;
+      O(a) && a !== "" && 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;
-      E(o) && o !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
+      const a = this.props.filter !== void 0 ? this.props.filter : this.state.text;
+      O(a) && a !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
     }, this.renderList = () => {
       const {
         textField: t,
         listNoDataRender: e,
-        itemRender: o,
+        itemRender: a,
         groupHeaderItemRender: s,
-        dataItemKey: a,
+        dataItemKey: o,
         virtual: p = { skip: 0, total: void 0 }
       } = this.props, c = b(this.props), r = this.base.vs, { focusedIndex: i } = this.getFocusedState(), l = this.base.getPopupSettings(), m = `translateY(${r.translate}px)`;
       return /* @__PURE__ */ f.createElement(
-        dt,
+        at,
         {
           id: this.base.listBoxId,
           show: this.opened,
@@ -248,7 +237,7 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
           focusedIndex: i - p.skip,
           value: this.value,
           textField: t,
-          valueField: a,
+          valueField: o,
           optionsGuid: this.base.guid,
           groupField: this.props.groupField,
           groupMode: "modern",
@@ -261,10 +250,10 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
           key: "listKey",
           skip: p.skip,
           onClick: this.handleItemClick,
-          itemRender: o,
+          itemRender: a,
           groupHeaderItemRender: s,
           noDataRender: e,
-          onMouseDown: $,
+          onMouseDown: A,
           onBlur: this.handleBlur,
           onScroll: this.onScroll,
           wrapperRef: r.scrollerRef,
@@ -273,43 +262,43 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
         }
       );
     }, this.onScroll = (t) => {
-      const { vs: e, list: o } = this.base;
+      const { vs: e, list: a } = this.base;
       e.scrollHandler(t);
       const { groupField: s } = this.props;
-      let a = b(this.props);
-      if (!(!s || !a.length) && s) {
-        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++)
-          a[l] && a[l][s] && (i = a[l][s]);
+      let o = b(this.props);
+      if (!(!s || !o.length) && s) {
+        const p = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : a ? a.children[0].offsetHeight : 0), r = t.target.scrollTop - e.skip * p;
+        o = this.base.getGroupedDataModernMode(o, s);
+        let i = o[0][s];
+        for (let l = 1; l < o.length && !(p * l > r); l++)
+          o[l] && o[l][s] && (i = o[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: o } = this.props;
+      const e = this.props.filter !== void 0 ? this.props.filter : this.state.text, { textField: a } = this.props;
       if (!e)
         return;
       const s = this.base.initState();
       s.syntheticEvent = t;
-      const a = o ? { [o]: e } : e;
+      const o = a ? { [a]: e } : e;
       this.state.text !== void 0 && (s.data.text = ""), s.data.focusedIndex = void 0, this.base.filterChanged("", s);
-      const p = [...this.value, a];
+      const p = [...this.value, o];
       this.triggerOnChange(p, s), this.base.togglePopup(s), this.applyState(s);
     }, this.handleWrapperClick = (t) => {
       const e = this._input;
       !this.opened && e && this.focusElement(e);
-      const o = this.base.initState();
-      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);
+      const a = this.base.initState();
+      a.syntheticEvent = t, !this.state.focused && !this.mobileMode && (a.events.push({ type: "onFocus" }), a.data.focused = !0), this.mobileMode && (this.setState({ currentValue: this.tagsToRender }), this.mobileMode && window.setTimeout(() => this._adaptiveInput && this._adaptiveInput.focus(), 300)), this.base.togglePopup(a), this.applyState(a);
     }, this.handleItemClick = (t, e) => {
-      const o = this.base.initState();
-      o.syntheticEvent = e, this.handleItemSelect(t, o), this.props.autoClose && !this.mobileMode && this.base.togglePopup(o), e.stopPropagation(), this.applyState(o);
+      const a = this.base.initState();
+      a.syntheticEvent = e, this.handleItemSelect(t, a), this.props.autoClose && this.base.togglePopup(a), e.stopPropagation(), this.applyState(a);
     }, this.handleBlur = (t) => {
       if (!this.state.focused || this._skipFocusEvent)
         return;
-      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);
+      const e = this.base.initState(), { allowCustom: a, 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" })), !a && !s && this.state.text && (e.data.text = ""), this.applyState(e);
     }, this.handleFocus = (t) => {
       this._skipFocusEvent || this.base.handleFocus(t);
     }, this.onPopupOpened = () => {
@@ -320,7 +309,7 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
       }, 0);
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || xt
+        this.validity.valid ? "" : this.props.validationMessage || bt
       );
     }, this.validate(n);
   }
@@ -328,13 +317,13 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
     return this.props.id;
   }
   get document() {
-    if (L)
+    if (B)
       return this.element && this.element.ownerDocument || document;
   }
   validate(n) {
     if (n.filterable || n.virtual) {
       const t = [];
-      n.filterable && t.push("filterable"), n.virtual && t.push("virtualization"), this.showLicenseWatermark = !Z(ft, {
+      n.filterable && t.push("filterable"), n.virtual && t.push("virtualization"), this.showLicenseWatermark = !J(pt, {
         component: "MultiSelect",
         features: t
       });
@@ -351,8 +340,8 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
   /** @hidden */
   get tagsToRender() {
     const { tags: n, textField: t } = this.props, e = [];
-    return n === void 0 ? this.value.forEach((o) => {
-      e.push({ text: O(o, t), data: [o] });
+    return n === void 0 ? this.value.forEach((a) => {
+      e.push({ text: P(a, t), data: [a] });
     }) : e.push(...n), e;
   }
   /**
@@ -396,19 +385,19 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
   /** @hidden */
   componentDidUpdate(n, t) {
     var m;
-    const { virtual: e, groupField: o = "" } = this.props, s = b(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();
+    const { virtual: e, groupField: a = "" } = this.props, s = b(this.props), o = 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.validate(this.props), 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 = (m = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : m.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);
+      a !== "" && (h = (m = this.base.getGroupedDataModernMode(s, a)) == null ? void 0 : m.indexOf(d)), r && e ? this.base.scrollToVirtualItem(e, h - o) : r && !e ? (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][a], this), this.base.scrollToItem(h)) : this.opened && c && d && this.scrollToFocused && this.base.scrollToItem(h - o);
     }
     this.scrollToFocused = !1, this.setValidity();
   }
   /** @hidden */
   componentDidMount() {
     var n;
-    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);
+    this.observerResize = B && 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() {
@@ -417,7 +406,7 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
   }
   /** @hidden */
   onNavigate(n, t, e) {
-    const { allowCustom: o } = this.props, s = b(this.props), a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: p, focusedIndex: c } = this.getFocusedState(), r = o && a, i = W(p), l = this.base, m = l.vs;
+    const { allowCustom: a } = this.props, s = b(this.props), o = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: p, focusedIndex: c } = this.getFocusedState(), r = a && o, i = H(p), l = this.base, m = l.vs;
     if (this.opened && t === u.up && i)
       this.state.focusedIndex !== void 0 && (n.data.focusedIndex = void 0);
     else {
@@ -438,9 +427,9 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
       style: n,
       className: t,
       label: e,
-      dir: o,
+      dir: a,
       disabled: s,
-      textField: a,
+      textField: o,
       dataItemKey: p,
       virtual: c,
       size: r,
@@ -448,76 +437,78 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
       fillMode: l,
       loading: m,
       filter: d
-    } = this.props, { text: h, focused: v, focusedTag: x, currentValue: q } = this.state, C = this.base.vs, _ = this.props.id || this._inputId;
+    } = this.props, { text: h, focused: v, focusedTag: x, currentValue: W } = this.state, C = this.base.vs, K = 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 ? q : this.tagsToRender;
+    const S = this.mobileMode && this.opened ? W : this.tagsToRender;
     this.setItems(this.tagsToRender, this._tags);
-    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(
+    const N = !this.validityStyles || this.validity.valid, $ = !!(d !== void 0 ? d : h) || S && S.length > 0, [q, G] = z(this.props.prefix || f.Fragment), [U, j] = z(this.props.suffix || f.Fragment), R = /* @__PURE__ */ f.createElement(f.Fragment, null, /* @__PURE__ */ f.createElement(
       "div",
       {
         ref: this.componentRef,
         className: I("k-multiselect k-input", t, {
-          [`k-input-${T[r] || r}`]: r,
-          [`k-rounded-${yt[i] || i}`]: i,
+          [`k-input-${D[r] || r}`]: r,
+          [`k-rounded-${vt[i] || i}`]: i,
           [`k-input-${l}`]: l,
           "k-focus": v && !s,
-          "k-invalid": !K,
+          "k-invalid": !N,
           "k-disabled": s,
           "k-loading": m,
           "k-required": this.required
         }),
         style: e ? { ...n, width: void 0 } : n,
-        dir: o,
-        onFocus: this.handleFocus,
+        dir: a,
+        onFocus: (k) => {
+          this.mobileMode ? this.handleWrapperClick(k) : this.handleFocus(k);
+        },
         onBlur: this.handleBlur,
         onClick: this.handleWrapperClick,
-        onMouseDown: ct
+        onMouseDown: rt
       },
-      this.props.prefix && /* @__PURE__ */ f.createElement(U, { ...j }),
+      this.props.prefix && /* @__PURE__ */ f.createElement(q, { ...G }),
       /* @__PURE__ */ f.createElement("div", { className: I("k-input-values") }, /* @__PURE__ */ f.createElement(
         "div",
         {
-          className: I("k-chip-list", { [`k-chip-list-${T[r] || r}`]: r }),
+          className: I("k-chip-list", { [`k-chip-list-${D[r] || r}`]: r }),
           role: "listbox",
           id: "tagslist-" + this.base.guid
         },
         S && S.length > 0 && /* @__PURE__ */ f.createElement(
-          ht,
+          lt,
           {
             tagRender: this.props.tagRender,
             onTagDelete: this.onTagDelete,
             data: S,
             guid: this.base.guid,
-            focused: x ? S.find((Q) => z(Q, x, p)) : void 0,
+            focused: x ? S.find((k) => V(k, x, p)) : void 0,
             size: r
           }
         )
-      ), this.renderSearchBar(_)),
-      m && /* @__PURE__ */ f.createElement(R, { className: "k-input-loading-icon", name: "loading" }),
-      this.props.suffix && /* @__PURE__ */ f.createElement(Y, { ...J }),
-      G && /* @__PURE__ */ f.createElement(mt, { onClick: this.clearButtonClick }),
+      ), this.renderSearchBar(K)),
+      m && /* @__PURE__ */ f.createElement(L, { className: "k-input-loading-icon", name: "loading" }),
+      this.props.suffix && /* @__PURE__ */ f.createElement(U, { ...j }),
+      $ && /* @__PURE__ */ f.createElement(ct, { onClick: this.clearButtonClick }),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
     return e ? /* @__PURE__ */ f.createElement(
-      nt,
+      it,
       {
         label: e,
-        editorId: _,
-        editorValue: h || O(this.value[0], a),
-        editorValid: K,
+        editorId: K,
+        editorValue: h || P(this.value[0], o),
+        editorValid: N,
         editorDisabled: s,
         style: { width: n ? n.width : void 0 },
-        children: N
+        children: R
       }
-    ) : N;
+    ) : R;
   }
   renderSearchBar(n) {
-    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: m } = 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}-${m}`, x = {
+    const { activedescendant: t, focusedTag: e, currentValue: a } = this.state, { disabled: s, placeholder: o, 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: m } = this.getFocusedState(), d = this.value.length === 0 && !l ? o : void 0, h = a && a.length > 0 ? void 0 : o, v = t === w.TagsList && e !== void 0 ? `tag-${this.base.guid}-${e.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${m}`, x = {
       accessKey: this.props.accessKey,
       tabIndex: this.props.tabIndex
     };
     return /* @__PURE__ */ f.createElement(
-      pt,
+      dt,
       {
         id: n,
         size: Math.max((d || "").length, l.length, 1),
@@ -541,8 +532,8 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
     );
   }
   onTagsNavigate(n, t) {
-    const e = n.keyCode, { focusedTag: o } = this.state, s = this._tags, a = this.props.dataItemKey;
-    let p = o ? s.findIndex((i) => z(i, o, a)) : -1, c;
+    const e = n.keyCode, { focusedTag: a } = this.state, s = this._tags, o = this.props.dataItemKey;
+    let p = a ? s.findIndex((i) => V(i, a, o)) : -1, c;
     const r = p !== -1;
     if (e === u.left)
       r ? p = Math.max(0, p - 1) : p = s.length - 1, c = s[p];
@@ -555,25 +546,25 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
     else if (e === u.delete) {
       if (r) {
         const i = this.value;
-        w(i, s[p].data, a), this.triggerOnChange(i, t);
+        T(i, s[p].data, o), this.triggerOnChange(i, t);
       }
     } else if (e === u.backspace) {
       const i = this.value;
       if (r)
-        w(i, s[p].data, a), this.triggerOnChange(i, t);
+        T(i, s[p].data, o), this.triggerOnChange(i, t);
       else if (!r && s.length) {
         const l = s.pop();
-        w(i, l.data, a), this.triggerOnChange(i, t);
+        T(i, l.data, o), this.triggerOnChange(i, t);
       }
     }
-    c !== o && (t.data.focusedTag = c, t.data.activedescendant = k.TagsList), this.applyState(t);
+    c !== a && (t.data.focusedTag = c, t.data.activedescendant = w.TagsList), this.applyState(t);
   }
   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, t) {
-    const { virtual: e } = this.props, o = b(this.props), { focusedIndex: s } = t || this.getFocusedState(), a = e ? e.skip : 0;
-    o[s - a] !== void 0 && this.handleItemClick(s, n);
+    const { virtual: e } = this.props, a = b(this.props), { focusedIndex: s } = t || this.getFocusedState(), o = e ? e.skip : 0;
+    a[s - o] !== void 0 && this.handleItemClick(s, n);
   }
   setItems(n, t) {
     t.length = 0, t.push(...n);
@@ -581,10 +572,10 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
   getFocusedState() {
     const { focusedIndex: n } = this.state, t = this.props.filter !== void 0 ? this.props.filter : this.state.text, {
       allowCustom: e,
-      dataItemKey: o,
+      dataItemKey: a,
       virtual: s,
-      textField: a,
-      focusedItemIndex: p = ut,
+      textField: o,
+      focusedItemIndex: p = ht,
       skipDisabledItems: c
     } = this.props, r = b(this.props), i = s && s.skip || 0;
     let l;
@@ -604,7 +595,7 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
         /* CustomItem */
       };
     if (t)
-      return l = p(r, t, a), {
+      return l = p(r, t, o), {
         focusedItem: r[l],
         focusedIndex: l + i,
         focusedType: 1
@@ -612,14 +603,14 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
       };
     if (m.length) {
       const d = m[m.length - 1];
-      return l = r.findIndex((h) => M(h, d, o)), r[l] !== void 0 ? {
+      return l = r.findIndex((h) => M(h, d, a)), r[l] !== void 0 ? {
         focusedIndex: l + i,
         focusedItem: r[l],
         focusedType: 1
         /* ListItem */
       } : { focusedType: 0, focusedIndex: -1 };
-    } else if (c && a && !t && i === 0) {
-      const d = r.findIndex((h) => !h.disabled && h[a]);
+    } else if (c && o && !t && i === 0) {
+      const d = r.findIndex((h) => !h.disabled && h[o]);
       return {
         focusedIndex: d,
         focusedItem: r[d - i],
@@ -664,7 +655,7 @@ const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $
   }
 };
 y.displayName = "MultiSelect", y.propTypes = {
-  ...D.propTypes,
+  ...E.propTypes,
   autoClose: g.bool,
   value: g.arrayOf(g.any),
   defaultValue: g.arrayOf(g.any),
@@ -684,11 +675,12 @@ y.displayName = "MultiSelect", y.propTypes = {
   list: g.any,
   adaptive: g.bool,
   adaptiveTitle: g.string,
+  adaptiveSubtitle: g.string,
   onCancel: g.func,
   skipDisabledItems: g.bool,
   inputAttributes: g.object
 }, y.defaultProps = {
-  ...D.defaultProps,
+  ...E.defaultProps,
   autoClose: !0,
   required: !1,
   size: "medium",
@@ -699,16 +691,16 @@ y.displayName = "MultiSelect", y.propTypes = {
   prefix: void 0,
   suffix: void 0
 };
-let P = y;
-const St = tt(), Ct = et(
-  st(
-    St,
-    it(P)
+let _ = y;
+const It = Q(), yt = X(
+  Z(
+    It,
+    tt(_)
   )
 );
-Ct.displayName = "KendoReactMultiSelect";
+yt.displayName = "KendoReactMultiSelect";
 export {
-  Ct as MultiSelect,
-  St as MultiSelectPropsContext,
-  P as MultiSelectWithoutContext
+  yt as MultiSelect,
+  It as MultiSelectPropsContext,
+  _ as MultiSelectWithoutContext
 };