@progress/kendo-react-dropdowns 15.2.0-develop.3 → 15.2.0-develop.5

package/MultiSelect/MultiSelect.mjs

@@ -5,218 +5,245 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as g from "react";
-import v from "prop-types";
-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 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 * as f from "react";
+import b from "prop-types";
+import { createPropsContext as ie, Keys as u, classNames as C, kendoThemeMaps as oe, WatermarkOverlay as ae, getLicenseMessage as le, canUseDOM as V, validatePackage as ne, subscribeToKendoPaste as de, IconWrap as re, withIdHOC as he, withPropsContext as ce, withAdaptiveModeContext as pe } from "@progress/kendo-react-common";
+import { FloatingLabel as ue } from "@progress/kendo-react-labels";
+import { provideLocalizationService as w, registerForLocalization as fe } from "@progress/kendo-react-intl";
+import { Checkbox as ge } from "@progress/kendo-react-inputs";
+import me from "../common/ListContainer.mjs";
+import ve from "../common/List.mjs";
+import be from "../common/GroupStickyHeader.mjs";
+import Ie from "./TagList.mjs";
+import Se from "../common/SearchBar.mjs";
+import M from "../common/DropDownBase.mjs";
+import { ActiveDescendant as T } from "../common/settings.mjs";
+import { getFilteredData as y, getItemIndexByText as ye, areSame as x, removeDataItems as O, isPresent as L, getItemValue as D, preventDefaultNonInputs as xe, matchTags as H, itemIndexStartsWith as Ce } from "../common/utils.mjs";
+import { packageMetadata as W } from "../package-metadata.mjs";
+import ke from "../common/ClearButton.mjs";
+import { AdaptiveMode as Fe } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as we } from "@progress/kendo-react-layout";
+import Te 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 {
+import { selectAllText as q, messages as A, listAriaLabel as G, itemsSelectedText as U, summaryTagText as j, chipListAriaLabel as Y } from "../messages/index.mjs";
+const { sizeMap: _, roundedMap: De } = oe, Ae = "Please enter a valid value!", N = (P) => P.preventDefault(), J = (P) => P === 2, k = class k extends f.Component {
   constructor(l) {
     super(l), this.state = {
-      activedescendant: w.PopupList,
+      activedescendant: T.PopupList,
       currentValue: []
-    }, 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._element = null, this._valueItemsDuringOnChange = null, this.base = new M(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)
+    }, this.handleKendoPasteValue = (e) => {
+      if (e == null)
         return;
-      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);
+      const t = y(this.props), { textField: o, dataItemKey: i } = this.props, a = String(e).split(",").map((r) => r.trim()).filter((r) => r).reduce((r, h) => {
+        const d = ye(t, h, o, !1, !0);
         if (d !== -1) {
-          const n = e[d];
-          r.some((h) => F(h, n, s)) || r.push(n);
+          const n = t[d];
+          r.some((c) => x(c, n, i)) || r.push(n);
         }
         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, r = a[t - i], p = this.value.findIndex((h) => F(h, r, o));
-      this._lastSelectedOrDeslectedItemIndex = a.findIndex((h) => F(h, r, o));
+      const s = this.base.initState();
+      s.syntheticEvent = { target: this._element }, this.triggerOnChange(a, s), this.applyState(s);
+    }, this.handleItemSelect = (e, t) => {
+      this.state.selectAllFocused && (t.data.selectAllFocused = !1);
+      const { dataItemKey: o, virtual: i } = this.props, a = y(this.props), s = i ? i.skip : 0, r = a[e - s], h = this.value.findIndex((c) => x(c, r, o));
+      this._lastSelectedOrDeslectedItemIndex = a.findIndex((c) => x(c, r, o));
       let d = [];
-      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) => {
+      h !== -1 ? (d = this.value, d.splice(h, 1)) : d = [...this.value, r], (this.props.filter !== void 0 ? this.props.filter : this.state.text) && !this.mobileMode && !this.props.checkboxes && (this.state.text && (t.data.text = ""), this.base.filterChanged("", t)), this._adaptiveInput && this._adaptiveInput.blur(), t.data.focusedIndex = e, this.triggerOnChange(d, t), this.base.triggerPageChangeCornerItems(r, t);
+    }, this.onTagDelete = (e, t) => {
       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, 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, r);
+      o.syntheticEvent = t, this.opened && this.base.togglePopup(o), !this.state.focused && !this.mobileMode && (o.data.focused = !0, this.focus());
+      const i = this.value;
+      O(i, e, this.props.dataItemKey), this.triggerOnChange(i, o), this.applyState(o);
+    }, this.itemFocus = (e, t) => {
+      const { allowCustom: o, virtual: i } = this.props, a = y(this.props), s = i ? i.skip : 0, r = i ? i.pageSize : 0, h = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: d } = this.getFocusedState(), n = o && h, c = a[e - s];
+      if (i && !c && e >= 0 && d !== e) {
+        const m = Math.floor(e / r) * r;
+        if (m !== s) {
+          this.state.focusedIndex !== e && (t.data.focusedIndex = e, t.data.activedescendant = T.PopupList), this.base.triggerOnPageChange(t, m, r);
           return;
         }
       }
-      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) => {
-      const e = this._input = t && t.input;
-      e && this.state.focused && window.setTimeout(() => e.focus(), 0);
-    }, this.onChangeHandler = (t) => {
-      const e = this.base.initState(), o = t.target.value;
-      e.syntheticEvent = t, this.props.filter === void 0 && (e.data.text = o), e.data.focusedIndex = void 0, this.opened ? this.scrollToFocused = !0 : (this.base.togglePopup(e), this.setState({ currentValue: this.value })), this.base.filterChanged(o, e), this.applyState(e), this.setState({ group: void 0 });
-    }, this.clearButtonClick = (t) => {
-      const e = this.base.initState();
-      e.syntheticEvent = t, t.stopPropagation(), this.value.length > 0 && this.triggerOnChange([], e), this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.opened && this.base.togglePopup(e);
+      c && d !== e ? this.state.focusedIndex !== e && (t.data.focusedIndex = e, t.data.activedescendant = T.PopupList) : n && e === -1 && this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.base.triggerPageChangeCornerItems(c, t);
+    }, this.componentRef = (e) => {
+      this._element = e, this.base.wrapper = e;
+    }, this.searchbarRef = (e) => {
+      const t = this._input = e && e.input;
+      t && this.state.focused && window.setTimeout(() => t.focus(), 0);
+    }, this.onChangeHandler = (e) => {
+      const t = this.base.initState(), o = e.target.value;
+      t.syntheticEvent = e, this.props.filter === void 0 && (t.data.text = o), t.data.focusedIndex = void 0, this.opened ? this.scrollToFocused = !0 : (this.base.togglePopup(t), this.setState({ currentValue: this.value })), this.base.filterChanged(o, t), this.applyState(t), this.setState({ group: void 0 });
+    }, this.clearButtonClick = (e) => {
+      const t = this.base.initState();
+      t.syntheticEvent = e, e.stopPropagation(), this.value.length > 0 && this.triggerOnChange([], t), this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.opened && this.base.togglePopup(t);
       const o = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-      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, 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(h), this.applyState(h);
+      L(o) && o !== "" && this.base.filterChanged("", t), this.state.text && (t.data.text = ""), this._lastSelectedOrDeslectedItemIndex = null, this.applyState(t);
+    }, this.onInputKeyDown = (e) => {
+      const { textField: t, groupField: o, virtual: i } = this.props, a = y(this.props), s = e.keyCode, r = this.props.filter !== void 0 ? this.props.filter : this.state.text, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: d, focusedIndex: n } = this.getFocusedState(), c = this.base.initState();
+      if (c.syntheticEvent = e, !r && this.value.length > 0 && (s === u.left || s === u.right || s === u.home || s === u.end || s === u.delete || s === u.backspace) && !e.shiftKey)
+        return this.onTagsNavigate(e, c);
+      const m = () => {
+        e.preventDefault(), this.base.togglePopup(c), this.applyState(c);
       };
       if (this.opened)
-        if (i === u.pageUp)
-          t.preventDefault(), this.base.scrollPopupByPageSize(-1);
-        else if (i === u.pageDown)
-          t.preventDefault(), this.base.scrollPopupByPageSize(1);
-        else if ((t.ctrlKey || t.metaKey) && t.code === "KeyA") {
-          const b = (this.state.value && this.state.value.length) === a.length ? [] : a;
-          this.updateStateOnKeyboardNavigation(b, h);
-        } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === u.end) {
-          const c = a.slice(this.getFocusedState().focusedIndex);
-          this.itemFocus(a.length - 1, h), this.updateStateOnKeyboardNavigation(c, h);
-        } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === u.home) {
-          const c = a.slice(0, this.getFocusedState().focusedIndex + 1);
-          this.itemFocus(0, h), this.updateStateOnKeyboardNavigation(c, h);
-        } else if (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, 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, 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 && p)
-              this.onNavigate(h, i);
+        if (s === u.pageUp)
+          e.preventDefault(), this.base.scrollPopupByPageSize(-1);
+        else if (s === u.pageDown)
+          e.preventDefault(), this.base.scrollPopupByPageSize(1);
+        else if ((e.ctrlKey || e.metaKey) && e.code === "KeyA") {
+          const v = (this.state.value && this.state.value.length) === a.length ? [] : a;
+          c.data.focusedIndex = void 0, this.updateStateOnKeyboardNavigation(v, c);
+        } else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.keyCode === u.end) {
+          const p = a.slice(this.getFocusedState().focusedIndex);
+          this.itemFocus(a.length - 1, c), this.updateStateOnKeyboardNavigation(p, c);
+        } else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.keyCode === u.home) {
+          const p = a.slice(0, this.getFocusedState().focusedIndex + 1);
+          this.itemFocus(0, c), this.updateStateOnKeyboardNavigation(p, c);
+        } else if (e.shiftKey && e.keyCode === u.up) {
+          let p;
+          const v = this.getLastSelectedOrDeselectedIndex(1, n);
+          v === null ? p = n !== 0 ? a.slice(n - 1, n) : [a[n]] : v === n ? p = [a[v - 1]] : n >= 0 && (p = v > n ? a.slice(n - 1, v) : a.slice(v - 1, n)), p && p.length > 0 && (n >= 1 && this.itemFocus(n - 1, c), this.updateStateOnKeyboardNavigation(p, c));
+        } else if (e.shiftKey && e.keyCode === u.down) {
+          let p;
+          const v = this.getLastSelectedOrDeselectedIndex(0, n);
+          v === null ? p = n !== a.length - 1 ? a.slice(n, n + 1) : [a[n]] : v === n ? p = a.slice(n, n + 2) : n >= 0 && (p = v > n ? a.slice(n + 1, v + 1) : a.slice(v, n + 2)), p && p.length >= 1 && (this.itemFocus(n + 1, c), this.updateStateOnKeyboardNavigation(p, c));
+        } else if (e.altKey && s === u.up)
+          m();
+        else if (s === u.up || s === u.down) {
+          const p = i ? i.skip : 0, v = n - p;
+          if (o !== "" && t)
+            if (!this.props.skipDisabledItems && h)
+              this.onNavigate(c, s);
             else {
-              let m = 0;
-              if (i === u.down || i === u.right) {
-                const I = a.slice(b + 1).find((y) => !y.disabled);
-                m = I && a.indexOf(I), m && m !== -1 && (m = m + c);
-              } else if (i === u.up || i === u.left) {
+              let g = 0;
+              if (s === u.down || s === u.right) {
+                const I = a.slice(v + 1).find((S) => !S.disabled);
+                g = I && a.indexOf(I), g && g !== -1 && (g = g + p);
+              } else if (s === u.up || s === u.left) {
                 let I;
                 if (n === -1)
-                  I = a, m = a.findIndex((y) => !y.disabled), m !== -1 && (m = m + c);
+                  I = a, g = a.findIndex((S) => !S.disabled), g !== -1 && (g = g + p);
                 else {
-                  I = a.slice(0, b);
-                  let y = I.pop();
-                  for (; y && y.disabled; )
-                    y = I.pop();
-                  m = y && a.indexOf(y), m && m !== -1 && (m = m + c);
+                  I = a.slice(0, v);
+                  let S = I.pop();
+                  for (; S && S.disabled; )
+                    S = I.pop();
+                  g = S && a.indexOf(S), g && g !== -1 && (g = g + p);
                 }
               }
-              if (m) {
-                const I = m - n;
-                this.onNavigate(h, i, I);
+              if (g) {
+                const I = g - n;
+                this.onNavigate(c, s, I);
               } else
-                this.onNavigate(h, i);
+                this.onNavigate(c, s);
             }
-          else if (!this.props.skipDisabledItems && p)
-            this.onNavigate(h, i);
+          else if (!this.props.skipDisabledItems && h)
+            this.onNavigate(c, s);
           else {
-            let m = null;
-            if (i === u.down || i === u.right)
-              m = a.slice(b + 1).find((I) => !I.disabled);
-            else if (i === u.up || i === u.left) {
-              const I = a.slice(0, b);
-              for (m = I.pop(); m && m.disabled; )
-                m = I.pop();
+            let g = null;
+            if (s === u.down || s === u.right)
+              g = a.slice(v + 1).find((I) => !I.disabled);
+            else if (s === u.up || s === u.left) {
+              const I = a.slice(0, v);
+              for (g = I.pop(); g && g.disabled; )
+                g = I.pop();
             }
-            if (m) {
-              const I = a.indexOf(m);
+            if (g) {
+              const I = a.indexOf(g);
               if (I !== -1) {
-                const y = c + I - n;
-                this.onNavigate(h, i, y);
+                const S = p + I - n;
+                this.onNavigate(c, s, S);
               } else
-                this.onNavigate(h, i);
+                this.onNavigate(c, s);
             } else
-              this.onNavigate(h, i);
+              this.onNavigate(c, s);
           }
-          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.applyState(c), e.preventDefault();
+        } else if (s === u.enter || s === u.space && this.state.selectAllFocused)
+          if (e.preventDefault(), this.state.selectAllFocused) {
+            const p = this.base.initState();
+            p.syntheticEvent = e, this.toggleSelectAll(p), this.applyState(p);
+          } else this.props.allowCustom && r && d === null ? this.customItemSelect(e) : d && d.disabled ? m() : this.selectFocusedItem(e);
+        else s === u.esc && m();
+      else e.altKey && s === u.down || s === u.space && this.props.selectAll ? m() : s === u.esc && this.clearButtonClick(e);
     }, this.listContainerContent = () => {
-      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(
+      const { header: e, footer: t, allowCustom: o, size: i, groupStickyHeaderItemRender: a, groupField: s, list: r, selectAll: h } = this.props, d = y(this.props), n = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: c } = this.getFocusedState(), m = o && n && /* @__PURE__ */ f.createElement(
         "div",
         {
-          className: S("k-list", {
-            [`k-list-${P[s] || s}`]: s
-          }),
+          className: C("k-list-custom-value", { "k-focus": J(c) }),
           key: "customitem",
           onClick: this.customItemSelect,
-          onMouseDown: U
+          onMouseDown: N
         },
-        /* @__PURE__ */ g.createElement(
-          "div",
-          {
-            className: S("k-list-item k-custom-item", { "k-focus": j(n) }),
-            style: { fontStyle: "italic" }
-          },
-          d,
-          /* @__PURE__ */ g.createElement(B, { name: "plus", icon: ht, style: { position: "absolute", right: "0.5em" } })
-        )
+        n
       );
-      let { group: f } = this.state;
-      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(
+      let { group: p } = this.state;
+      return p === void 0 && s !== void 0 && (p = D(d[0], s)), /* @__PURE__ */ f.createElement(f.Fragment, null, e && /* @__PURE__ */ f.createElement("div", { className: "k-list-header" }, e), /* @__PURE__ */ f.createElement(
         "div",
         {
-          className: S("k-list", {
-            [`k-list-${this.mobileMode ? "lg" : P[s] || s}`]: this.mobileMode || s,
+          className: C("k-list", {
+            [`k-list-${this.mobileMode ? "lg" : _[i] || i}`]: this.mobileMode || i,
             "k-virtual-list": this.base.vs.enabled
           })
         },
-        !r && f && p.length !== 0 && /* @__PURE__ */ g.createElement(gt, { group: f, render: a }),
+        h && this.renderSelectAllItem(),
+        !r && p && d.length !== 0 && /* @__PURE__ */ f.createElement(be, { group: p, render: a }),
+        m,
         this.renderList()
-      ), this.showLicenseWatermark && /* @__PURE__ */ g.createElement(it, { message: this.licenseMessage }), e && /* @__PURE__ */ g.createElement("div", { className: "k-list-footer" }, e));
+      ), this.showLicenseWatermark && /* @__PURE__ */ f.createElement(ae, { message: this.licenseMessage }), t && /* @__PURE__ */ f.createElement("div", { className: "k-list-footer" }, t));
+    }, this.renderSelectAllItem = () => {
+      const { checkboxes: e } = this.props, t = this.areAllSelectableItemsSelected(), o = !t && this.areSomeSelectableItemsSelected(), a = w(this).toLanguageString(q, A[q]), s = this.state.selectAllFocused;
+      return /* @__PURE__ */ f.createElement("div", { className: "k-list-sticky-header" }, /* @__PURE__ */ f.createElement(
+        "div",
+        {
+          className: C("k-list-sticky-header-item", {
+            "k-selected": !e && t,
+            "k-focus": s
+          }),
+          "aria-label": a,
+          ...!e && {
+            role: "button",
+            tabIndex: 0,
+            "aria-pressed": o ? "mixed" : t
+          },
+          onClick: this.handleSelectAllItemClick,
+          onKeyDown: this.handleSelectAllItemKeyDown,
+          onMouseDown: N
+        },
+        e && /* @__PURE__ */ f.createElement(
+          ge,
+          {
+            checked: o ? null : t,
+            "aria-label": a,
+            tabIndex: -1
+          }
+        ),
+        /* @__PURE__ */ f.createElement("span", { className: "k-list-item-text" }, a)
+      ));
     }, 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,
+      const e = this.base, { dir: t } = this.props, o = y(this.props), i = this.base.getPopupSettings(), a = i.width !== void 0 ? i.width : e.popupWidth, s = {
+        dir: t !== void 0 ? t : e.dirCalculated,
         width: a,
         popupSettings: {
-          ...s,
-          popupClass: S(s.popupClass, "k-list-container", "k-multiselect-popup"),
-          anchor: s.anchor || this.element,
+          ...i,
+          popupClass: C(i.popupClass, "k-list-container", "k-multiselect-popup"),
+          anchor: i.anchor || this.element,
           show: this.opened,
           onOpen: this.onPopupOpened,
           onClose: this.onPopupClosed
         },
         itemsCount: [o.length, this.value.length]
       };
-      return /* @__PURE__ */ g.createElement(ut, { ...i }, this.listContainerContent());
+      return /* @__PURE__ */ f.createElement(me, { ...s }, 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, r = o ? /* @__PURE__ */ g.createElement(
-        kt,
+      const { adaptiveTitle: e, adaptiveSubtitle: t, filterable: o, filter: i } = this.props, { windowWidth: a = 0 } = this.state, s = i !== void 0 ? i : this.state.text, r = o ? /* @__PURE__ */ f.createElement(
+        Te,
         {
-          value: i,
+          value: s,
           ref: (d) => {
             this._adaptiveInput = d && d.element;
           },
@@ -227,107 +254,118 @@ const { sizeMap: P, roundedMap: wt } = st, Tt = "Please enter a valid value!", U
           fillMode: this.props.fillMode,
           placeholder: this.props.placeholder
         }
-      ) : null, p = {
-        title: t || this.props.label,
-        subTitle: e,
+      ) : null, h = {
+        title: e || this.props.label,
+        subTitle: t,
         expand: this.opened,
         onClose: (d) => this.closePopup(d),
         windowWidth: a,
         mobileFilter: r
       };
-      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" });
+      return /* @__PURE__ */ f.createElement(Fe, { ...h }, /* @__PURE__ */ f.createElement(we, null, /* @__PURE__ */ f.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
+    }, this.closePopup = (e) => {
+      const t = this.base.initState();
+      t.syntheticEvent = e, e.stopPropagation(), this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.opened && this.base.togglePopup(t), t.events.push({ type: "onClose" });
       const o = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-      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" });
+      L(o) && o !== "" && this.base.filterChanged("", t), this.state.text && (t.data.text = ""), this.applyState(t);
+    }, this.onCancel = (e) => {
+      const t = this.base.initState();
+      t.syntheticEvent = e, e.stopPropagation(), this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.opened && this.base.togglePopup(t), t.events.push({ type: "onCancel" });
       const o = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-      K(o) && o !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
+      L(o) && o !== "" && this.base.filterChanged("", t), this.state.text && (t.data.text = ""), this.applyState(t);
     }, this.renderList = () => {
-      const t = V(this), {
-        textField: e,
+      const e = w(this), {
+        textField: t,
         listNoDataRender: o,
-        itemRender: s,
+        itemRender: i,
         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(
-        ft,
+        dataItemKey: s,
+        checkboxes: r,
+        virtual: h = { skip: 0, total: void 0 }
+      } = this.props, d = y(this.props), n = this.base.vs, { focusedIndex: c } = this.getFocusedState(), m = this.base.getPopupSettings(), p = `translateY(${n.translate}px)`;
+      return /* @__PURE__ */ f.createElement(
+        ve,
         {
           id: this.base.listBoxId,
           show: this.opened,
-          data: p.slice(),
-          focusedIndex: n - r.skip,
+          data: d.slice(),
+          focusedIndex: c - h.skip,
           value: this.value,
-          textField: e,
-          valueField: i,
+          textField: t,
+          valueField: s,
           optionsGuid: this.base.guid,
           groupField: this.props.groupField,
-          ariaLabel: t.toLanguageString(W, q[W]),
-          listRef: (c) => {
-            d.list = this.base.list = c;
+          ariaLabel: e.toLanguageString(G, A[G]),
+          listRef: (v) => {
+            n.list = this.base.list = v;
           },
-          wrapperStyle: this.mobileMode ? {} : { maxHeight: h.height },
+          wrapperStyle: this.mobileMode ? {} : { maxHeight: m.height },
           wrapperCssClass: "k-list-content",
-          listStyle: d.enabled ? { transform: f } : void 0,
+          listStyle: n.enabled ? { transform: p } : void 0,
           key: "listKey",
-          skip: r.skip,
+          skip: h.skip,
           onClick: this.handleItemClick,
-          itemRender: s,
+          itemRender: i,
           groupHeaderItemRender: a,
           noDataRender: o,
-          onMouseDown: U,
+          onMouseDown: N,
           onBlur: this.handleBlur,
           onScroll: this.onScroll,
-          wrapperRef: d.scrollerRef,
+          wrapperRef: n.scrollerRef,
           scroller: this.base.renderScrollElement(),
-          ariaSetSize: r.total
+          ariaSetSize: h.total,
+          showSelectionCheckbox: r
         }
       );
-    }, this.onScroll = (t) => {
-      const { vs: e, list: o } = this.base;
-      e.scrollHandler(t);
-      const { groupField: s } = this.props;
-      let a = x(this.props);
-      if (!(!s || !a.length) && s) {
-        const i = this.itemHeight = this.itemHeight || (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 > p); n++)
-          a[n] && a[n][s] && (d = a[n][s]);
+    }, this.onScroll = (e) => {
+      const { vs: t, list: o } = this.base;
+      t.scrollHandler(e);
+      const { groupField: i } = this.props;
+      let a = y(this.props);
+      if (!(!i || !a.length) && i) {
+        const s = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : o ? o.children[0].offsetHeight : 0), h = e.target.scrollTop - t.skip * s;
+        a = this.base.getGroupedDataModernMode(a, i);
+        let d = a[0][i];
+        for (let n = 1; n < a.length && !(s * n > h); n++)
+          a[n] && a[n][i] && (d = a[n][i]);
         d !== this.state.group && this.setState({
           group: d
         });
       }
-    }, this.customItemSelect = (t) => {
-      const e = this.props.filter !== void 0 ? this.props.filter : this.state.text, { textField: o } = this.props;
-      if (!e)
+    }, this.customItemSelect = (e) => {
+      const t = this.props.filter !== void 0 ? this.props.filter : this.state.text, { textField: o } = this.props;
+      if (!t)
         return;
-      const s = this.base.initState();
-      s.syntheticEvent = t;
-      const a = o ? { [o]: e } : e;
-      this.state.text !== void 0 && (s.data.text = ""), s.data.focusedIndex = void 0, this.base.filterChanged("", s);
-      const i = [...this.value, a];
-      this.triggerOnChange(i, s), this.base.togglePopup(s), this.applyState(s);
-    }, this.handleWrapperClick = (t) => {
-      const e = this._input;
-      !this.opened && e && this.focusElement(e);
+      const i = this.base.initState();
+      i.syntheticEvent = e;
+      const a = o ? { [o]: t } : t;
+      this.state.text !== void 0 && (i.data.text = ""), i.data.focusedIndex = void 0, this.base.filterChanged("", i);
+      const s = [...this.value, a];
+      this.triggerOnChange(s, i), this.base.togglePopup(i), this.applyState(i);
+    }, this.handleWrapperClick = (e) => {
+      const t = this._input;
+      !this.opened && t && this.focusElement(t);
       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);
-    }, this.handleItemClick = (t, e) => {
+      o.syntheticEvent = e, !this.state.focused && !this.mobileMode && (o.events.push({ type: "onFocus" }), o.data.focused = !0), this.mobileMode && (this.setState({ currentValue: this.tagsToRender }), this.mobileMode && window.setTimeout(() => this._adaptiveInput && this._adaptiveInput.focus(), 300)), this.base.togglePopup(o), this.applyState(o);
+    }, this.handleItemClick = (e, t) => {
       const o = this.base.initState();
-      o.syntheticEvent = e, this.handleItemSelect(t, o), this.props.autoClose && this.base.togglePopup(o), e.stopPropagation(), this.applyState(o);
-    }, this.handleBlur = (t) => {
+      o.syntheticEvent = t, this.handleItemSelect(e, o), this.props.autoClose && !this.props.checkboxes && this.base.togglePopup(o), t.stopPropagation(), this.applyState(o);
+    }, this.handleSelectAllItemClick = (e) => {
+      const t = this.base.initState();
+      t.syntheticEvent = e, this.toggleSelectAll(t), e.stopPropagation(), this.applyState(t);
+    }, this.handleSelectAllItemKeyDown = (e) => {
+      if (e.keyCode !== u.enter && e.keyCode !== u.space)
+        return;
+      e.preventDefault();
+      const t = this.base.initState();
+      t.syntheticEvent = e, this.toggleSelectAll(t), this.applyState(t);
+    }, this.handleBlur = (e) => {
       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);
-    }, this.handleFocus = (t) => {
-      this._skipFocusEvent || this.base.handleFocus(t);
+      const t = this.base.initState(), { allowCustom: o, filterable: i } = this.props;
+      t.syntheticEvent = e, t.data.focused = !1, t.data.selectAllFocused = !1, t.events.push({ type: "onBlur" }), this.opened && !this.mobileMode && (this.state.opened && (t.data.opened = !1), t.events.push({ type: "onClose" })), !o && !i && this.state.text && (t.data.text = ""), this.applyState(t);
+    }, this.handleFocus = (e) => {
+      this._skipFocusEvent || this.base.handleFocus(e);
     }, this.onPopupOpened = () => {
       this._input && this.state.focused && !this.mobileMode && this.focusElement(this._input);
     }, this.onPopupClosed = () => {
@@ -336,23 +374,39 @@ const { sizeMap: P, roundedMap: wt } = st, Tt = "Please enter a valid value!", U
       }, 0);
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || Tt
+        this.validity.valid ? "" : this.props.validationMessage || Ae
+      );
+    }, this.getSelectableItems = () => y(this.props).filter((t) => !(t != null && t.disabled)), this.areAllSelectableItemsSelected = () => {
+      const e = this.getSelectableItems();
+      if (e.length === 0 || !e.every(
+        (a) => this.value.some((s) => x(s, a, this.props.dataItemKey))
+      ))
+        return !1;
+      const { virtual: o, dataItemKey: i } = this.props;
+      return !(o && o.total !== void 0 && (i ? this.value.filter((s) => (s == null ? void 0 : s[i]) !== void 0).length : this.value.length) < o.total);
+    }, this.areSomeSelectableItemsSelected = () => {
+      const e = this.value;
+      if (e.length > 0)
+        return !0;
+      const t = this.getSelectableItems();
+      return t.length === 0 ? !1 : t.some(
+        (o) => e.some((i) => x(i, o, this.props.dataItemKey))
       );
-    }, this.validate(l), this.licenseMessage = ot(H);
+    }, this.validate(l), this.licenseMessage = le(W);
   }
   get _inputId() {
     return this.props.id;
   }
   get document() {
-    if (z)
+    if (V)
       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 = !at(H, {
+      const e = [];
+      l.filterable && e.push("filterable"), l.virtual && e.push("virtualization"), this.showLicenseWatermark = !ne(W, {
         component: "MultiSelect",
-        features: t
+        features: e
       });
     }
   }
@@ -366,17 +420,38 @@ const { sizeMap: P, roundedMap: wt } = st, Tt = "Please enter a valid value!", U
   }
   /** @hidden */
   get tagsToRender() {
-    const { tags: l, textField: t } = this.props, e = [];
-    return l === void 0 ? this.value.forEach((o) => {
-      e.push({ text: _(o, t), data: [o] });
-    }) : e.push(...l), e;
+    const { tags: l, textField: e, dataItemKey: t, allowCustom: o, selectAll: i, summarizeAfter: a = 10 } = this.props, s = [];
+    if (l === void 0)
+      if (o && i && t) {
+        const r = this.value.filter((d) => d[t] !== void 0), h = this.value.filter((d) => d[t] === void 0);
+        if (r.length > 0) {
+          const n = w(this).toLanguageString(U, A[U]).replace("{0}", r.length.toString());
+          s.push({ text: n, data: [...r] });
+        }
+        h.forEach((d) => {
+          s.push({ text: D(d, e), data: [d] });
+        });
+      } else if (this.value.length > a) {
+        const r = w(this), h = this.value.slice(0, a), d = this.value.slice(a);
+        h.forEach((c) => {
+          s.push({ text: D(c, e), data: [c] });
+        });
+        const n = r.toLanguageString(j, A[j]).replace("{0}", d.length.toString());
+        s.push({ text: n, data: [...d] });
+      } else
+        this.value.forEach((r) => {
+          s.push({ text: D(r, e), data: [r] });
+        });
+    else
+      s.push(...l);
+    return s;
   }
   /**
    * The mobile mode of the MultiSelect.
    */
   get mobileMode() {
-    var t;
-    return !!(this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth <= ((t = this.props._adaptiveMode) == null ? void 0 : t.medium) && this.props.adaptive);
+    var e;
+    return !!(this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth <= ((e = this.props._adaptiveMode) == null ? void 0 : e.medium) && this.props.adaptive);
   }
   /**
    * Represents the value of the MultiSelect.
@@ -395,63 +470,75 @@ const { sizeMap: P, roundedMap: wt } = st, Tt = "Please enter a valid value!", U
    * Represents the validity state into which the MultiSelect is set.
    */
   get validity() {
-    const l = this.props.validationMessage !== void 0, t = !this.required || this.value !== null && this.value.length > 0 && this.value !== void 0, e = this.props.valid !== void 0 ? this.props.valid : t;
+    const l = this.props.validationMessage !== void 0, e = !this.required || this.value !== null && this.value.length > 0 && this.value !== void 0, t = this.props.valid !== void 0 ? this.props.valid : e;
     return {
       customError: l,
-      valid: e,
+      valid: t,
       valueMissing: this.value === null
     };
   }
   /** @hidden */
   get required() {
-    return this.props.required !== void 0 ? this.props.required : C.defaultProps.required;
+    return this.props.required !== void 0 ? this.props.required : k.defaultProps.required;
   }
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : C.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : k.defaultProps.validityStyles;
   }
   /** @hidden */
-  componentDidUpdate(l, t) {
-    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)
+  componentDidUpdate(l, e) {
+    var c;
+    const { virtual: t, groupField: o = "" } = this.props, i = y(this.props), a = t ? t.skip : 0, s = l.virtual ? l.virtual.total : 0, r = l.opened !== void 0 ? l.opened : e.opened, h = !r && this.opened, d = r && !this.opened, n = this.base.getPopupSettings();
+    if (this.validate(this.props), this.base.didUpdate(), !n.animate && d && this.onPopupClosed(), d && this.state.selectAllFocused && this.setState({ selectAllFocused: !1 }), t && t.total !== s)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
-      let { focusedItem: f, focusedIndex: c } = this.getFocusedState();
-      o !== "" && (c = (h = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : h.indexOf(f)), 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);
+      let { focusedItem: m, focusedIndex: p } = this.getFocusedState();
+      o !== "" && (p = (c = this.base.getGroupedDataModernMode(i, o)) == null ? void 0 : c.indexOf(m)), h && t ? this.base.scrollToVirtualItem(t, p - a) : h && !t ? (i && i.length !== 0 && this.base.resetGroupStickyHeader(i[0][o], this), this.base.scrollToItem(p)) : this.opened && r && m && this.scrollToFocused && this.base.scrollToItem(p - a);
     }
     this.scrollToFocused = !1, this.setValidity();
   }
   /** @hidden */
   componentDidMount() {
-    var t;
-    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);
+    var e;
+    this.observerResize = V && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (e = this.document) != null && e.body && this.observerResize && this.observerResize.observe(this.document.body);
     const l = this.props.name || this.props.id;
-    this.KendoPasteSubscription = nt(this._element, {
+    this.KendoPasteSubscription = de(this._element, {
       fieldName: l,
-      onValueChange: (e) => {
-        this.handleKendoPasteValue(e);
+      onValueChange: (t) => {
+        this.handleKendoPasteValue(t);
       }
     });
   }
   /** @hidden */
   componentWillUnmount() {
-    var l, t;
-    (l = this.document) != null && l.body && this.observerResize && this.observerResize.disconnect(), (t = this.KendoPasteSubscription) == null || t.unsubscribe();
+    var l, e;
+    (l = this.document) != null && l.body && this.observerResize && this.observerResize.disconnect(), (e = this.KendoPasteSubscription) == null || e.unsubscribe();
   }
   /** @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: 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);
+  onNavigate(l, e, t) {
+    const { allowCustom: o, selectAll: i } = this.props, a = y(this.props), s = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: r, focusedIndex: h } = this.getFocusedState(), d = o && s, n = J(r), c = this.base, m = c.vs;
+    if (this.state.selectAllFocused) {
+      e === u.down && (l.data.selectAllFocused = !1, d || (this.itemFocus(0, l), this.scrollToFocused = !0)), this.applyState(l);
+      return;
+    }
+    if (i && this.opened && h === -1 && !n) {
+      e === u.down && (l.data.selectAllFocused = !0), this.applyState(l);
+      return;
+    }
+    if (i && this.opened && e === u.up && h === 0 && !d) {
+      l.data.selectAllFocused = !0, l.data.focusedIndex = void 0, this.applyState(l);
+      return;
+    }
+    if (this.opened && e === u.up && n)
+      i && (l.data.selectAllFocused = !0), this.state.focusedIndex !== void 0 && (l.data.focusedIndex = void 0);
     else {
-      const f = n.navigation.navigate({
-        keyCode: t,
-        current: r,
-        max: (h.enabled ? h.total : s.length) - 1,
-        min: p ? -1 : 0,
-        skipItems: e || void 0
+      const p = c.navigation.navigate({
+        keyCode: e,
+        current: h,
+        max: (m.enabled ? m.total : a.length) - 1,
+        min: d ? -1 : 0,
+        skipItems: t || void 0
       });
-      f !== void 0 && (this.itemFocus(f, l), this.scrollToFocused = !0);
+      p !== void 0 && (this.itemFocus(p, l), this.scrollToFocused = !0);
     }
     this.applyState(l);
   }
@@ -459,205 +546,227 @@ const { sizeMap: P, roundedMap: wt } = st, Tt = "Please enter a valid value!", U
   render() {
     const {
       style: l,
-      className: t,
-      label: e,
+      className: e,
+      label: t,
       dir: o,
-      disabled: s,
+      disabled: i,
       textField: a,
-      dataItemKey: i,
+      dataItemKey: s,
       virtual: r,
-      size: p,
+      size: h,
       rounded: d,
       fillMode: n,
-      loading: h,
-      filter: f
-    } = 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;
+      loading: c,
+      filter: m
+    } = this.props, { text: p, focused: v, focusedTag: g, currentValue: I } = this.state, S = this.base.vs, z = this.props.id || this._inputId;
+    S.enabled = r !== void 0, r !== void 0 && (S.skip = r.skip, S.total = r.total, S.pageSize = r.pageSize);
+    const F = this.mobileMode && this.opened ? I : this.tagsToRender;
     this.setItems(this.tagsToRender, this._tags);
-    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(
+    const R = !this.validityStyles || this.validity.valid, Q = w(this), X = !!(m !== void 0 ? m : p) || F && F.length > 0, [Z, ee] = $(this.props.prefix || f.Fragment), [te, se] = $(this.props.suffix || f.Fragment), B = /* @__PURE__ */ f.createElement(f.Fragment, null, /* @__PURE__ */ f.createElement(
       "div",
       {
         ref: this.componentRef,
-        className: S("k-multiselect k-input", t, {
-          [`k-input-${P[p] || p}`]: p,
-          [`k-rounded-${wt[d] || d}`]: d,
+        className: C("k-multiselect k-input", e, {
+          [`k-input-${_[h] || h}`]: h,
+          [`k-rounded-${De[d] || d}`]: d,
           [`k-input-${n}`]: n,
-          "k-focus": b && !s,
-          "k-invalid": !N,
-          "k-disabled": s,
-          "k-loading": h,
+          "k-focus": v && !i,
+          "k-invalid": !R,
+          "k-disabled": i,
+          "k-loading": c,
           "k-required": this.required
         }),
-        style: e ? { ...l, width: void 0 } : l,
+        style: t ? { ...l, width: void 0 } : l,
         dir: o,
-        onFocus: (T) => {
-          this.mobileMode ? this.handleWrapperClick(T) : this.handleFocus(T);
+        onFocus: (E) => {
+          this.mobileMode ? this.handleWrapperClick(E) : this.handleFocus(E);
         },
         onBlur: this.handleBlur,
         onClick: this.handleWrapperClick,
-        onMouseDown: It
+        onMouseDown: xe
       },
-      this.props.prefix && /* @__PURE__ */ g.createElement(Q, { ...X }),
-      /* @__PURE__ */ g.createElement("div", { className: S("k-input-values") }, /* @__PURE__ */ g.createElement(
+      this.props.prefix && /* @__PURE__ */ f.createElement(Z, { ...ee }),
+      /* @__PURE__ */ f.createElement("div", { className: C("k-input-values") }, /* @__PURE__ */ f.createElement(
         "div",
         {
-          className: S("k-chip-list", { [`k-chip-list-${P[p] || p}`]: p }),
+          className: C("k-chip-list", { [`k-chip-list-${_[h] || h}`]: h }),
           role: "listbox",
-          "aria-label": Y.toLanguageString(G, q[G]),
+          "aria-label": Q.toLanguageString(Y, A[Y]),
           "aria-orientation": "horizontal",
           id: "tagslist-" + this.base.guid
         },
-        k && k.length > 0 && /* @__PURE__ */ g.createElement(
-          mt,
+        F && F.length > 0 && /* @__PURE__ */ f.createElement(
+          Ie,
           {
             tagRender: this.props.tagRender,
             onTagDelete: this.onTagDelete,
-            data: k,
+            data: F,
             guid: this.base.guid,
-            focused: m ? k.find((T) => A(T, m, i)) : void 0,
-            size: p
+            focused: g ? F.find((E) => H(E, g, s)) : void 0,
+            size: h
           }
         )
-      ), 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.renderSearchBar(z)),
+      c && /* @__PURE__ */ f.createElement(re, { className: "k-input-loading-icon", name: "loading" }),
+      this.props.suffix && /* @__PURE__ */ f.createElement(te, { ...se }),
+      X && /* @__PURE__ */ f.createElement(ke, { onClick: this.clearButtonClick }),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
-    return e ? /* @__PURE__ */ g.createElement(
-      pt,
+    return t ? /* @__PURE__ */ f.createElement(
+      ue,
       {
-        label: e,
-        editorId: L,
-        editorValue: c || _(this.value[0], a),
-        editorValid: N,
-        editorDisabled: s,
+        label: t,
+        editorId: z,
+        editorValue: p || D(this.value[0], a),
+        editorValid: R,
+        editorDisabled: i,
         style: { width: l ? l.width : void 0 },
-        children: R
+        children: B
       }
-    ) : R;
+    ) : B;
   }
   renderSearchBar(l) {
-    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 = {
+    const { activedescendant: e, focusedTag: t, currentValue: o } = this.state, { disabled: i, placeholder: a, ariaDescribedBy: s, ariaLabelledBy: r, ariaLabel: h, inputAttributes: d } = this.props, n = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: c } = this.getFocusedState(), m = this.value.length === 0 && !n ? a : void 0, p = o && o.length > 0 ? void 0 : a, v = e === T.TagsList && t !== void 0 ? `tag-${this.base.guid}-${t.text.replace(/\s+/g, "-")}` : `k-${this.base.guid}-item-${c + 1}`, g = s ? ` ${s}` : "", I = this.value.length > 0 ? `tagslist-${this.base.guid}${g}` : s, S = {
       accessKey: this.props.accessKey,
       tabIndex: this.props.tabIndex
     };
-    return /* @__PURE__ */ g.createElement(
-      vt,
+    return /* @__PURE__ */ f.createElement(
+      Se,
       {
         id: l,
         name: this.props.name,
-        size: Math.max((f || "").length, n.length, 1),
-        placeholder: this.mobileMode && this.opened ? c : f,
+        size: Math.max((m || "").length, n.length, 1),
+        placeholder: this.mobileMode && this.opened ? p : m,
         value: n,
         onChange: this.onChangeHandler,
         onKeyDown: this.onInputKeyDown,
         ref: this.searchbarRef,
-        disabled: s,
+        disabled: i,
         expanded: this.opened,
         ariaControls: this.base.listBoxId,
         role: "combobox",
-        activedescendant: b,
+        activedescendant: v,
         ariaDescribedBy: I,
         ariaLabelledBy: r,
         ariaRequired: this.required,
-        ariaLabel: p,
+        ariaLabel: h,
         ariaAutoComplete: "list",
         inputAttributes: d,
-        ...y
+        ...S
       }
     );
   }
-  onTagsNavigate(l, t) {
-    const e = l.keyCode, { focusedTag: o } = this.state, s = this._tags, a = this.props.dataItemKey;
-    let i = o ? s.findIndex((d) => A(d, o, a)) : -1, r;
-    const p = i !== -1;
-    if (e === u.left)
-      p ? i = Math.max(0, i - 1) : i = s.length - 1, r = s[i];
-    else if (e === u.right)
-      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)
-      r = s[0];
-    else if (e === u.end && !l.shiftKey)
-      r = s[s.length - 1];
-    else if (e === u.delete) {
-      if (p) {
+  onTagsNavigate(l, e) {
+    const t = l.keyCode, { focusedTag: o } = this.state, i = this._tags, a = this.props.dataItemKey;
+    let s = o ? i.findIndex((d) => H(d, o, a)) : -1, r;
+    const h = s !== -1;
+    if (t === u.left)
+      h ? s = Math.max(0, s - 1) : s = i.length - 1, r = i[s];
+    else if (t === u.right)
+      s === i.length - 1 ? r = void 0 : h && (s = Math.min(i.length - 1, s + 1), r = i[s]);
+    else if (t === u.home && !l.shiftKey)
+      r = i[0];
+    else if (t === u.end && !l.shiftKey)
+      r = i[i.length - 1];
+    else if (t === u.delete) {
+      if (h) {
         const d = this.value;
-        D(d, s[i].data, a), this.triggerOnChange(d, t);
+        O(d, i[s].data, a), this.triggerOnChange(d, e);
       }
-    } else if (e === u.backspace) {
+    } else if (t === u.backspace) {
       const d = this.value;
-      if (p)
-        D(d, s[i].data, a), this.triggerOnChange(d, t);
-      else if (!p && s.length) {
-        const n = s.pop();
-        D(d, n.data, a), this.triggerOnChange(d, t);
+      if (h)
+        O(d, i[s].data, a), this.triggerOnChange(d, e);
+      else if (!h && i.length) {
+        const n = i.pop();
+        O(d, n.data, a), this.triggerOnChange(d, e);
       }
     }
-    r !== o && (t.data.focusedTag = r, t.data.activedescendant = w.TagsList), this.applyState(t);
+    r !== o && (e.data.focusedTag = r, e.data.activedescendant = T.TagsList), this.applyState(e);
+  }
+  triggerOnChange(l, e) {
+    this.props.value === void 0 && (e.data.value = [...l]), this._valueItemsDuringOnChange = [], this.setItems(l, this._valueItemsDuringOnChange), e.events.push({ type: "onChange" });
   }
-  triggerOnChange(l, t) {
-    this.props.value === void 0 && (t.data.value = [...l]), this._valueItemsDuringOnChange = [], this.setItems(l, this._valueItemsDuringOnChange), t.events.push({ type: "onChange" });
+  selectFocusedItem(l, e) {
+    const { virtual: t } = this.props, o = y(this.props), { focusedIndex: i } = e || this.getFocusedState(), a = t ? t.skip : 0;
+    o[i - a] !== void 0 && this.handleItemClick(i, l);
   }
-  selectFocusedItem(l, t) {
-    const { virtual: e } = this.props, o = x(this.props), { focusedIndex: s } = t || this.getFocusedState(), a = e ? e.skip : 0;
-    o[s - a] !== void 0 && this.handleItemClick(s, l);
+  setItems(l, e) {
+    e.length = 0, e.push(...l);
   }
-  setItems(l, t) {
-    t.length = 0, t.push(...l);
+  shouldKeepNoFocusOnOpen(l, e) {
+    return !!this.props.selectAll && e === void 0 && this.value.length === 0 && !(this.props.allowCustom && l);
   }
   getFocusedState() {
-    const { focusedIndex: l } = this.state, t = this.props.filter !== void 0 ? this.props.filter : this.state.text, {
-      allowCustom: e,
+    if (this.state.selectAllFocused)
+      return { focusedType: 0, focusedIndex: -1 };
+    const { focusedIndex: l } = this.state, e = this.props.filter !== void 0 ? this.props.filter : this.state.text;
+    if (this.shouldKeepNoFocusOnOpen(e, l))
+      return { focusedType: 0, focusedIndex: -1 };
+    const {
+      allowCustom: t,
       dataItemKey: o,
-      virtual: s,
+      virtual: i,
       textField: a,
-      focusedItemIndex: i = yt,
+      focusedItemIndex: s = Ce,
       skipDisabledItems: r
-    } = this.props, p = x(this.props), d = s && s.skip || 0;
+    } = this.props, h = y(this.props), d = i && i.skip || 0;
     let n;
     if (l !== void 0)
       return {
         focusedIndex: l,
-        focusedItem: p[l - d],
+        focusedItem: h[l - d],
         focusedType: 1
         /* ListItem */
       };
-    const h = this.value;
-    if (e && t)
+    const c = this.value;
+    if (t && e)
       return {
         focusedItem: null,
         focusedIndex: -1,
         focusedType: 2
         /* CustomItem */
       };
-    if (t)
-      return n = i(p, t, a), {
-        focusedItem: p[n],
+    if (e)
+      return n = s(h, e, a), {
+        focusedItem: h[n],
         focusedIndex: n + d,
         focusedType: 1
         /* ListItem */
       };
-    if (h.length) {
-      const f = h[h.length - 1];
-      return n = p.findIndex((c) => F(c, f, o)), p[n] !== void 0 ? {
+    if (c.length) {
+      if (this.props.selectAll) {
+        const p = c[c.length - 1], v = h.findIndex((g) => x(g, p, o));
+        return v !== -1 ? {
+          focusedIndex: v + d,
+          focusedItem: h[v],
+          focusedType: 1
+          /* ListItem */
+        } : d === 0 ? {
+          focusedItem: h[0],
+          focusedIndex: 0,
+          focusedType: 1
+          /* ListItem */
+        } : { focusedType: 0, focusedIndex: -1 };
+      }
+      const m = c[c.length - 1];
+      return n = h.findIndex((p) => x(p, m, o)), h[n] !== void 0 ? {
         focusedIndex: n + d,
-        focusedItem: p[n],
+        focusedItem: h[n],
         focusedType: 1
         /* ListItem */
       } : { focusedType: 0, focusedIndex: -1 };
-    } else if (r && a && !t && d === 0) {
-      const f = p.findIndex((c) => !c.disabled);
+    } else if (r && a && !e && d === 0) {
+      const m = h.findIndex((p) => !p.disabled);
       return {
-        focusedIndex: f,
-        focusedItem: p[f - d],
+        focusedIndex: m,
+        focusedItem: h[m - d],
         focusedType: 1
         /* ListItem */
       };
     }
     return d === 0 ? {
-      focusedItem: p[0],
+      focusedItem: h[0],
       focusedIndex: 0,
       focusedType: 1
       /* ListItem */
@@ -670,8 +779,32 @@ const { sizeMap: P, roundedMap: wt } = st, Tt = "Please enter a valid value!", U
     this.base.applyState(l), this._valueItemsDuringOnChange = null;
   }
   calculateMedia(l) {
-    for (const t of l)
-      this.setState({ windowWidth: t.target.clientWidth });
+    for (const e of l)
+      this.setState({ windowWidth: e.target.clientWidth });
+  }
+  toggleSelectAll(l) {
+    if (this.props.disabled)
+      return;
+    l.data.focusedIndex = void 0;
+    const e = this.areAllSelectableItemsSelected();
+    if (l.data.selectAllFocused = !0, this.props.onSelectAllChange) {
+      this.props.onSelectAllChange({
+        syntheticEvent: l.syntheticEvent,
+        nativeEvent: l.syntheticEvent.nativeEvent,
+        target: this,
+        allSelected: !e
+      });
+      return;
+    }
+    const t = this.getSelectableItems();
+    if (t.length === 0)
+      return;
+    let o = [];
+    e ? o = this.value.filter(
+      (i) => !t.some((a) => x(a, i, this.props.dataItemKey))
+    ) : (o = [...this.value], t.forEach((i) => {
+      o.some((s) => x(s, i, this.props.dataItemKey)) || o.push(i);
+    })), this.triggerOnChange(o, l);
   }
   /**
    * Updates the state of the MultiSelect when the complex keyboard navigation that
@@ -680,47 +813,53 @@ const { sizeMap: P, roundedMap: wt } = st, Tt = "Please enter a valid value!", U
    * @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(l, t) {
-    this.setState({ value: l }), this.triggerOnChange(l, t), this.applyState(t);
+  updateStateOnKeyboardNavigation(l, e) {
+    this.setState({ value: l }), this.triggerOnChange(l, e), this.applyState(e);
   }
   /**
    * Returns the last element that was selected or deselected. Needed for the keyboard navigation specifications
    *
    * @param {number} correction A correction is needed depending on if UP or DOWN key is pressed
    */
-  getLastSelectedOrDeselectedIndex(l, t) {
-    return this._lastSelectedOrDeslectedItemIndex === null && (this._lastSelectedOrDeslectedItemIndex = t), this._lastSelectedOrDeslectedItemIndex !== null ? this._lastSelectedOrDeslectedItemIndex + l : null;
+  getLastSelectedOrDeselectedIndex(l, e) {
+    return this._lastSelectedOrDeslectedItemIndex === null && (this._lastSelectedOrDeslectedItemIndex = e), this._lastSelectedOrDeslectedItemIndex !== null ? this._lastSelectedOrDeslectedItemIndex + l : null;
   }
 };
-C.displayName = "MultiSelect", C.propTypes = {
-  ...E.propTypes,
-  autoClose: v.bool,
-  value: v.arrayOf(v.any),
-  defaultValue: v.arrayOf(v.any),
-  dataItemKey: v.string,
-  placeholder: v.string,
-  tags: v.arrayOf(
-    v.shape({
-      text: v.string,
-      data: v.arrayOf(v.any)
+k.displayName = "MultiSelect", k.propTypes = {
+  ...M.propTypes,
+  autoClose: b.bool,
+  value: b.arrayOf(b.any),
+  defaultValue: b.arrayOf(b.any),
+  dataItemKey: b.string,
+  placeholder: b.string,
+  tags: b.arrayOf(
+    b.shape({
+      text: b.string,
+      data: b.arrayOf(b.any)
     })
   ),
-  tagRender: v.func,
-  id: v.string,
-  ariaLabelledBy: v.string,
-  ariaDescribedBy: v.string,
-  groupField: v.string,
-  list: v.any,
-  adaptive: v.bool,
-  adaptiveTitle: v.string,
-  adaptiveSubtitle: v.string,
-  onCancel: v.func,
-  skipDisabledItems: v.bool,
-  inputAttributes: v.object
-}, C.defaultProps = {
-  ...E.defaultProps,
+  tagRender: b.func,
+  id: b.string,
+  ariaLabelledBy: b.string,
+  ariaDescribedBy: b.string,
+  selectAll: b.bool,
+  checkboxes: b.bool,
+  summarizeAfter: b.number,
+  onSelectAllChange: b.func,
+  groupField: b.string,
+  list: b.any,
+  adaptive: b.bool,
+  adaptiveTitle: b.string,
+  adaptiveSubtitle: b.string,
+  onCancel: b.func,
+  skipDisabledItems: b.bool,
+  inputAttributes: b.object
+}, k.defaultProps = {
+  ...M.defaultProps,
   autoClose: !0,
   required: !1,
+  selectAll: !1,
+  checkboxes: !1,
   size: void 0,
   rounded: void 0,
   fillMode: void 0,
@@ -728,17 +867,17 @@ C.displayName = "MultiSelect", C.propTypes = {
   prefix: void 0,
   suffix: void 0
 };
-let M = C;
-const Ft = et(), Dt = lt(
-  dt(
-    Ft,
-    rt(M)
+let K = k;
+const Ee = ie(), Oe = he(
+  ce(
+    Ee,
+    pe(K)
   )
 );
-Dt.displayName = "KendoReactMultiSelect";
-ct(M);
+Oe.displayName = "KendoReactMultiSelect";
+fe(K);
 export {
-  Dt as MultiSelect,
-  Ft as MultiSelectPropsContext,
-  M as MultiSelectWithoutContext
+  Oe as MultiSelect,
+  Ee as MultiSelectPropsContext,
+  K as MultiSelectWithoutContext
 };