@progress/kendo-react-dropdowns 9.5.0 → 10.0.0-develop.1

package/MultiSelectTree/MultiSelectTree.mjs

@@ -7,27 +7,27 @@
  */
 import * as t from "react";
 import n from "prop-types";
-import { createPropsContext as it, usePropsContext as rt, validatePackage as ot, useId as lt, getTabIndex as st, useRtl as ct, useAdaptiveModeContext as ut, canUseDOM as dt, noop as Z, Keys as o, classNames as ee, IconWrap as pt, kendoThemeMaps as ft } from "@progress/kendo-react-common";
-import { Popup as mt } from "@progress/kendo-react-popup";
-import { useLocalization as gt } from "@progress/kendo-react-intl";
-import { TreeView as Te } from "@progress/kendo-react-treeview";
-import { packageMetadata as vt } from "../package-metadata.mjs";
-import { getItemValue as ht, areSame as bt, matchTags as De } from "../common/utils.mjs";
-import { useDropdownWidth as yt } from "../DropDownTree/useDropdownWidth.mjs";
-import { ListNoData as Ct } from "../DropDownTree/ListNoData.mjs";
-import { nodata as te, messages as ne, adaptiveModeFooterCancel as Re, adaptiveModeFooterApply as Me } from "../messages/index.mjs";
-import { FloatingLabel as Et } from "@progress/kendo-react-labels";
-import kt from "../MultiSelect/TagList.mjs";
-import Ft from "../common/ClearButton.mjs";
-import Ne from "../common/ListFilter.mjs";
-import { AdaptiveMode as xt } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as St } from "@progress/kendo-react-layout";
-const wt = "Please select a value from the list!", { sizeMap: Pe, roundedMap: It } = ft, Tt = (O) => O.split("_").map((R) => parseInt(R, 10)), Dt = (O, R) => {
-  const { validationMessage: a, valid: V, required: x } = O;
+import { createPropsContext as it, usePropsContext as ot, validatePackage as lt, useId as st, getTabIndex as ct, useRtl as ut, useAdaptiveModeContext as dt, canUseDOM as pt, noop as Z, Keys as o, classNames as ee, IconWrap as ft, WatermarkOverlay as mt, kendoThemeMaps as gt } from "@progress/kendo-react-common";
+import { Popup as vt } from "@progress/kendo-react-popup";
+import { useLocalization as ht } from "@progress/kendo-react-intl";
+import { TreeView as De } from "@progress/kendo-react-treeview";
+import { packageMetadata as bt } from "../package-metadata.mjs";
+import { getItemValue as yt, areSame as Ct, matchTags as Me } from "../common/utils.mjs";
+import { useDropdownWidth as kt } from "../DropDownTree/useDropdownWidth.mjs";
+import { ListNoData as Et } from "../DropDownTree/ListNoData.mjs";
+import { nodata as te, messages as ne, adaptiveModeFooterCancel as Re, adaptiveModeFooterApply as Ne } from "../messages/index.mjs";
+import { FloatingLabel as Ft } from "@progress/kendo-react-labels";
+import xt from "../MultiSelect/TagList.mjs";
+import St from "../common/ClearButton.mjs";
+import Pe from "../common/ListFilter.mjs";
+import { AdaptiveMode as wt } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as It } from "@progress/kendo-react-layout";
+const Tt = "Please select a value from the list!", { sizeMap: Oe, roundedMap: Dt } = gt, Mt = (P) => P.split("_").map((D) => parseInt(D, 10)), Rt = (P, D) => {
+  const { validationMessage: a, valid: V, required: ae } = P;
   return {
     customError: a !== void 0,
-    valid: !!(V !== void 0 ? V : !x || R),
-    valueMissing: !R
+    valid: !!(V !== void 0 ? V : !ae || D),
+    valueMissing: !D
   };
 }, y = {
   checkField: "checkField",
@@ -43,53 +43,51 @@ const wt = "Please select a value from the list!", { sizeMap: Pe, roundedMap: It
   fillMode: "solid",
   required: !1,
   validityStyles: !0
-}, Rt = it(), Oe = t.forwardRef(
-  (O, R) => {
-    const a = rt(Rt, O);
-    ot(vt);
-    const V = lt(), x = a.id || V, {
-      data: q = [],
-      dataItemKey: S,
+}, Nt = it(), Le = t.forwardRef(
+  (P, D) => {
+    const a = ot(Nt, P), V = !lt(bt, { component: "MultiSelectTree" }), ae = st(), O = a.id || ae, {
+      data: W = [],
+      dataItemKey: x,
       style: L = {},
-      placeholder: de,
+      placeholder: pe,
       label: B,
-      name: Le,
-      validationMessage: A,
-      valid: Be,
-      tags: pe,
+      name: Be,
+      validationMessage: q,
+      valid: Ke,
+      tags: fe,
       value: m,
-      opened: w,
-      disabled: E,
+      opened: S,
+      disabled: k,
       popupSettings: M = y.popupSettings,
-      checkField: fe = y.checkField,
-      checkIndeterminateField: me = y.checkIndeterminateField,
-      subItemsField: ge = y.subItemsField,
+      checkField: me = y.checkField,
+      checkIndeterminateField: ge = y.checkIndeterminateField,
+      subItemsField: ve = y.subItemsField,
       size: v = y.size,
       rounded: K = y.rounded,
-      fillMode: W = y.fillMode,
-      required: ve = y.required,
-      validityStyles: Ke = y.validityStyles,
-      onOpen: ae = Z,
+      fillMode: A = y.fillMode,
+      required: he = y.required,
+      validityStyles: Ve = y.validityStyles,
+      onOpen: re = Z,
       onClose: z = Z
-    } = a, H = st(a.tabIndex, E), l = t.useRef(null), C = t.useRef(null), I = t.useRef(null), ie = t.useRef(null), $ = t.useRef(null), k = t.useRef(null), G = t.useRef(!1), _ = t.useRef([]), j = t.useRef(null), [N, Ve] = t.useState(), [qe, he] = t.useState(!1), [d, re] = t.useState(!1), [oe, Ae] = t.useState(), [We, ze] = t.useState([]), [be, He] = t.useState(""), s = w !== void 0 ? w : qe, le = !!(Array.isArray(m) && m.length), se = Dt({ validationMessage: A, valid: Be, required: ve }, le), T = ct(C, a.dir), $e = {
-      width: yt(C, y, M, L),
-      ...T !== void 0 ? { direction: T } : {}
-    }, Ge = t.useCallback(() => C.current && C.current.focus(), []), ye = ut(), P = !!(oe && ye && oe <= ye.medium && a.adaptive);
-    _.current = pe === void 0 ? (m || []).map((e) => ({ text: ht(e, a.textField), data: [e] })) : [...pe], t.useImperativeHandle(l, () => ({
+    } = a, H = ct(a.tabIndex, k), l = t.useRef(null), C = t.useRef(null), w = t.useRef(null), ie = t.useRef(null), $ = t.useRef(null), E = t.useRef(null), G = t.useRef(!1), _ = t.useRef([]), j = t.useRef(null), [R, We] = t.useState(), [qe, be] = t.useState(!1), [d, oe] = t.useState(!1), [le, Ae] = t.useState(), [ze, He] = t.useState([]), [ye, $e] = t.useState(""), s = S !== void 0 ? S : qe, se = !!(Array.isArray(m) && m.length), ce = Rt({ validationMessage: q, valid: Ke, required: he }, se), I = ut(C, a.dir), Ge = {
+      width: kt(C, y, M, L),
+      ...I !== void 0 ? { direction: I } : {}
+    }, _e = t.useCallback(() => C.current && C.current.focus(), []), Ce = dt(), N = !!(le && Ce && le <= Ce.medium && a.adaptive);
+    _.current = fe === void 0 ? (m || []).map((e) => ({ text: yt(e, a.textField), data: [e] })) : [...fe], t.useImperativeHandle(l, () => ({
       props: a,
       element: C.current,
-      focus: Ge
+      focus: _e
     })), t.useImperativeHandle(
-      R,
+      D,
       () => l.current
     );
-    const _e = t.useCallback(() => {
+    const je = t.useCallback(() => {
       $.current && $.current.setCustomValidity && $.current.setCustomValidity(
-        se.valid ? "" : A === void 0 ? wt : A
+        ce.valid ? "" : q === void 0 ? Tt : q
       );
-    }, [A, se]);
-    t.useEffect(_e), t.useEffect(() => {
-      const e = dt && window.ResizeObserver && new window.ResizeObserver(nt.bind(void 0));
+    }, [q, ce]);
+    t.useEffect(je), t.useEffect(() => {
+      const e = pt && window.ResizeObserver && new window.ResizeObserver(at.bind(void 0));
       return document != null && document.body && e && e.observe(document.body), () => {
         e && e.disconnect();
       };
@@ -97,11 +95,11 @@ const wt = "Please select a value from the list!", { sizeMap: Pe, roundedMap: It
       j.current && s && j.current.setPosition(j.current.element);
     }, [m, s]);
     const F = t.useCallback(
-      (e, i, r) => {
+      (e, r, i) => {
         if (a.onChange) {
           const b = {
-            items: i,
-            operation: r,
+            items: r,
+            operation: i,
             ...e
           };
           a.onChange.call(void 0, b);
@@ -110,41 +108,41 @@ const wt = "Please select a value from the list!", { sizeMap: Pe, roundedMap: It
       [a.onChange]
     ), U = t.useCallback(
       (e) => {
-        if (bt(e.item, m, S) || !l.current)
+        if (Ct(e.item, m, x) || !l.current)
           return;
-        const { item: i, nativeEvent: r, syntheticEvent: b } = e, D = {
+        const { item: r, nativeEvent: i, syntheticEvent: b } = e, T = {
           syntheticEvent: b,
-          nativeEvent: r,
+          nativeEvent: i,
           target: l.current
         };
-        F(D, [i], "toggle");
+        F(T, [r], "toggle");
       },
-      [m, S, F]
+      [m, x, F]
     ), J = t.useCallback(
       (e) => {
         if (!s) {
-          if (ae) {
-            const i = { ...e };
-            ae.call(void 0, i);
+          if (re) {
+            const r = { ...e };
+            re.call(void 0, r);
           }
-          w === void 0 && (he(!0), ze(m || []), P && setTimeout(() => {
-            var i;
-            u((i = ie.current) == null ? void 0 : i.element);
+          S === void 0 && (be(!0), He(m || []), N && setTimeout(() => {
+            var r;
+            u((r = ie.current) == null ? void 0 : r.element);
           }, 300));
         }
       },
-      [s, w, ae, P, ie]
+      [s, S, re, N, ie]
     ), g = t.useCallback(
       (e) => {
         if (s) {
           if (z) {
-            const i = { ...e };
-            z.call(void 0, i);
+            const r = { ...e };
+            z.call(void 0, r);
           }
-          w === void 0 && he(!1);
+          S === void 0 && be(!1);
         }
       },
-      [s, w, z]
+      [s, S, z]
     ), h = t.useCallback((e) => {
       G.current = !0, e(), window.setTimeout(() => G.current = !1, 0);
     }, []), u = t.useCallback(
@@ -152,125 +150,125 @@ const wt = "Please select a value from the list!", { sizeMap: Pe, roundedMap: It
         e && h(() => e.focus());
       },
       [h]
-    ), je = t.useCallback(() => {
+    ), Ue = t.useCallback(() => {
       var e;
-      !d && s ? g({ target: l.current }) : a.filterable ? u((e = I.current) == null ? void 0 : e.element) : u(k.current && k.current.element);
-    }, [d, s, u, g, a.filterable]), Ue = t.useCallback(() => {
+      !d && s ? g({ target: l.current }) : a.filterable ? u((e = w.current) == null ? void 0 : e.element) : u(E.current && E.current.element);
+    }, [d, s, u, g, a.filterable]), Je = t.useCallback(() => {
       d && u(C.current);
-    }, [d, u]), Je = t.useCallback(
+    }, [d, u]), Qe = t.useCallback(
       (e) => {
-        if (!d && !G.current && (re(!0), a.onFocus && l.current)) {
-          const i = {
+        if (!d && !G.current && (oe(!0), a.onFocus && l.current)) {
+          const r = {
             syntheticEvent: e,
             nativeEvent: e.nativeEvent,
             target: l.current
           };
-          a.onFocus.call(void 0, i);
+          a.onFocus.call(void 0, r);
         }
       },
       [d, a.onFocus]
-    ), Qe = t.useCallback(
+    ), Xe = t.useCallback(
       (e) => {
         if (d && !G.current && l.current) {
-          re(!1);
-          const i = {
+          oe(!1);
+          const r = {
             syntheticEvent: e,
             nativeEvent: e.nativeEvent,
             target: l.current
           };
           if (a.onBlur) {
-            const r = { ...i };
-            a.onBlur.call(void 0, r);
+            const i = { ...r };
+            a.onBlur.call(void 0, i);
           }
-          P || g(i);
+          N || g(r);
         }
       },
-      [d, a.onBlur, s, w, z]
-    ), Xe = t.useCallback(() => {
+      [d, a.onBlur, s, S, z]
+    ), Ye = t.useCallback(() => {
       d && h(Z);
-    }, [d, h]), Ye = t.useCallback(
+    }, [d, h]), Ze = t.useCallback(
       (e) => {
         if (!e.isDefaultPrevented() && l.current) {
-          re(!0);
-          const i = {
+          oe(!0);
+          const r = {
             syntheticEvent: e,
             nativeEvent: e.nativeEvent,
             target: l.current
           };
-          s || J(i);
+          s || J(r);
         }
       },
       [s, J]
-    ), Ze = t.useCallback(
+    ), et = t.useCallback(
       (e) => {
-        var Y, Ie;
-        const { keyCode: i, altKey: r } = e, b = k.current && k.current.element;
-        if (!l.current || e.isDefaultPrevented() && ((Y = I.current) == null ? void 0 : Y.element) === e.target)
+        var Y, Te;
+        const { keyCode: r, altKey: i } = e, b = E.current && E.current.element;
+        if (!l.current || e.isDefaultPrevented() && ((Y = w.current) == null ? void 0 : Y.element) === e.target)
           return;
-        const D = {
+        const T = {
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
           target: l.current
         };
-        if (m && m.length > 0 && (i === o.left || i === o.right || i === o.home || i === o.end || i === o.delete)) {
+        if (m && m.length > 0 && (r === o.left || r === o.right || r === o.home || r === o.end || r === o.delete)) {
           const c = _.current;
-          let p = N ? c.findIndex((at) => De(at, N, S)) : -1, f;
-          const ue = p !== -1;
-          i === o.left ? (ue ? p = Math.max(0, p - 1) : p = c.length - 1, f = c[p]) : i === o.right ? p === c.length - 1 ? f = void 0 : ue && (p = Math.min(c.length - 1, p + 1), f = c[p]) : i === o.home ? f = c[0] : i === o.end ? f = c[c.length - 1] : i === o.delete && ue && F(D, c[p].data, "delete"), f !== N && Ve(f);
+          let p = R ? c.findIndex((rt) => Me(rt, R, x)) : -1, f;
+          const de = p !== -1;
+          r === o.left ? (de ? p = Math.max(0, p - 1) : p = c.length - 1, f = c[p]) : r === o.right ? p === c.length - 1 ? f = void 0 : de && (p = Math.min(c.length - 1, p + 1), f = c[p]) : r === o.home ? f = c[0] : r === o.end ? f = c[c.length - 1] : r === o.delete && de && F(T, c[p].data, "delete"), f !== R && We(f);
         }
         if (s)
-          if (i === o.esc || r && i === o.up)
-            e.preventDefault(), g(D);
-          else if (b && b.querySelector(".k-focus") && (i === o.up || i === o.down || i === o.left || i === o.right || i === o.home || i === o.end)) {
-            if (i === o.up && ((Ie = I.current) != null && Ie.element)) {
+          if (r === o.esc || i && r === o.up)
+            e.preventDefault(), g(T);
+          else if (b && b.querySelector(".k-focus") && (r === o.up || r === o.down || r === o.left || r === o.right || r === o.home || r === o.end)) {
+            if (r === o.up && ((Te = w.current) != null && Te.element)) {
               const c = Array.from(b.querySelectorAll(".k-treeview-item")), p = [...c].reverse().find((f) => !!(f && f.querySelector(".k-focus")));
               if (p && c.indexOf(p) === 0)
                 return h(() => {
                   var f;
-                  u((f = I.current) == null ? void 0 : f.element);
+                  u((f = w.current) == null ? void 0 : f.element);
                 });
             }
             h(Z);
           } else
-            i === o.down && h(() => {
+            r === o.down && h(() => {
               var c;
-              u(((c = I.current) == null ? void 0 : c.element) || b);
+              u(((c = w.current) == null ? void 0 : c.element) || b);
             });
         else
-          r && i === o.down && (e.preventDefault(), J(D));
+          i && r === o.down && (e.preventDefault(), J(T));
       },
-      [s, g, u, h, J, N, S, m, F]
-    ), Ce = t.useCallback(
+      [s, g, u, h, J, R, x, m, F]
+    ), ke = t.useCallback(
       (e) => {
-        const { keyCode: i, altKey: r } = e;
-        r || i !== o.up && i !== o.down || (e.preventDefault(), h(
-          i === o.up ? () => {
+        const { keyCode: r, altKey: i } = e;
+        i || r !== o.up && r !== o.down || (e.preventDefault(), h(
+          r === o.up ? () => {
             u(C.current);
           } : () => {
-            u(k.current && k.current.element);
+            u(E.current && E.current.element);
           }
         ));
       },
       [u, h]
-    ), ce = t.useCallback(
+    ), ue = t.useCallback(
       (e) => {
         if (!l.current)
           return;
-        const i = {
+        const r = {
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
           target: l.current
         };
-        F(i, [], "clear"), g(i), e.preventDefault();
+        F(r, [], "clear"), g(r), e.preventDefault();
       },
       [F, g]
-    ), et = t.useCallback(
-      (e, i) => {
-        var r;
-        g({ target: l.current }), d || u((r = I.current) == null ? void 0 : r.element), F(
+    ), tt = t.useCallback(
+      (e, r) => {
+        var i;
+        g({ target: l.current }), d || u((i = w.current) == null ? void 0 : i.element), F(
           {
-            syntheticEvent: i,
-            nativeEvent: i.nativeEvent,
+            syntheticEvent: r,
+            nativeEvent: r.nativeEvent,
             target: l.current
           },
           e,
@@ -281,21 +279,21 @@ const wt = "Please select a value from the list!", { sizeMap: Pe, roundedMap: It
     ), Ee = t.useCallback(
       (e) => {
         if (a.onExpandChange && l.current) {
-          const { item: i, itemHierarchicalIndex: r, nativeEvent: b, syntheticEvent: D } = e, Y = {
-            level: Tt(r),
-            item: i,
+          const { item: r, itemHierarchicalIndex: i, nativeEvent: b, syntheticEvent: T } = e, Y = {
+            level: Mt(i),
+            item: r,
             nativeEvent: b,
-            syntheticEvent: D,
+            syntheticEvent: T,
             target: l.current
           };
           a.onExpandChange.call(void 0, Y);
         }
       },
       [a.onExpandChange]
-    ), ke = t.useCallback(
+    ), Fe = t.useCallback(
       (e) => {
         if (a.onFilterChange && l.current) {
-          const r = {
+          const i = {
             filter: {
               field: a.textField,
               operator: "contains",
@@ -305,65 +303,65 @@ const wt = "Please select a value from the list!", { sizeMap: Pe, roundedMap: It
             nativeEvent: e.nativeEvent,
             target: l.current
           };
-          a.onFilterChange.call(void 0, r), a.filter === void 0 && He(e.target.value);
+          a.onFilterChange.call(void 0, i), a.filter === void 0 && $e(e.target.value);
         }
       },
       [a.onFilterChange, a.filter, a.textField]
-    ), Fe = t.useCallback(
+    ), xe = t.useCallback(
       (e) => {
         if (!l.current)
           return;
-        const i = {
+        const r = {
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
           target: l.current
         };
-        a.onCancel && a.onCancel.call(void 0, i), g(i), e.preventDefault();
+        a.onCancel && a.onCancel.call(void 0, r), g(r), e.preventDefault();
       },
       [a.onCancel, g]
-    ), tt = () => {
+    ), nt = () => {
       const e = a.filterable ? /* @__PURE__ */ t.createElement(
-        Ne,
+        Pe,
         {
-          value: a.filter === void 0 ? be : a.filter,
+          value: a.filter === void 0 ? ye : a.filter,
           ref: ie,
-          onChange: ke,
-          onKeyDown: Ce,
+          onChange: Fe,
+          onKeyDown: ke,
           size: v,
           rounded: K,
-          fillMode: W
+          fillMode: A
         }
-      ) : null, i = {
+      ) : null, r = {
         title: a.adaptiveTitle,
         expand: s,
-        onClose: (r) => a.onCancel ? Fe(r) : ce(r),
-        windowWidth: oe,
+        onClose: (i) => a.onCancel ? xe(i) : ue(i),
+        windowWidth: le,
         mobileFilter: e,
         footer: {
           cancelText: Q.toLanguageString(
             Re,
             ne[Re]
           ),
-          onCancel: (r) => a.onCancel ? Fe(r) : ce(r),
+          onCancel: (i) => a.onCancel ? xe(i) : ue(i),
           applyText: Q.toLanguageString(
-            Me,
-            ne[Me]
+            Ne,
+            ne[Ne]
           ),
-          onApply: (r) => g(r)
+          onApply: (i) => g(i)
         }
       };
-      return /* @__PURE__ */ t.createElement(xt, { ...i }, /* @__PURE__ */ t.createElement(St, { overflowHidden: !0 }, /* @__PURE__ */ t.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ t.createElement("div", { className: "k-list k-list-lg" }, q.length > 0 ? /* @__PURE__ */ t.createElement(
-        Te,
+      return /* @__PURE__ */ t.createElement(wt, { ...r }, /* @__PURE__ */ t.createElement(It, { overflowHidden: !0 }, /* @__PURE__ */ t.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ t.createElement("div", { className: "k-list k-list-lg" }, W.length > 0 ? /* @__PURE__ */ t.createElement(
+        De,
         {
-          ref: k,
+          ref: E,
           tabIndex: H,
-          data: q,
-          focusIdField: S,
+          data: W,
+          focusIdField: x,
           textField: a.textField,
-          checkField: fe,
-          checkIndeterminateField: me,
+          checkField: me,
+          checkIndeterminateField: ge,
           expandField: a.expandField,
-          childrenField: ge,
+          childrenField: ve,
           expandIcons: !0,
           onItemClick: U,
           onCheckChange: U,
@@ -371,74 +369,74 @@ const wt = "Please select a value from the list!", { sizeMap: Pe, roundedMap: It
           checkboxes: !0,
           size: v,
           item: a.item,
-          dir: T
+          dir: I
         }
-      ) : /* @__PURE__ */ t.createElement(xe, null, Q.toLanguageString(te, ne[te]))))));
-    }, nt = t.useCallback((e) => {
-      for (const i of e)
-        Ae(i.target.clientWidth);
-    }, []), xe = a.listNoData || Ct, Q = gt(), Se = !Ke || se.valid, X = P && s ? We : _.current, we = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+      ) : /* @__PURE__ */ t.createElement(Se, null, Q.toLanguageString(te, ne[te]))))));
+    }, at = t.useCallback((e) => {
+      for (const r of e)
+        Ae(r.target.clientWidth);
+    }, []), Se = a.listNoData || Et, Q = ht(), we = !Ve || ce.valid, X = N && s ? ze : _.current, Ie = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
       "span",
       {
         className: ee("k-multiselecttree k-input", a.className, {
-          [`k-input-${Pe[v] || v}`]: v,
-          [`k-rounded-${It[K] || K}`]: K,
-          [`k-input-${W}`]: W,
-          "k-focus": d && !E,
-          "k-invalid": !Se,
-          "k-disabled": E,
+          [`k-input-${Oe[v] || v}`]: v,
+          [`k-rounded-${Dt[K] || K}`]: K,
+          [`k-input-${A}`]: A,
+          "k-focus": d && !k,
+          "k-invalid": !we,
+          "k-disabled": k,
           "k-loading": a.loading,
-          "k-required": ve
+          "k-required": he
         }),
         tabIndex: H,
         accessKey: a.accessKey,
-        id: x,
+        id: O,
         style: B ? { ...L, width: void 0 } : L,
-        dir: T,
+        dir: I,
         ref: C,
-        onKeyDown: E ? void 0 : Ze,
-        onMouseDown: Xe,
-        onFocus: Je,
-        onBlur: Qe,
+        onKeyDown: k ? void 0 : et,
+        onMouseDown: Ye,
+        onFocus: Qe,
+        onBlur: Xe,
         role: "combobox",
         "aria-haspopup": "tree",
         "aria-expanded": s,
-        "aria-disabled": E,
+        "aria-disabled": k,
         "aria-label": B,
         "aria-labelledby": a.ariaLabelledBy,
-        "aria-describedby": a.ariaDescribedBy ? a.ariaDescribedBy : "tagslist-" + x,
+        "aria-describedby": a.ariaDescribedBy ? a.ariaDescribedBy : "tagslist-" + O,
         "aria-required": a.required,
-        onClick: E ? void 0 : Ye
+        onClick: k ? void 0 : Ze
       },
       /* @__PURE__ */ t.createElement(
         "div",
         {
-          id: "tagslist-" + x,
+          id: "tagslist-" + O,
           className: ee("k-input-values k-chip-list", {
-            [`k-chip-list-${Pe[v] || v}`]: v
+            [`k-chip-list-${Oe[v] || v}`]: v
           })
         },
         X.length > 0 && /* @__PURE__ */ t.createElement(
-          kt,
+          xt,
           {
             tag: a.tag,
-            onTagDelete: et,
+            onTagDelete: tt,
             data: X,
-            guid: x,
-            focused: N ? _.current.find(
-              (e) => De(e, N, S)
+            guid: O,
+            focused: R ? _.current.find(
+              (e) => Me(e, R, x)
             ) : void 0,
             size: v
           }
         )
       ),
-      /* @__PURE__ */ t.createElement("span", { className: "k-input-inner" }, X.length === 0 && /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, de)),
-      a.loading && /* @__PURE__ */ t.createElement(pt, { className: "k-input-loading-icon", name: "loading" }),
-      le && !E && X.length > 0 && /* @__PURE__ */ t.createElement(Ft, { onClick: ce }),
+      /* @__PURE__ */ t.createElement("span", { className: "k-input-inner" }, X.length === 0 && /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, pe)),
+      a.loading && /* @__PURE__ */ t.createElement(ft, { className: "k-input-loading-icon", name: "loading" }),
+      se && !k && X.length > 0 && /* @__PURE__ */ t.createElement(St, { onClick: ue }),
       /* @__PURE__ */ t.createElement(
         "select",
         {
-          name: Le,
+          name: Be,
           ref: $,
           tabIndex: -1,
           "aria-hidden": !0,
@@ -447,47 +445,47 @@ const wt = "Please select a value from the list!", { sizeMap: Pe, roundedMap: It
         },
         /* @__PURE__ */ t.createElement("option", { value: a.valueMap ? a.valueMap.call(void 0, m) : m })
       ),
-      !P && /* @__PURE__ */ t.createElement(
-        mt,
+      !N && /* @__PURE__ */ t.createElement(
+        vt,
         {
           ...M,
           popupClass: ee(M.popupClass, "k-multiselecttree-popup"),
-          className: ee(M.className, { "k-rtl": T === "rtl" }),
-          style: $e,
+          className: ee(M.className, { "k-rtl": I === "rtl" }),
+          style: Ge,
           anchor: M.anchor || C.current,
           show: s,
-          onOpen: je,
-          onClose: Ue,
+          onOpen: Ue,
+          onClose: Je,
           ref: j
         },
         a.filterable && /* @__PURE__ */ t.createElement(
-          Ne,
+          Pe,
           {
-            value: a.filter === void 0 ? be : a.filter,
-            ref: I,
-            onChange: ke,
-            onKeyDown: Ce,
+            value: a.filter === void 0 ? ye : a.filter,
+            ref: w,
+            onChange: Fe,
+            onKeyDown: ke,
             tabIndex: H,
             size: v,
             rounded: K,
-            fillMode: W,
+            fillMode: A,
             renderListFilterWrapper: !0,
             renderPrefixSeparator: !0
           }
         ),
-        q.length > 0 ? /* @__PURE__ */ t.createElement(
-          Te,
+        W.length > 0 ? /* @__PURE__ */ t.createElement(
+          De,
           {
             style: { height: M.height },
-            ref: k,
+            ref: E,
             tabIndex: H,
-            data: q,
-            focusIdField: S,
+            data: W,
+            focusIdField: x,
             textField: a.textField,
-            checkField: fe,
-            checkIndeterminateField: me,
+            checkField: me,
+            checkIndeterminateField: ge,
             expandField: a.expandField,
-            childrenField: ge,
+            childrenField: ve,
             expandIcons: !0,
             onItemClick: U,
             onCheckChange: U,
@@ -495,27 +493,28 @@ const wt = "Please select a value from the list!", { sizeMap: Pe, roundedMap: It
             checkboxes: !0,
             size: v,
             item: a.item,
-            dir: T
+            dir: I
           }
-        ) : /* @__PURE__ */ t.createElement(xe, null, Q.toLanguageString(te, ne[te]))
+        ) : /* @__PURE__ */ t.createElement(Se, null, Q.toLanguageString(te, ne[te])),
+        V && /* @__PURE__ */ t.createElement(mt, null)
       )
-    ), P && tt());
+    ), N && nt());
     return B ? /* @__PURE__ */ t.createElement(
-      Et,
+      Ft,
       {
         label: B,
-        editorValue: le,
-        editorPlaceholder: de,
-        editorValid: Se,
-        editorDisabled: E,
-        editorId: x,
+        editorValue: se,
+        editorPlaceholder: pe,
+        editorValid: we,
+        editorDisabled: k,
+        editorId: O,
         style: { width: L ? L.width : void 0 },
-        children: we,
-        dir: T
+        children: Ie,
+        dir: I
       }
-    ) : we;
+    ) : Ie;
   }
-), Mt = {
+), Pt = {
   opened: n.bool,
   disabled: n.bool,
   dir: n.string,
@@ -578,9 +577,9 @@ const wt = "Please select a value from the list!", { sizeMap: Pe, roundedMap: It
   adaptiveTitle: n.string,
   adaptive: n.bool
 };
-Oe.displayName = "KendoReactMultiSelectTree";
-Oe.propTypes = Mt;
+Le.displayName = "KendoReactMultiSelectTree";
+Le.propTypes = Pt;
 export {
-  Oe as MultiSelectTree,
-  Rt as MultiSelectTreePropsContext
+  Le as MultiSelectTree,
+  Nt as MultiSelectTreePropsContext
 };