@progress/kendo-react-dropdowns 14.5.0-develop.14 → 14.5.0-develop.16

package/MultiSelect/MultiSelect.mjs

@@ -7,65 +7,67 @@
  */
 import * as g from "react";
 import v from "prop-types";
-import { createPropsContext as J, Keys as u, classNames as S, kendoThemeMaps as Q, IconWrap as B, WatermarkOverlay as X, getLicenseMessage as Z, canUseDOM as V, validatePackage as tt, subscribeToKendoPaste as et, withIdHOC as st, withPropsContext as it, withAdaptiveModeContext as ot } from "@progress/kendo-react-common";
-import { plusIcon as at } from "@progress/kendo-svg-icons";
-import { FloatingLabel as nt } from "@progress/kendo-react-labels";
-import lt from "../common/ListContainer.mjs";
-import dt from "../common/List.mjs";
-import rt from "../common/GroupStickyHeader.mjs";
-import ht from "./TagList.mjs";
-import pt from "../common/SearchBar.mjs";
-import O from "../common/DropDownBase.mjs";
+import { createPropsContext as et, Keys as u, classNames as S, kendoThemeMaps as st, IconWrap as B, WatermarkOverlay as it, getLicenseMessage as ot, canUseDOM as z, validatePackage as at, subscribeToKendoPaste as nt, withIdHOC as lt, withPropsContext as dt, withAdaptiveModeContext as rt } from "@progress/kendo-react-common";
+import { plusIcon as ht } from "@progress/kendo-svg-icons";
+import { FloatingLabel as pt } from "@progress/kendo-react-labels";
+import { provideLocalizationService as V, registerForLocalization as ct } from "@progress/kendo-react-intl";
+import ut from "../common/ListContainer.mjs";
+import ft from "../common/List.mjs";
+import gt from "../common/GroupStickyHeader.mjs";
+import mt from "./TagList.mjs";
+import vt from "../common/SearchBar.mjs";
+import E from "../common/DropDownBase.mjs";
 import { ActiveDescendant as w } from "../common/settings.mjs";
-import { getFilteredData as x, getItemIndexByText as ct, areSame as F, removeDataItems as D, isPresent as E, getItemValue as K, preventDefaultNonInputs as ut, matchTags as z, itemIndexStartsWith as ft } from "../common/utils.mjs";
-import { packageMetadata as A } from "../package-metadata.mjs";
-import gt from "../common/ClearButton.mjs";
-import { AdaptiveMode as mt } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as vt } from "@progress/kendo-react-layout";
-import bt from "../common/ListFilter.mjs";
-import H from "../common/withCustomComponent.mjs";
-const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W = (M) => M.preventDefault(), $ = (M) => M === 2, C = class C extends g.Component {
+import { getFilteredData as x, getItemIndexByText as bt, areSame as F, removeDataItems as D, isPresent as K, getItemValue as _, preventDefaultNonInputs as It, matchTags as A, itemIndexStartsWith as yt } from "../common/utils.mjs";
+import { packageMetadata as H } from "../package-metadata.mjs";
+import xt from "../common/ClearButton.mjs";
+import { AdaptiveMode as St } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as Ct } from "@progress/kendo-react-layout";
+import kt from "../common/ListFilter.mjs";
+import $ from "../common/withCustomComponent.mjs";
+import { listAriaLabel as W, messages as q, chipListAriaLabel as G } from "../messages/index.mjs";
+const { sizeMap: P, roundedMap: wt } = st, Tt = "Please enter a valid value!", U = (O) => O.preventDefault(), j = (O) => O === 2, C = class C extends g.Component {
   constructor(l) {
     super(l), this.state = {
       activedescendant: w.PopupList,
       currentValue: []
-    }, this._element = null, this._valueItemsDuringOnChange = null, this.base = new O(this), this._tags = [], this._input = null, this._adaptiveInput = null, this._skipFocusEvent = !1, this._lastSelectedOrDeslectedItemIndex = null, this.itemHeight = 0, this.scrollToFocused = !1, this.showLicenseWatermark = !1, this.focus = () => {
+    }, this._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.showLicenseWatermark = !1, this.focus = () => {
       this._input && this._input.focus();
     }, this.handleKendoPasteValue = (t) => {
       if (t == null)
         return;
-      const e = x(this.props), { textField: o, dataItemKey: s } = this.props, a = String(t).split(",").map((h) => h.trim()).filter((h) => h).reduce((h, r) => {
-        const d = ct(e, r, o, !1, !0);
+      const e = x(this.props), { textField: o, dataItemKey: s } = this.props, a = String(t).split(",").map((r) => r.trim()).filter((r) => r).reduce((r, p) => {
+        const d = bt(e, p, o, !1, !0);
         if (d !== -1) {
           const n = e[d];
-          h.some((p) => F(p, n, s)) || h.push(n);
+          r.some((h) => F(h, n, s)) || r.push(n);
         }
-        return h;
+        return r;
       }, []);
       if (a.length === 0)
         return;
       const i = this.base.initState();
       i.syntheticEvent = { target: this._element }, this.triggerOnChange(a, i), this.applyState(i);
     }, this.handleItemSelect = (t, e) => {
-      const { dataItemKey: o, virtual: s } = this.props, a = x(this.props), i = s ? s.skip : 0, h = a[t - i], r = this.value.findIndex((p) => F(p, h, o));
-      this._lastSelectedOrDeslectedItemIndex = a.findIndex((p) => F(p, h, o));
+      const { dataItemKey: o, virtual: s } = this.props, a = x(this.props), i = s ? s.skip : 0, r = a[t - i], p = this.value.findIndex((h) => F(h, r, o));
+      this._lastSelectedOrDeslectedItemIndex = a.findIndex((h) => F(h, r, o));
       let d = [];
-      r !== -1 ? (d = this.value, d.splice(r, 1)) : d = [...this.value, h], (this.props.filter !== void 0 ? this.props.filter : this.state.text) && !this.mobileMode && (this.state.text && (e.data.text = ""), this.base.filterChanged("", e)), this._adaptiveInput && this._adaptiveInput.blur(), this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.triggerOnChange(d, e), this.base.triggerPageChangeCornerItems(h, e);
+      p !== -1 ? (d = this.value, d.splice(p, 1)) : d = [...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(d, e), this.base.triggerPageChangeCornerItems(r, 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 s = this.value;
       D(s, t, this.props.dataItemKey), this.triggerOnChange(s, o), this.applyState(o);
     }, this.itemFocus = (t, e) => {
-      const { allowCustom: o, virtual: s } = this.props, a = x(this.props), i = s ? s.skip : 0, h = s ? s.pageSize : 0, r = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: d } = this.getFocusedState(), n = o && r, p = a[t - i];
-      if (s && !p && t >= 0 && d !== t) {
-        const f = Math.floor(t / h) * h;
+      const { allowCustom: o, virtual: s } = this.props, a = x(this.props), i = s ? s.skip : 0, r = s ? s.pageSize : 0, p = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: d } = this.getFocusedState(), n = o && p, h = a[t - i];
+      if (s && !h && t >= 0 && d !== t) {
+        const f = Math.floor(t / r) * r;
         if (f !== i) {
-          this.state.focusedIndex !== t && (e.data.focusedIndex = t, e.data.activedescendant = w.PopupList), this.base.triggerOnPageChange(e, f, h);
+          this.state.focusedIndex !== t && (e.data.focusedIndex = t, e.data.activedescendant = w.PopupList), this.base.triggerOnPageChange(e, f, r);
           return;
         }
       }
-      p && d !== t ? this.state.focusedIndex !== t && (e.data.focusedIndex = t, e.data.activedescendant = w.PopupList) : n && t === -1 && this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.base.triggerPageChangeCornerItems(p, e);
+      h && d !== t ? this.state.focusedIndex !== t && (e.data.focusedIndex = t, e.data.activedescendant = w.PopupList) : n && t === -1 && this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.base.triggerPageChangeCornerItems(h, e);
     }, this.componentRef = (t) => {
       this._element = t, this.base.wrapper = t;
     }, this.searchbarRef = (t) => {
@@ -78,13 +80,13 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
       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);
+      K(o) && o !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this._lastSelectedOrDeslectedItemIndex = null, this.applyState(e);
     }, this.onInputKeyDown = (t) => {
-      const { textField: e, groupField: o, virtual: s } = this.props, a = x(this.props), i = t.keyCode, h = this.props.filter !== void 0 ? this.props.filter : this.state.text, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: d, focusedIndex: n } = this.getFocusedState(), p = this.base.initState();
-      if (p.syntheticEvent = t, !h && this.value.length > 0 && (i === u.left || i === u.right || i === u.home || i === u.end || i === u.delete || i === u.backspace) && !t.shiftKey)
-        return this.onTagsNavigate(t, p);
+      const { textField: e, groupField: o, virtual: s } = this.props, a = x(this.props), i = t.keyCode, r = this.props.filter !== void 0 ? this.props.filter : this.state.text, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: d, focusedIndex: n } = this.getFocusedState(), h = this.base.initState();
+      if (h.syntheticEvent = t, !r && this.value.length > 0 && (i === u.left || i === u.right || i === u.home || i === u.end || i === u.delete || i === u.backspace) && !t.shiftKey)
+        return this.onTagsNavigate(t, h);
       const f = () => {
-        t.preventDefault(), this.base.togglePopup(p), this.applyState(p);
+        t.preventDefault(), this.base.togglePopup(h), this.applyState(h);
       };
       if (this.opened)
         if (i === u.pageUp)
@@ -93,28 +95,28 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
           t.preventDefault(), this.base.scrollPopupByPageSize(1);
         else if ((t.ctrlKey || t.metaKey) && t.code === "KeyA") {
           const b = (this.state.value && this.state.value.length) === a.length ? [] : a;
-          this.updateStateOnKeyboardNavigation(b, p);
+          this.updateStateOnKeyboardNavigation(b, h);
         } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === u.end) {
           const c = a.slice(this.getFocusedState().focusedIndex);
-          this.itemFocus(a.length - 1, p), this.updateStateOnKeyboardNavigation(c, p);
+          this.itemFocus(a.length - 1, h), this.updateStateOnKeyboardNavigation(c, h);
         } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === u.home) {
           const c = a.slice(0, this.getFocusedState().focusedIndex + 1);
-          this.itemFocus(0, p), this.updateStateOnKeyboardNavigation(c, p);
+          this.itemFocus(0, h), this.updateStateOnKeyboardNavigation(c, h);
         } else if (t.shiftKey && t.keyCode === u.up) {
           let c;
           const b = this.getLastSelectedOrDeselectedIndex(1, n);
-          b === null ? c = n !== 0 ? a.slice(n - 1, n) : [a[n]] : b === n ? c = [a[b - 1]] : n >= 0 && (c = b > n ? a.slice(n - 1, b) : a.slice(b - 1, n)), c && c.length > 0 && (n >= 1 && this.itemFocus(n - 1, p), this.updateStateOnKeyboardNavigation(c, p));
+          b === null ? c = n !== 0 ? a.slice(n - 1, n) : [a[n]] : b === n ? c = [a[b - 1]] : n >= 0 && (c = b > n ? a.slice(n - 1, b) : a.slice(b - 1, n)), c && c.length > 0 && (n >= 1 && this.itemFocus(n - 1, h), this.updateStateOnKeyboardNavigation(c, h));
         } else if (t.shiftKey && t.keyCode === u.down) {
           let c;
           const b = this.getLastSelectedOrDeselectedIndex(0, n);
-          b === null ? c = n !== a.length - 1 ? a.slice(n, n + 1) : [a[n]] : b === n ? c = a.slice(n, n + 2) : n >= 0 && (c = b > n ? a.slice(n + 1, b + 1) : a.slice(b, n + 2)), c && c.length >= 1 && (this.itemFocus(n + 1, p), this.updateStateOnKeyboardNavigation(c, p));
+          b === null ? c = n !== a.length - 1 ? a.slice(n, n + 1) : [a[n]] : b === n ? c = a.slice(n, n + 2) : n >= 0 && (c = b > n ? a.slice(n + 1, b + 1) : a.slice(b, n + 2)), c && c.length >= 1 && (this.itemFocus(n + 1, h), this.updateStateOnKeyboardNavigation(c, h));
         } else if (t.altKey && i === u.up)
           f();
         else if (i === u.up || i === u.down) {
           const c = s ? s.skip : 0, b = n - c;
           if (o !== "" && e)
-            if (!this.props.skipDisabledItems && r)
-              this.onNavigate(p, i);
+            if (!this.props.skipDisabledItems && p)
+              this.onNavigate(h, i);
             else {
               let m = 0;
               if (i === u.down || i === u.right) {
@@ -134,12 +136,12 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
               }
               if (m) {
                 const I = m - n;
-                this.onNavigate(p, i, I);
+                this.onNavigate(h, i, I);
               } else
-                this.onNavigate(p, i);
+                this.onNavigate(h, i);
             }
-          else if (!this.props.skipDisabledItems && r)
-            this.onNavigate(p, i);
+          else if (!this.props.skipDisabledItems && p)
+            this.onNavigate(h, i);
           else {
             let m = null;
             if (i === u.down || i === u.right)
@@ -153,17 +155,17 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
               const I = a.indexOf(m);
               if (I !== -1) {
                 const y = c + I - n;
-                this.onNavigate(p, i, y);
+                this.onNavigate(h, i, y);
               } else
-                this.onNavigate(p, i);
+                this.onNavigate(h, i);
             } else
-              this.onNavigate(p, i);
+              this.onNavigate(h, i);
           }
-          this.applyState(p), t.preventDefault();
-        } else i === u.enter ? (t.preventDefault(), this.props.allowCustom && h && d === null ? this.customItemSelect(t) : d && d.disabled ? f() : this.selectFocusedItem(t)) : i === u.esc && f();
+          this.applyState(h), t.preventDefault();
+        } else i === u.enter ? (t.preventDefault(), this.props.allowCustom && r && d === null ? this.customItemSelect(t) : d && d.disabled ? f() : this.selectFocusedItem(t)) : i === u.esc && f();
       else t.altKey && i === u.down ? f() : i === u.esc && this.clearButtonClick(t);
     }, this.listContainerContent = () => {
-      const { header: t, footer: e, allowCustom: o, size: s, groupStickyHeaderItemRender: a, groupField: i, list: h } = this.props, r = x(this.props), d = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: n } = this.getFocusedState(), p = o && d && /* @__PURE__ */ g.createElement(
+      const { header: t, footer: e, allowCustom: o, size: s, groupStickyHeaderItemRender: a, groupField: i, list: r } = this.props, p = x(this.props), d = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: n } = this.getFocusedState(), h = o && d && /* @__PURE__ */ g.createElement(
         "div",
         {
           className: S("k-list", {
@@ -171,20 +173,20 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
           }),
           key: "customitem",
           onClick: this.customItemSelect,
-          onMouseDown: W
+          onMouseDown: U
         },
         /* @__PURE__ */ g.createElement(
           "div",
           {
-            className: S("k-list-item k-custom-item", { "k-focus": $(n) }),
+            className: S("k-list-item k-custom-item", { "k-focus": j(n) }),
             style: { fontStyle: "italic" }
           },
           d,
-          /* @__PURE__ */ g.createElement(B, { name: "plus", icon: at, style: { position: "absolute", right: "0.5em" } })
+          /* @__PURE__ */ g.createElement(B, { name: "plus", icon: ht, style: { position: "absolute", right: "0.5em" } })
         )
       );
       let { group: f } = this.state;
-      return f === void 0 && i !== void 0 && (f = K(r[0], i)), /* @__PURE__ */ g.createElement(g.Fragment, null, t && /* @__PURE__ */ g.createElement("div", { className: "k-list-header" }, t), p, /* @__PURE__ */ g.createElement(
+      return f === void 0 && i !== void 0 && (f = _(p[0], i)), /* @__PURE__ */ g.createElement(g.Fragment, null, t && /* @__PURE__ */ g.createElement("div", { className: "k-list-header" }, t), h, /* @__PURE__ */ g.createElement(
         "div",
         {
           className: S("k-list", {
@@ -192,9 +194,9 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
             "k-virtual-list": this.base.vs.enabled
           })
         },
-        !h && f && r.length !== 0 && /* @__PURE__ */ g.createElement(rt, { group: f, render: a }),
+        !r && f && p.length !== 0 && /* @__PURE__ */ g.createElement(gt, { group: f, render: a }),
         this.renderList()
-      ), this.showLicenseWatermark && /* @__PURE__ */ g.createElement(X, { message: this.licenseMessage }), e && /* @__PURE__ */ g.createElement("div", { className: "k-list-footer" }, e));
+      ), this.showLicenseWatermark && /* @__PURE__ */ g.createElement(it, { message: this.licenseMessage }), e && /* @__PURE__ */ g.createElement("div", { className: "k-list-footer" }, e));
     }, this.renderListContainer = () => {
       const t = this.base, { dir: e } = this.props, o = x(this.props), s = this.base.getPopupSettings(), a = s.width !== void 0 ? s.width : t.popupWidth, i = {
         dir: e !== void 0 ? e : t.dirCalculated,
@@ -209,10 +211,10 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
         },
         itemsCount: [o.length, this.value.length]
       };
-      return /* @__PURE__ */ g.createElement(lt, { ...i }, this.listContainerContent());
+      return /* @__PURE__ */ g.createElement(ut, { ...i }, this.listContainerContent());
     }, this.renderAdaptiveListContainer = () => {
-      const { adaptiveTitle: t, adaptiveSubtitle: e, filterable: o, filter: s } = this.props, { windowWidth: a = 0 } = this.state, i = s !== void 0 ? s : this.state.text, h = o ? /* @__PURE__ */ g.createElement(
-        bt,
+      const { adaptiveTitle: t, adaptiveSubtitle: e, filterable: o, filter: s } = this.props, { windowWidth: a = 0 } = this.state, i = s !== void 0 ? s : this.state.text, r = o ? /* @__PURE__ */ g.createElement(
+        kt,
         {
           value: i,
           ref: (d) => {
@@ -225,64 +227,65 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
           fillMode: this.props.fillMode,
           placeholder: this.props.placeholder
         }
-      ) : null, r = {
+      ) : null, p = {
         title: t || this.props.label,
         subTitle: e,
         expand: this.opened,
         onClose: (d) => this.closePopup(d),
         windowWidth: a,
-        mobileFilter: h
+        mobileFilter: r
       };
-      return /* @__PURE__ */ g.createElement(mt, { ...r }, /* @__PURE__ */ g.createElement(vt, null, /* @__PURE__ */ g.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
+      return /* @__PURE__ */ g.createElement(St, { ...p }, /* @__PURE__ */ g.createElement(Ct, null, /* @__PURE__ */ g.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
     }, this.closePopup = (t) => {
       const e = this.base.initState();
       e.syntheticEvent = t, t.stopPropagation(), this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.opened && this.base.togglePopup(e), e.events.push({ type: "onClose" });
       const o = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-      E(o) && o !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
+      K(o) && o !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
     }, this.onCancel = (t) => {
       const e = this.base.initState();
       e.syntheticEvent = t, t.stopPropagation(), this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.opened && this.base.togglePopup(e), e.events.push({ type: "onCancel" });
       const o = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-      E(o) && o !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
+      K(o) && o !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
     }, this.renderList = () => {
-      const {
-        textField: t,
-        listNoDataRender: e,
-        itemRender: o,
-        groupHeaderItemRender: s,
-        dataItemKey: a,
-        virtual: i = { skip: 0, total: void 0 }
-      } = this.props, h = x(this.props), r = this.base.vs, { focusedIndex: d } = this.getFocusedState(), n = this.base.getPopupSettings(), p = `translateY(${r.translate}px)`;
+      const t = V(this), {
+        textField: e,
+        listNoDataRender: o,
+        itemRender: s,
+        groupHeaderItemRender: a,
+        dataItemKey: i,
+        virtual: r = { skip: 0, total: void 0 }
+      } = this.props, p = x(this.props), d = this.base.vs, { focusedIndex: n } = this.getFocusedState(), h = this.base.getPopupSettings(), f = `translateY(${d.translate}px)`;
       return /* @__PURE__ */ g.createElement(
-        dt,
+        ft,
         {
           id: this.base.listBoxId,
           show: this.opened,
-          data: h.slice(),
-          focusedIndex: d - i.skip,
+          data: p.slice(),
+          focusedIndex: n - r.skip,
           value: this.value,
-          textField: t,
-          valueField: a,
+          textField: e,
+          valueField: i,
           optionsGuid: this.base.guid,
           groupField: this.props.groupField,
-          listRef: (f) => {
-            r.list = this.base.list = f;
+          ariaLabel: t.toLanguageString(W, q[W]),
+          listRef: (c) => {
+            d.list = this.base.list = c;
           },
-          wrapperStyle: this.mobileMode ? {} : { maxHeight: n.height },
+          wrapperStyle: this.mobileMode ? {} : { maxHeight: h.height },
           wrapperCssClass: "k-list-content",
-          listStyle: r.enabled ? { transform: p } : void 0,
+          listStyle: d.enabled ? { transform: f } : void 0,
           key: "listKey",
-          skip: i.skip,
+          skip: r.skip,
           onClick: this.handleItemClick,
-          itemRender: o,
-          groupHeaderItemRender: s,
-          noDataRender: e,
-          onMouseDown: W,
+          itemRender: s,
+          groupHeaderItemRender: a,
+          noDataRender: o,
+          onMouseDown: U,
           onBlur: this.handleBlur,
           onScroll: this.onScroll,
-          wrapperRef: r.scrollerRef,
+          wrapperRef: d.scrollerRef,
           scroller: this.base.renderScrollElement(),
-          ariaSetSize: i.total
+          ariaSetSize: r.total
         }
       );
     }, this.onScroll = (t) => {
@@ -291,10 +294,10 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
       const { groupField: s } = this.props;
       let a = x(this.props);
       if (!(!s || !a.length) && s) {
-        const i = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : o ? o.children[0].offsetHeight : 0), r = t.target.scrollTop - e.skip * i;
+        const i = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : o ? o.children[0].offsetHeight : 0), p = t.target.scrollTop - e.skip * i;
         a = this.base.getGroupedDataModernMode(a, s);
         let d = a[0][s];
-        for (let n = 1; n < a.length && !(i * n > r); n++)
+        for (let n = 1; n < a.length && !(i * n > p); n++)
           a[n] && a[n][s] && (d = a[n][s]);
         d !== this.state.group && this.setState({
           group: d
@@ -333,21 +336,21 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
       }, 0);
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || yt
+        this.validity.valid ? "" : this.props.validationMessage || Tt
       );
-    }, this.validate(l), this.licenseMessage = Z(A);
+    }, this.validate(l), this.licenseMessage = ot(H);
   }
   get _inputId() {
     return this.props.id;
   }
   get document() {
-    if (V)
+    if (z)
       return this.element && this.element.ownerDocument || document;
   }
   validate(l) {
     if (l.filterable || l.virtual) {
       const t = [];
-      l.filterable && t.push("filterable"), l.virtual && t.push("virtualization"), this.showLicenseWatermark = !tt(A, {
+      l.filterable && t.push("filterable"), l.virtual && t.push("virtualization"), this.showLicenseWatermark = !at(H, {
         component: "MultiSelect",
         features: t
       });
@@ -365,7 +368,7 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
   get tagsToRender() {
     const { tags: l, textField: t } = this.props, e = [];
     return l === void 0 ? this.value.forEach((o) => {
-      e.push({ text: K(o, t), data: [o] });
+      e.push({ text: _(o, t), data: [o] });
     }) : e.push(...l), e;
   }
   /**
@@ -408,22 +411,22 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
   }
   /** @hidden */
   componentDidUpdate(l, t) {
-    var p;
-    const { virtual: e, groupField: o = "" } = this.props, s = x(this.props), a = e ? e.skip : 0, i = l.virtual ? l.virtual.total : 0, h = l.opened !== void 0 ? l.opened : t.opened, r = !h && this.opened, d = h && !this.opened, n = this.base.getPopupSettings();
+    var h;
+    const { virtual: e, groupField: o = "" } = this.props, s = x(this.props), a = e ? e.skip : 0, i = l.virtual ? l.virtual.total : 0, r = l.opened !== void 0 ? l.opened : t.opened, p = !r && this.opened, d = r && !this.opened, n = this.base.getPopupSettings();
     if (this.validate(this.props), this.base.didUpdate(), !n.animate && d && this.onPopupClosed(), e && e.total !== i)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
       let { focusedItem: f, focusedIndex: c } = this.getFocusedState();
-      o !== "" && (c = (p = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : p.indexOf(f)), r && e ? this.base.scrollToVirtualItem(e, c - a) : r && !e ? (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][o], this), this.base.scrollToItem(c)) : this.opened && h && f && this.scrollToFocused && this.base.scrollToItem(c - a);
+      o !== "" && (c = (h = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : h.indexOf(f)), p && e ? this.base.scrollToVirtualItem(e, c - a) : p && !e ? (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][o], this), this.base.scrollToItem(c)) : this.opened && r && f && this.scrollToFocused && this.base.scrollToItem(c - a);
     }
     this.scrollToFocused = !1, this.setValidity();
   }
   /** @hidden */
   componentDidMount() {
     var t;
-    this.observerResize = V && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (t = this.document) != null && t.body && this.observerResize && this.observerResize.observe(this.document.body);
+    this.observerResize = z && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (t = this.document) != null && t.body && this.observerResize && this.observerResize.observe(this.document.body);
     const l = this.props.name || this.props.id;
-    this.KendoPasteSubscription = et(this._element, {
+    this.KendoPasteSubscription = nt(this._element, {
       fieldName: l,
       onValueChange: (e) => {
         this.handleKendoPasteValue(e);
@@ -437,15 +440,15 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
   }
   /** @hidden */
   onNavigate(l, t, e) {
-    const { allowCustom: o } = this.props, s = x(this.props), a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: i, focusedIndex: h } = this.getFocusedState(), r = o && a, d = $(i), n = this.base, p = n.vs;
+    const { allowCustom: o } = this.props, s = x(this.props), a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: i, focusedIndex: r } = this.getFocusedState(), p = o && a, d = j(i), n = this.base, h = n.vs;
     if (this.opened && t === u.up && d)
       this.state.focusedIndex !== void 0 && (l.data.focusedIndex = void 0);
     else {
       const f = n.navigation.navigate({
         keyCode: t,
-        current: h,
-        max: (p.enabled ? p.total : s.length) - 1,
-        min: r ? -1 : 0,
+        current: r,
+        max: (h.enabled ? h.total : s.length) - 1,
+        min: p ? -1 : 0,
         skipItems: e || void 0
       });
       f !== void 0 && (this.itemFocus(f, l), this.scrollToFocused = !0);
@@ -462,28 +465,28 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
       disabled: s,
       textField: a,
       dataItemKey: i,
-      virtual: h,
-      size: r,
+      virtual: r,
+      size: p,
       rounded: d,
       fillMode: n,
-      loading: p,
+      loading: h,
       filter: f
-    } = this.props, { text: c, focused: b, focusedTag: m, currentValue: I } = this.state, y = this.base.vs, N = this.props.id || this._inputId;
-    y.enabled = h !== void 0, h !== void 0 && (y.skip = h.skip, y.total = h.total, y.pageSize = h.pageSize);
+    } = this.props, { text: c, focused: b, focusedTag: m, currentValue: I } = this.state, y = this.base.vs, L = this.props.id || this._inputId;
+    y.enabled = r !== void 0, r !== void 0 && (y.skip = r.skip, y.total = r.total, y.pageSize = r.pageSize);
     const k = this.mobileMode && this.opened ? I : this.tagsToRender;
     this.setItems(this.tagsToRender, this._tags);
-    const R = !this.validityStyles || this.validity.valid, q = !!(f !== void 0 ? f : c) || k && k.length > 0, [G, U] = H(this.props.prefix || g.Fragment), [j, Y] = H(this.props.suffix || g.Fragment), L = /* @__PURE__ */ g.createElement(g.Fragment, null, /* @__PURE__ */ g.createElement(
+    const N = !this.validityStyles || this.validity.valid, Y = V(this), J = !!(f !== void 0 ? f : c) || k && k.length > 0, [Q, X] = $(this.props.prefix || g.Fragment), [Z, tt] = $(this.props.suffix || g.Fragment), R = /* @__PURE__ */ g.createElement(g.Fragment, null, /* @__PURE__ */ g.createElement(
       "div",
       {
         ref: this.componentRef,
         className: S("k-multiselect k-input", t, {
-          [`k-input-${P[r] || r}`]: r,
-          [`k-rounded-${It[d] || d}`]: d,
+          [`k-input-${P[p] || p}`]: p,
+          [`k-rounded-${wt[d] || d}`]: d,
           [`k-input-${n}`]: n,
           "k-focus": b && !s,
-          "k-invalid": !R,
+          "k-invalid": !N,
           "k-disabled": s,
-          "k-loading": p,
+          "k-loading": h,
           "k-required": this.required
         }),
         style: e ? { ...l, width: void 0 } : l,
@@ -493,53 +496,55 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
         },
         onBlur: this.handleBlur,
         onClick: this.handleWrapperClick,
-        onMouseDown: ut
+        onMouseDown: It
       },
-      this.props.prefix && /* @__PURE__ */ g.createElement(G, { ...U }),
+      this.props.prefix && /* @__PURE__ */ g.createElement(Q, { ...X }),
       /* @__PURE__ */ g.createElement("div", { className: S("k-input-values") }, /* @__PURE__ */ g.createElement(
         "div",
         {
-          className: S("k-chip-list", { [`k-chip-list-${P[r] || r}`]: r }),
+          className: S("k-chip-list", { [`k-chip-list-${P[p] || p}`]: p }),
           role: "listbox",
+          "aria-label": Y.toLanguageString(G, q[G]),
+          "aria-orientation": "horizontal",
           id: "tagslist-" + this.base.guid
         },
         k && k.length > 0 && /* @__PURE__ */ g.createElement(
-          ht,
+          mt,
           {
             tagRender: this.props.tagRender,
             onTagDelete: this.onTagDelete,
             data: k,
             guid: this.base.guid,
-            focused: m ? k.find((T) => z(T, m, i)) : void 0,
-            size: r
+            focused: m ? k.find((T) => A(T, m, i)) : void 0,
+            size: p
           }
         )
-      ), this.renderSearchBar(N)),
-      p && /* @__PURE__ */ g.createElement(B, { className: "k-input-loading-icon", name: "loading" }),
-      this.props.suffix && /* @__PURE__ */ g.createElement(j, { ...Y }),
-      q && /* @__PURE__ */ g.createElement(gt, { onClick: this.clearButtonClick }),
+      ), this.renderSearchBar(L)),
+      h && /* @__PURE__ */ g.createElement(B, { className: "k-input-loading-icon", name: "loading" }),
+      this.props.suffix && /* @__PURE__ */ g.createElement(Z, { ...tt }),
+      J && /* @__PURE__ */ g.createElement(xt, { onClick: this.clearButtonClick }),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
     return e ? /* @__PURE__ */ g.createElement(
-      nt,
+      pt,
       {
         label: e,
-        editorId: N,
-        editorValue: c || K(this.value[0], a),
-        editorValid: R,
+        editorId: L,
+        editorValue: c || _(this.value[0], a),
+        editorValid: N,
         editorDisabled: s,
         style: { width: l ? l.width : void 0 },
-        children: L
+        children: R
       }
-    ) : L;
+    ) : R;
   }
   renderSearchBar(l) {
-    const { activedescendant: t, focusedTag: e, currentValue: o } = this.state, { disabled: s, placeholder: a, ariaDescribedBy: i, ariaLabelledBy: h, ariaLabel: r, inputAttributes: d } = this.props, n = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: p } = this.getFocusedState(), f = this.value.length === 0 && !n ? a : void 0, c = o && o.length > 0 ? void 0 : a, b = t === w.TagsList && e !== void 0 ? `tag-${this.base.guid}-${e.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${p}`, m = {
+    const { activedescendant: t, focusedTag: e, currentValue: o } = this.state, { disabled: s, placeholder: a, ariaDescribedBy: i, ariaLabelledBy: r, ariaLabel: p, inputAttributes: d } = this.props, n = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: h } = this.getFocusedState(), f = this.value.length === 0 && !n ? a : void 0, c = o && o.length > 0 ? void 0 : a, b = t === w.TagsList && e !== void 0 ? `tag-${this.base.guid}-${e.text.replace(/\s+/g, "-")}` : `k-${this.base.guid}-item-${h + 1}`, m = i ? ` ${i}` : "", I = this.value.length > 0 ? `tagslist-${this.base.guid}${m}` : i, y = {
       accessKey: this.props.accessKey,
       tabIndex: this.props.tabIndex
     };
     return /* @__PURE__ */ g.createElement(
-      pt,
+      vt,
       {
         id: l,
         name: this.props.name,
@@ -551,45 +556,46 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
         ref: this.searchbarRef,
         disabled: s,
         expanded: this.opened,
-        owns: this.base.listBoxId,
+        ariaControls: this.base.listBoxId,
         role: "combobox",
         activedescendant: b,
-        ariaDescribedBy: `tagslist-${this.base.guid}${i ? " " + i : ""}`,
-        ariaLabelledBy: h,
+        ariaDescribedBy: I,
+        ariaLabelledBy: r,
         ariaRequired: this.required,
-        ariaLabel: r,
+        ariaLabel: p,
+        ariaAutoComplete: "list",
         inputAttributes: d,
-        ...m
+        ...y
       }
     );
   }
   onTagsNavigate(l, t) {
     const e = l.keyCode, { focusedTag: o } = this.state, s = this._tags, a = this.props.dataItemKey;
-    let i = o ? s.findIndex((d) => z(d, o, a)) : -1, h;
-    const r = i !== -1;
+    let i = o ? s.findIndex((d) => A(d, o, a)) : -1, r;
+    const p = i !== -1;
     if (e === u.left)
-      r ? i = Math.max(0, i - 1) : i = s.length - 1, h = s[i];
+      p ? i = Math.max(0, i - 1) : i = s.length - 1, r = s[i];
     else if (e === u.right)
-      i === s.length - 1 ? h = void 0 : r && (i = Math.min(s.length - 1, i + 1), h = s[i]);
+      i === s.length - 1 ? r = void 0 : p && (i = Math.min(s.length - 1, i + 1), r = s[i]);
     else if (e === u.home && !l.shiftKey)
-      h = s[0];
+      r = s[0];
     else if (e === u.end && !l.shiftKey)
-      h = s[s.length - 1];
+      r = s[s.length - 1];
     else if (e === u.delete) {
-      if (r) {
+      if (p) {
         const d = this.value;
         D(d, s[i].data, a), this.triggerOnChange(d, t);
       }
     } else if (e === u.backspace) {
       const d = this.value;
-      if (r)
+      if (p)
         D(d, s[i].data, a), this.triggerOnChange(d, t);
-      else if (!r && s.length) {
+      else if (!p && s.length) {
         const n = s.pop();
         D(d, n.data, a), this.triggerOnChange(d, t);
       }
     }
-    h !== o && (t.data.focusedTag = h, t.data.activedescendant = w.TagsList), this.applyState(t);
+    r !== o && (t.data.focusedTag = r, t.data.activedescendant = w.TagsList), this.applyState(t);
   }
   triggerOnChange(l, t) {
     this.props.value === void 0 && (t.data.value = [...l]), this._valueItemsDuringOnChange = [], this.setItems(l, this._valueItemsDuringOnChange), t.events.push({ type: "onChange" });
@@ -607,18 +613,18 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
       dataItemKey: o,
       virtual: s,
       textField: a,
-      focusedItemIndex: i = ft,
-      skipDisabledItems: h
-    } = this.props, r = x(this.props), d = s && s.skip || 0;
+      focusedItemIndex: i = yt,
+      skipDisabledItems: r
+    } = this.props, p = x(this.props), d = s && s.skip || 0;
     let n;
     if (l !== void 0)
       return {
         focusedIndex: l,
-        focusedItem: r[l - d],
+        focusedItem: p[l - d],
         focusedType: 1
         /* ListItem */
       };
-    const p = this.value;
+    const h = this.value;
     if (e && t)
       return {
         focusedItem: null,
@@ -627,31 +633,31 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
         /* CustomItem */
       };
     if (t)
-      return n = i(r, t, a), {
-        focusedItem: r[n],
+      return n = i(p, t, a), {
+        focusedItem: p[n],
         focusedIndex: n + d,
         focusedType: 1
         /* ListItem */
       };
-    if (p.length) {
-      const f = p[p.length - 1];
-      return n = r.findIndex((c) => F(c, f, o)), r[n] !== void 0 ? {
+    if (h.length) {
+      const f = h[h.length - 1];
+      return n = p.findIndex((c) => F(c, f, o)), p[n] !== void 0 ? {
         focusedIndex: n + d,
-        focusedItem: r[n],
+        focusedItem: p[n],
         focusedType: 1
         /* ListItem */
       } : { focusedType: 0, focusedIndex: -1 };
-    } else if (h && a && !t && d === 0) {
-      const f = r.findIndex((c) => !c.disabled);
+    } else if (r && a && !t && d === 0) {
+      const f = p.findIndex((c) => !c.disabled);
       return {
         focusedIndex: f,
-        focusedItem: r[f - d],
+        focusedItem: p[f - d],
         focusedType: 1
         /* ListItem */
       };
     }
     return d === 0 ? {
-      focusedItem: r[0],
+      focusedItem: p[0],
       focusedIndex: 0,
       focusedType: 1
       /* ListItem */
@@ -687,7 +693,7 @@ const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W
   }
 };
 C.displayName = "MultiSelect", C.propTypes = {
-  ...O.propTypes,
+  ...E.propTypes,
   autoClose: v.bool,
   value: v.arrayOf(v.any),
   defaultValue: v.arrayOf(v.any),
@@ -712,7 +718,7 @@ C.displayName = "MultiSelect", C.propTypes = {
   skipDisabledItems: v.bool,
   inputAttributes: v.object
 }, C.defaultProps = {
-  ...O.defaultProps,
+  ...E.defaultProps,
   autoClose: !0,
   required: !1,
   size: void 0,
@@ -722,16 +728,17 @@ C.displayName = "MultiSelect", C.propTypes = {
   prefix: void 0,
   suffix: void 0
 };
-let _ = C;
-const xt = J(), St = st(
-  it(
-    xt,
-    ot(_)
+let M = C;
+const Ft = et(), Dt = lt(
+  dt(
+    Ft,
+    rt(M)
   )
 );
-St.displayName = "KendoReactMultiSelect";
+Dt.displayName = "KendoReactMultiSelect";
+ct(M);
 export {
-  St as MultiSelect,
-  xt as MultiSelectPropsContext,
-  _ as MultiSelectWithoutContext
+  Dt as MultiSelect,
+  Ft as MultiSelectPropsContext,
+  M as MultiSelectWithoutContext
 };