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

package/MultiSelectTree/MultiSelectTree.mjs

@@ -8,7 +8,7 @@
 "use client";
 import * as t from "react";
 import a from "prop-types";
-import { createPropsContext as at, usePropsContext as rt, validatePackage as it, useId as ot, getTabIndex as lt, useRtl as st, canUseDOM as ct, noop as Z, Keys as o, classNames as ee, IconWrap as ut, kendoThemeMaps as dt } from "@progress/kendo-react-common";
+import { createPropsContext as at, usePropsContext as it, validatePackage as rt, useId as ot, getTabIndex as lt, useRtl as st, canUseDOM as ct, noop as Z, Keys as o, classNames as ee, IconWrap as ut, kendoThemeMaps as dt } from "@progress/kendo-react-common";
 import { Popup as pt } from "@progress/kendo-react-popup";
 import { useLocalization as ft } from "@progress/kendo-react-intl";
 import { TreeView as Te } from "@progress/kendo-react-treeview";
@@ -25,13 +25,13 @@ import { AdaptiveMode as kt } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as Ft } from "@progress/kendo-react-layout";
 import { MOBILE_MEDIUM_DEVISE as xt } from "../common/constants.mjs";
 const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St } = dt, wt = (O) => O.split("_").map((R) => parseInt(R, 10)), Tt = (O, R) => {
-  const { validationMessage: n, valid: K, required: F } = O;
+  const { validationMessage: n, valid: K, required: x } = O;
   return {
     customError: n !== void 0,
-    valid: !!(K !== void 0 ? K : !F || R),
+    valid: !!(K !== void 0 ? K : !x || R),
     valueMissing: !R
   };
-}, D = {
+}, F = {
   checkField: "checkField",
   checkIndeterminateField: "checkIndeterminateField",
   subItemsField: "items",
@@ -46,32 +46,32 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
   required: !1,
   validityStyles: !0
 }, Dt = at(), de = t.forwardRef((O, R) => {
-  const n = rt(Dt, O);
-  it(mt);
-  const K = ot(), F = n.id || K, {
+  const n = it(Dt, O);
+  rt(mt);
+  const K = ot(), x = n.id || K, {
     data: q = [],
-    dataItemKey: x,
+    dataItemKey: I,
     popupSettings: M = {},
     style: L = {},
-    opened: I,
+    opened: S,
     disabled: C,
     onOpen: ae = Z,
     onClose: A = Z,
     placeholder: pe,
     label: B,
     name: Oe,
-    checkField: fe = D.checkField,
-    checkIndeterminateField: me = D.checkIndeterminateField,
-    subItemsField: ge = D.subItemsField,
+    checkField: fe = F.checkField,
+    checkIndeterminateField: me = F.checkIndeterminateField,
+    subItemsField: ge = F.subItemsField,
     validationMessage: W,
     valid: Le,
     tags: ve,
     value: m,
-    required: he = D.required,
-    validityStyles: Be = D.validityStyles
-  } = n, z = lt(n.tabIndex, C), l = t.useRef(null), y = t.useRef(null), S = t.useRef(null), re = t.useRef(null), _ = t.useRef(null), E = t.useRef(null), $ = t.useRef(!1), H = t.useRef([]), G = t.useRef(null), [N, Ve] = t.useState(), [Ke, be] = t.useState(!1), [d, ie] = t.useState(!1), [oe, qe] = t.useState(), [Ae, We] = t.useState([]), [ye, ze] = t.useState(""), P = !!(oe && oe <= xt && n.adaptive), s = I !== void 0 ? I : Ke, le = !!(Array.isArray(m) && m.length), se = Tt({ validationMessage: W, valid: Le, required: he }, le), w = st(y, n.dir), _e = {
-    width: ht(y, D, M, L),
-    ...w !== void 0 ? { direction: w } : {}
+    required: he = F.required,
+    validityStyles: Be = F.validityStyles
+  } = n, z = lt(n.tabIndex, C), l = t.useRef(null), y = t.useRef(null), w = t.useRef(null), ie = t.useRef(null), _ = t.useRef(null), E = t.useRef(null), $ = t.useRef(!1), H = t.useRef([]), G = t.useRef(null), [N, Ve] = t.useState(), [Ke, be] = t.useState(!1), [d, re] = t.useState(!1), [oe, qe] = t.useState(), [Ae, We] = t.useState([]), [ye, ze] = t.useState(""), P = !!(oe && oe <= xt && n.adaptive), s = S !== void 0 ? S : Ke, le = !!(Array.isArray(m) && m.length), se = Tt({ validationMessage: W, valid: Le, required: he }, le), T = st(y, n.dir), _e = {
+    width: ht(y, F, { ...F.popupSettings, ...M }, L),
+    ...T !== void 0 ? { direction: T } : {}
   }, $e = t.useCallback(() => y.current && y.current.focus(), []);
   H.current = ve === void 0 ? (m || []).map((e) => ({ text: gt(e, n.textField), data: [e] })) : [...ve], t.useImperativeHandle(
     l,
@@ -101,11 +101,11 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
     [m, s]
   );
   const k = t.useCallback(
-    (e, r, i) => {
+    (e, i, r) => {
       if (n.onChange) {
         const b = {
-          items: r,
-          operation: i,
+          items: i,
+          operation: r,
           ...e
         };
         n.onChange.call(void 0, b);
@@ -114,41 +114,41 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
     [n.onChange]
   ), U = t.useCallback(
     (e) => {
-      if (vt(e.item, m, x) || !l.current)
+      if (vt(e.item, m, I) || !l.current)
         return;
-      const { item: r, nativeEvent: i, syntheticEvent: b } = e, T = {
+      const { item: i, nativeEvent: r, syntheticEvent: b } = e, D = {
         syntheticEvent: b,
-        nativeEvent: i,
+        nativeEvent: r,
         target: l.current
       };
-      k(T, [r], "toggle");
+      k(D, [i], "toggle");
     },
-    [m, x, k]
+    [m, I, k]
   ), j = t.useCallback(
     (e) => {
       if (!s) {
         if (ae) {
-          const r = { ...e };
-          ae.call(void 0, r);
+          const i = { ...e };
+          ae.call(void 0, i);
         }
-        I === void 0 && (be(!0), We(m || []), P && setTimeout(() => {
-          var r;
-          u((r = re.current) == null ? void 0 : r.element);
+        S === void 0 && (be(!0), We(m || []), P && setTimeout(() => {
+          var i;
+          u((i = ie.current) == null ? void 0 : i.element);
         }, 300));
       }
     },
-    [s, I, ae, P, re]
+    [s, S, ae, P, ie]
   ), g = t.useCallback(
     (e) => {
       if (s) {
         if (A) {
-          const r = { ...e };
-          A.call(void 0, r);
+          const i = { ...e };
+          A.call(void 0, i);
         }
-        I === void 0 && be(!1);
+        S === void 0 && be(!1);
       }
     },
-    [s, I, A]
+    [s, S, A]
   ), h = t.useCallback(
     (e) => {
       $.current = !0, e(), window.setTimeout(() => $.current = !1, 0);
@@ -162,7 +162,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
   ), Ge = t.useCallback(
     () => {
       var e;
-      !d && s ? g({ target: l.current }) : n.filterable ? u((e = S.current) == null ? void 0 : e.element) : u(E.current && E.current.element);
+      !d && s ? g({ target: l.current }) : n.filterable ? u((e = w.current) == null ? void 0 : e.element) : u(E.current && E.current.element);
     },
     [d, s, u, g, n.filterable]
   ), Ue = t.useCallback(
@@ -172,33 +172,33 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
     [d, u]
   ), je = t.useCallback(
     (e) => {
-      if (!d && !$.current && (ie(!0), n.onFocus && l.current)) {
-        const r = {
+      if (!d && !$.current && (re(!0), n.onFocus && l.current)) {
+        const i = {
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
           target: l.current
         };
-        n.onFocus.call(void 0, r);
+        n.onFocus.call(void 0, i);
       }
     },
     [d, n.onFocus]
   ), Je = t.useCallback(
     (e) => {
       if (d && !$.current && l.current) {
-        ie(!1);
-        const r = {
+        re(!1);
+        const i = {
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
           target: l.current
         };
         if (n.onBlur) {
-          const i = { ...r };
-          n.onBlur.call(void 0, i);
+          const r = { ...i };
+          n.onBlur.call(void 0, r);
         }
-        P || g(r);
+        P || g(i);
       }
     },
-    [d, n.onBlur, s, I, A]
+    [d, n.onBlur, s, S, A]
   ), Qe = t.useCallback(
     () => {
       d && h(Z);
@@ -207,60 +207,60 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
   ), Xe = t.useCallback(
     (e) => {
       if (!e.isDefaultPrevented() && l.current) {
-        ie(!0);
-        const r = {
+        re(!0);
+        const i = {
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
           target: l.current
         };
-        s || j(r);
+        s || j(i);
       }
     },
     [s, j]
   ), Ye = t.useCallback(
     (e) => {
       var Y, we;
-      const { keyCode: r, altKey: i } = e, b = E.current && E.current.element;
-      if (!l.current || e.isDefaultPrevented() && ((Y = S.current) == null ? void 0 : Y.element) === e.target)
+      const { keyCode: i, altKey: r } = e, b = E.current && E.current.element;
+      if (!l.current || e.isDefaultPrevented() && ((Y = w.current) == null ? void 0 : Y.element) === e.target)
         return;
-      const T = {
+      const D = {
         syntheticEvent: e,
         nativeEvent: e.nativeEvent,
         target: l.current
       };
-      if (m && m.length > 0 && (r === o.left || r === o.right || r === o.home || r === o.end || r === o.delete)) {
+      if (m && m.length > 0 && (i === o.left || i === o.right || i === o.home || i === o.end || i === o.delete)) {
         const c = H.current;
-        let p = N ? c.findIndex((nt) => De(nt, N, x)) : -1, f;
+        let p = N ? c.findIndex((nt) => De(nt, N, I)) : -1, f;
         const ue = p !== -1;
-        r === o.left ? (ue ? p = Math.max(0, p - 1) : p = c.length - 1, f = c[p]) : r === o.right ? p === c.length - 1 ? f = void 0 : ue && (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 && ue && k(T, c[p].data, "delete"), f !== N && Ve(f);
+        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 && k(D, c[p].data, "delete"), f !== N && Ve(f);
       }
       if (s)
-        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 && ((we = S.current) != null && we.element)) {
+        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 && ((we = w.current) != null && we.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 = S.current) == null ? void 0 : f.element);
+                u((f = w.current) == null ? void 0 : f.element);
               });
           }
           h(Z);
         } else
-          r === o.down && h(() => {
+          i === o.down && h(() => {
             var c;
-            u(((c = S.current) == null ? void 0 : c.element) || b);
+            u(((c = w.current) == null ? void 0 : c.element) || b);
           });
       else
-        i && r === o.down && (e.preventDefault(), j(T));
+        r && i === o.down && (e.preventDefault(), j(D));
     },
-    [s, g, u, h, j, N, x, m, k]
+    [s, g, u, h, j, N, I, m, k]
   ), Ce = t.useCallback(
     (e) => {
-      const { keyCode: r, altKey: i } = e;
-      i || r !== o.up && r !== o.down || (e.preventDefault(), h(
-        r === o.up ? () => {
+      const { keyCode: i, altKey: r } = e;
+      r || i !== o.up && i !== o.down || (e.preventDefault(), h(
+        i === o.up ? () => {
           u(y.current);
         } : () => {
           u(E.current && E.current.element);
@@ -272,20 +272,20 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
     (e) => {
       if (!l.current)
         return;
-      const r = {
+      const i = {
         syntheticEvent: e,
         nativeEvent: e.nativeEvent,
         target: l.current
       };
-      k(r, [], "clear"), g(r), e.preventDefault();
+      k(i, [], "clear"), g(i), e.preventDefault();
     },
     [k, g]
   ), Ze = t.useCallback(
-    (e, r) => {
-      var i;
-      g({ target: l.current }), d || u((i = S.current) == null ? void 0 : i.element), k({
-        syntheticEvent: r,
-        nativeEvent: r.nativeEvent,
+    (e, i) => {
+      var r;
+      g({ target: l.current }), d || u((r = w.current) == null ? void 0 : r.element), k({
+        syntheticEvent: i,
+        nativeEvent: i.nativeEvent,
         target: l.current
       }, e, "delete");
     },
@@ -293,11 +293,11 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
   ), Ee = t.useCallback(
     (e) => {
       if (n.onExpandChange && l.current) {
-        const { item: r, itemHierarchicalIndex: i, nativeEvent: b, syntheticEvent: T } = e, Y = {
-          level: wt(i),
-          item: r,
+        const { item: i, itemHierarchicalIndex: r, nativeEvent: b, syntheticEvent: D } = e, Y = {
+          level: wt(r),
+          item: i,
           nativeEvent: b,
-          syntheticEvent: T,
+          syntheticEvent: D,
           target: l.current
         };
         n.onExpandChange.call(void 0, Y);
@@ -307,13 +307,13 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
   ), ke = t.useCallback(
     (e) => {
       if (n.onFilterChange && l.current) {
-        const i = {
+        const r = {
           filter: { field: n.textField, operator: "contains", value: e.target.value },
           syntheticEvent: e.syntheticEvent,
           nativeEvent: e.nativeEvent,
           target: l.current
         };
-        n.onFilterChange.call(void 0, i), n.filter === void 0 && ze(e.target.value);
+        n.onFilterChange.call(void 0, r), n.filter === void 0 && ze(e.target.value);
       }
     },
     [n.onFilterChange, n.filter, n.textField]
@@ -321,12 +321,12 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
     (e) => {
       if (!l.current)
         return;
-      const r = {
+      const i = {
         syntheticEvent: e,
         nativeEvent: e.nativeEvent,
         target: l.current
       };
-      n.onCancel && n.onCancel.call(void 0, r), g(r), e.preventDefault();
+      n.onCancel && n.onCancel.call(void 0, i), g(i), e.preventDefault();
     },
     [n.onCancel, g]
   ), et = () => {
@@ -334,33 +334,33 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
       Ne,
       {
         value: n.filter === void 0 ? ye : n.filter,
-        ref: re,
+        ref: ie,
         onChange: ke,
         onKeyDown: Ce,
         size: v,
         rounded: V,
         fillMode: Q
       }
-    ) : null, r = {
+    ) : null, i = {
       adaptiveTitle: n.adaptiveTitle,
       expand: s,
-      onClose: (i) => n.onCancel ? Fe(i) : ce(i),
+      onClose: (r) => n.onCancel ? Fe(r) : ce(r),
       windowWidth: oe,
       mobileFilter: e,
       footer: {
         cancelText: J.toLanguageString(Re, ne[Re]),
-        onCancel: (i) => n.onCancel ? Fe(i) : ce(i),
+        onCancel: (r) => n.onCancel ? Fe(r) : ce(r),
         applyText: J.toLanguageString(Me, ne[Me]),
-        onApply: (i) => g(i)
+        onApply: (r) => g(r)
       }
     };
-    return /* @__PURE__ */ t.createElement(kt, { ...r }, /* @__PURE__ */ t.createElement(Ft, { className: "!k-overflow-hidden" }, /* @__PURE__ */ t.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ t.createElement("div", { className: "k-list k-list-lg" }, q.length > 0 ? /* @__PURE__ */ t.createElement(
+    return /* @__PURE__ */ t.createElement(kt, { ...i }, /* @__PURE__ */ t.createElement(Ft, { className: "!k-overflow-hidden" }, /* @__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,
       {
         ref: E,
         tabIndex: z,
         data: q,
-        focusIdField: x,
+        focusIdField: I,
         textField: n.textField,
         checkField: fe,
         checkIndeterminateField: me,
@@ -373,13 +373,13 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
         checkboxes: !0,
         size: v,
         item: n.item,
-        dir: w
+        dir: T
       }
     ) : /* @__PURE__ */ t.createElement(xe, null, J.toLanguageString(te, ne[te]))))));
   }, tt = t.useCallback(
     (e) => {
-      for (let r of e)
-        qe(r.target.clientWidth);
+      for (let i of e)
+        qe(i.target.clientWidth);
     },
     []
   ), xe = n.listNoData || bt, J = ft(), Ie = !Be || se.valid, { size: v, rounded: V, fillMode: Q } = n, X = P && s ? Ae : H.current, Se = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
@@ -397,9 +397,9 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
       }),
       tabIndex: z,
       accessKey: n.accessKey,
-      id: F,
+      id: x,
       style: B ? { ...L, width: void 0 } : L,
-      dir: w,
+      dir: T,
       ref: y,
       onKeyDown: C ? void 0 : Ye,
       onMouseDown: Qe,
@@ -411,14 +411,14 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
       "aria-disabled": C,
       "aria-label": B,
       "aria-labelledby": n.ariaLabelledBy,
-      "aria-describedby": n.ariaDescribedBy ? n.ariaDescribedBy : "tagslist-" + F,
+      "aria-describedby": n.ariaDescribedBy ? n.ariaDescribedBy : "tagslist-" + x,
       "aria-required": n.required,
       onClick: C ? void 0 : Xe
     },
     /* @__PURE__ */ t.createElement(
       "div",
       {
-        id: "tagslist-" + F,
+        id: "tagslist-" + x,
         className: ee("k-input-values k-chip-list", {
           [`k-chip-list-${Pe[v] || v}`]: v
         })
@@ -429,8 +429,8 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
           tag: n.tag,
           onTagDelete: Ze,
           data: X,
-          guid: F,
-          focused: N ? H.current.find((e) => De(e, N, x)) : void 0,
+          guid: x,
+          focused: N ? H.current.find((e) => De(e, N, I)) : void 0,
           size: v
         }
       )
@@ -463,7 +463,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
           M.popupClass,
           "k-multiselecttree-popup"
         ),
-        className: ee(M.className, { "k-rtl": w === "rtl" }),
+        className: ee(M.className, { "k-rtl": T === "rtl" }),
         style: _e,
         anchor: M.anchor || y.current,
         show: s,
@@ -475,7 +475,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
         Ne,
         {
           value: n.filter === void 0 ? ye : n.filter,
-          ref: S,
+          ref: w,
           onChange: ke,
           onKeyDown: Ce,
           tabIndex: z,
@@ -493,7 +493,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
           ref: E,
           tabIndex: z,
           data: q,
-          focusIdField: x,
+          focusIdField: I,
           textField: n.textField,
           checkField: fe,
           checkIndeterminateField: me,
@@ -506,7 +506,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
           checkboxes: !0,
           size: v,
           item: n.item,
-          dir: w
+          dir: T
         }
       ) : /* @__PURE__ */ t.createElement(xe, null, J.toLanguageString(te, ne[te]))
     )
@@ -519,10 +519,10 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
       editorPlaceholder: pe,
       editorValid: Ie,
       editorDisabled: C,
-      editorId: F,
+      editorId: x,
       style: { width: L ? L.width : void 0 },
       children: Se,
-      dir: w
+      dir: T
     }
   ) : Se;
 }), Rt = {
@@ -584,7 +584,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St
   adaptive: a.bool
 };
 de.displayName = "KendoReactMultiSelectTree";
-de.defaultProps = D;
+de.defaultProps = F;
 de.propTypes = Rt;
 export {
   de as MultiSelectTree,