@progress/kendo-react-dropdowns 8.3.0-develop.8 → 8.3.0

package/MultiSelectTree/MultiSelectTree.mjs

@@ -45,454 +45,318 @@ const It = "Please select a value from the list!", { sizeMap: Ne, roundedMap: St
   fillMode: "solid",
   required: !1,
   validityStyles: !0
-}, Dt = at(), Pe = t.forwardRef((O, M) => {
-  const a = it(Dt, O);
-  rt(mt);
-  const K = ot(), x = a.id || K, {
-    data: q = [],
-    dataItemKey: I,
-    style: L = {},
-    placeholder: de,
-    label: B,
-    name: Oe,
-    validationMessage: A,
-    valid: Le,
-    tags: pe,
-    value: m,
-    opened: S,
-    disabled: E,
-    popupSettings: R = y.popupSettings,
-    checkField: fe = y.checkField,
-    checkIndeterminateField: me = y.checkIndeterminateField,
-    subItemsField: ge = y.subItemsField,
-    size: v = y.size,
-    rounded: V = y.rounded,
-    fillMode: W = y.fillMode,
-    required: ve = y.required,
-    validityStyles: Be = y.validityStyles,
-    onOpen: ae = Z,
-    onClose: z = Z
-  } = a, _ = lt(a.tabIndex, E), l = t.useRef(null), C = t.useRef(null), w = t.useRef(null), ie = t.useRef(null), H = t.useRef(null), k = t.useRef(null), $ = t.useRef(!1), G = t.useRef([]), U = t.useRef(null), [N, Ve] = t.useState(), [Ke, he] = t.useState(!1), [d, re] = t.useState(!1), [oe, qe] = t.useState(), [Ae, We] = t.useState([]), [be, ze] = t.useState(""), P = !!(oe && oe <= xt && a.adaptive), s = S !== void 0 ? S : Ke, le = !!(Array.isArray(m) && m.length), se = Tt({ validationMessage: A, valid: Le, required: ve }, le), T = st(C, a.dir), _e = {
-    width: ht(C, y, R, L),
-    ...T !== void 0 ? { direction: T } : {}
-  }, He = t.useCallback(() => C.current && C.current.focus(), []);
-  G.current = pe === void 0 ? (m || []).map((e) => ({ text: gt(e, a.textField), data: [e] })) : [...pe], t.useImperativeHandle(
-    l,
-    () => ({
+}, Dt = at(), Pe = t.forwardRef(
+  (O, M) => {
+    const a = it(Dt, O);
+    rt(mt);
+    const K = ot(), x = a.id || K, {
+      data: q = [],
+      dataItemKey: I,
+      style: L = {},
+      placeholder: de,
+      label: B,
+      name: Oe,
+      validationMessage: A,
+      valid: Le,
+      tags: pe,
+      value: m,
+      opened: S,
+      disabled: E,
+      popupSettings: R = y.popupSettings,
+      checkField: fe = y.checkField,
+      checkIndeterminateField: me = y.checkIndeterminateField,
+      subItemsField: ge = y.subItemsField,
+      size: v = y.size,
+      rounded: V = y.rounded,
+      fillMode: W = y.fillMode,
+      required: ve = y.required,
+      validityStyles: Be = y.validityStyles,
+      onOpen: ae = Z,
+      onClose: z = Z
+    } = a, _ = lt(a.tabIndex, E), l = t.useRef(null), C = t.useRef(null), w = t.useRef(null), ie = t.useRef(null), H = t.useRef(null), k = t.useRef(null), $ = t.useRef(!1), G = t.useRef([]), U = t.useRef(null), [N, Ve] = t.useState(), [Ke, he] = t.useState(!1), [d, re] = t.useState(!1), [oe, qe] = t.useState(), [Ae, We] = t.useState([]), [be, ze] = t.useState(""), P = !!(oe && oe <= xt && a.adaptive), s = S !== void 0 ? S : Ke, le = !!(Array.isArray(m) && m.length), se = Tt({ validationMessage: A, valid: Le, required: ve }, le), T = st(C, a.dir), _e = {
+      width: ht(C, y, R, L),
+      ...T !== void 0 ? { direction: T } : {}
+    }, He = t.useCallback(() => C.current && C.current.focus(), []);
+    G.current = pe === void 0 ? (m || []).map((e) => ({ text: gt(e, a.textField), data: [e] })) : [...pe], t.useImperativeHandle(l, () => ({
       props: a,
       element: C.current,
       focus: He
-    })
-  ), t.useImperativeHandle(M, () => l.current);
-  const $e = t.useCallback(
-    () => {
+    })), t.useImperativeHandle(
+      M,
+      () => l.current
+    );
+    const $e = t.useCallback(() => {
       H.current && H.current.setCustomValidity && H.current.setCustomValidity(
         se.valid ? "" : A === void 0 ? It : A
       );
-    },
-    [A, se]
-  );
-  t.useEffect($e), t.useEffect(() => {
-    const e = ct && window.ResizeObserver && new window.ResizeObserver(tt.bind(void 0));
-    return document != null && document.body && e && e.observe(document.body), () => {
-      e && e.disconnect();
-    };
-  }, []), t.useEffect(
-    () => {
+    }, [A, se]);
+    t.useEffect($e), t.useEffect(() => {
+      const e = ct && window.ResizeObserver && new window.ResizeObserver(tt.bind(void 0));
+      return document != null && document.body && e && e.observe(document.body), () => {
+        e && e.disconnect();
+      };
+    }, []), t.useEffect(() => {
       U.current && s && U.current.setPosition(U.current._popup);
-    },
-    [m, s]
-  );
-  const F = t.useCallback(
-    (e, i, r) => {
-      if (a.onChange) {
-        const b = {
-          items: i,
-          operation: r,
-          ...e
+    }, [m, s]);
+    const F = t.useCallback(
+      (e, i, r) => {
+        if (a.onChange) {
+          const b = {
+            items: i,
+            operation: r,
+            ...e
+          };
+          a.onChange.call(void 0, b);
+        }
+      },
+      [a.onChange]
+    ), j = t.useCallback(
+      (e) => {
+        if (vt(e.item, m, I) || !l.current)
+          return;
+        const { item: i, nativeEvent: r, syntheticEvent: b } = e, D = {
+          syntheticEvent: b,
+          nativeEvent: r,
+          target: l.current
         };
-        a.onChange.call(void 0, b);
-      }
-    },
-    [a.onChange]
-  ), j = t.useCallback(
-    (e) => {
-      if (vt(e.item, m, I) || !l.current)
-        return;
-      const { item: i, nativeEvent: r, syntheticEvent: b } = e, D = {
-        syntheticEvent: b,
-        nativeEvent: r,
-        target: l.current
-      };
-      F(D, [i], "toggle");
-    },
-    [m, I, F]
-  ), J = t.useCallback(
-    (e) => {
-      if (!s) {
-        if (ae) {
-          const i = { ...e };
-          ae.call(void 0, i);
+        F(D, [i], "toggle");
+      },
+      [m, I, F]
+    ), J = t.useCallback(
+      (e) => {
+        if (!s) {
+          if (ae) {
+            const i = { ...e };
+            ae.call(void 0, i);
+          }
+          S === void 0 && (he(!0), We(m || []), P && setTimeout(() => {
+            var i;
+            u((i = ie.current) == null ? void 0 : i.element);
+          }, 300));
         }
-        S === void 0 && (he(!0), We(m || []), P && setTimeout(() => {
-          var i;
-          u((i = ie.current) == null ? void 0 : i.element);
-        }, 300));
-      }
-    },
-    [s, S, ae, P, ie]
-  ), g = t.useCallback(
-    (e) => {
-      if (s) {
-        if (z) {
-          const i = { ...e };
-          z.call(void 0, i);
+      },
+      [s, S, ae, P, ie]
+    ), g = t.useCallback(
+      (e) => {
+        if (s) {
+          if (z) {
+            const i = { ...e };
+            z.call(void 0, i);
+          }
+          S === void 0 && he(!1);
         }
-        S === void 0 && he(!1);
-      }
-    },
-    [s, S, z]
-  ), h = t.useCallback(
-    (e) => {
+      },
+      [s, S, z]
+    ), h = t.useCallback((e) => {
       $.current = !0, e(), window.setTimeout(() => $.current = !1, 0);
-    },
-    []
-  ), u = t.useCallback(
-    (e) => {
-      e && h(() => e.focus());
-    },
-    [h]
-  ), Ge = t.useCallback(
-    () => {
+    }, []), u = t.useCallback(
+      (e) => {
+        e && h(() => e.focus());
+      },
+      [h]
+    ), Ge = t.useCallback(() => {
       var e;
       !d && s ? g({ target: l.current }) : a.filterable ? u((e = w.current) == null ? void 0 : e.element) : u(k.current && k.current.element);
-    },
-    [d, s, u, g, a.filterable]
-  ), Ue = t.useCallback(
-    () => {
+    }, [d, s, u, g, a.filterable]), Ue = t.useCallback(() => {
       d && u(C.current);
-    },
-    [d, u]
-  ), je = t.useCallback(
-    (e) => {
-      if (!d && !$.current && (re(!0), a.onFocus && l.current)) {
-        const i = {
+    }, [d, u]), je = t.useCallback(
+      (e) => {
+        if (!d && !$.current && (re(!0), a.onFocus && l.current)) {
+          const i = {
+            syntheticEvent: e,
+            nativeEvent: e.nativeEvent,
+            target: l.current
+          };
+          a.onFocus.call(void 0, i);
+        }
+      },
+      [d, a.onFocus]
+    ), Je = t.useCallback(
+      (e) => {
+        if (d && !$.current && l.current) {
+          re(!1);
+          const i = {
+            syntheticEvent: e,
+            nativeEvent: e.nativeEvent,
+            target: l.current
+          };
+          if (a.onBlur) {
+            const r = { ...i };
+            a.onBlur.call(void 0, r);
+          }
+          P || g(i);
+        }
+      },
+      [d, a.onBlur, s, S, z]
+    ), Qe = t.useCallback(() => {
+      d && h(Z);
+    }, [d, h]), Xe = t.useCallback(
+      (e) => {
+        if (!e.isDefaultPrevented() && l.current) {
+          re(!0);
+          const i = {
+            syntheticEvent: e,
+            nativeEvent: e.nativeEvent,
+            target: l.current
+          };
+          s || J(i);
+        }
+      },
+      [s, J]
+    ), Ye = t.useCallback(
+      (e) => {
+        var Y, Se;
+        const { keyCode: i, altKey: r } = e, b = k.current && k.current.element;
+        if (!l.current || e.isDefaultPrevented() && ((Y = w.current) == null ? void 0 : Y.element) === e.target)
+          return;
+        const D = {
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
           target: l.current
         };
-        a.onFocus.call(void 0, i);
-      }
-    },
-    [d, a.onFocus]
-  ), Je = t.useCallback(
-    (e) => {
-      if (d && !$.current && l.current) {
-        re(!1);
+        if (m && m.length > 0 && (i === o.left || i === o.right || i === o.home || i === o.end || i === o.delete)) {
+          const c = G.current;
+          let p = N ? c.findIndex((nt) => Te(nt, N, I)) : -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);
+        }
+        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 && ((Se = w.current) != null && Se.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 = w.current) == null ? void 0 : f.element);
+                });
+            }
+            h(Z);
+          } else
+            i === o.down && h(() => {
+              var c;
+              u(((c = w.current) == null ? void 0 : c.element) || b);
+            });
+        else
+          r && i === o.down && (e.preventDefault(), J(D));
+      },
+      [s, g, u, h, J, N, I, m, F]
+    ), ye = t.useCallback(
+      (e) => {
+        const { keyCode: i, altKey: r } = e;
+        r || i !== o.up && i !== o.down || (e.preventDefault(), h(
+          i === o.up ? () => {
+            u(C.current);
+          } : () => {
+            u(k.current && k.current.element);
+          }
+        ));
+      },
+      [u, h]
+    ), ce = t.useCallback(
+      (e) => {
+        if (!l.current)
+          return;
         const i = {
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
           target: l.current
         };
-        if (a.onBlur) {
-          const r = { ...i };
-          a.onBlur.call(void 0, r);
+        F(i, [], "clear"), g(i), e.preventDefault();
+      },
+      [F, g]
+    ), Ze = t.useCallback(
+      (e, i) => {
+        var r;
+        g({ target: l.current }), d || u((r = w.current) == null ? void 0 : r.element), F(
+          {
+            syntheticEvent: i,
+            nativeEvent: i.nativeEvent,
+            target: l.current
+          },
+          e,
+          "delete"
+        );
+      },
+      [F, g, u, d]
+    ), Ce = t.useCallback(
+      (e) => {
+        if (a.onExpandChange && l.current) {
+          const { item: i, itemHierarchicalIndex: r, nativeEvent: b, syntheticEvent: D } = e, Y = {
+            level: wt(r),
+            item: i,
+            nativeEvent: b,
+            syntheticEvent: D,
+            target: l.current
+          };
+          a.onExpandChange.call(void 0, Y);
         }
-        P || g(i);
-      }
-    },
-    [d, a.onBlur, s, S, z]
-  ), Qe = t.useCallback(
-    () => {
-      d && h(Z);
-    },
-    [d, h]
-  ), Xe = t.useCallback(
-    (e) => {
-      if (!e.isDefaultPrevented() && l.current) {
-        re(!0);
+      },
+      [a.onExpandChange]
+    ), Ee = t.useCallback(
+      (e) => {
+        if (a.onFilterChange && l.current) {
+          const r = {
+            filter: {
+              field: a.textField,
+              operator: "contains",
+              value: e.target.value
+            },
+            syntheticEvent: e.syntheticEvent,
+            nativeEvent: e.nativeEvent,
+            target: l.current
+          };
+          a.onFilterChange.call(void 0, r), a.filter === void 0 && ze(e.target.value);
+        }
+      },
+      [a.onFilterChange, a.filter, a.textField]
+    ), ke = t.useCallback(
+      (e) => {
+        if (!l.current)
+          return;
         const i = {
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
           target: l.current
         };
-        s || J(i);
-      }
-    },
-    [s, J]
-  ), Ye = t.useCallback(
-    (e) => {
-      var Y, Se;
-      const { keyCode: i, altKey: r } = e, b = k.current && k.current.element;
-      if (!l.current || e.isDefaultPrevented() && ((Y = w.current) == null ? void 0 : Y.element) === e.target)
-        return;
-      const D = {
-        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)) {
-        const c = G.current;
-        let p = N ? c.findIndex((nt) => Te(nt, N, I)) : -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);
-      }
-      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 && ((Se = w.current) != null && Se.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 = w.current) == null ? void 0 : f.element);
-              });
-          }
-          h(Z);
-        } else
-          i === o.down && h(() => {
-            var c;
-            u(((c = w.current) == null ? void 0 : c.element) || b);
-          });
-      else
-        r && i === o.down && (e.preventDefault(), J(D));
-    },
-    [s, g, u, h, J, N, I, m, F]
-  ), ye = t.useCallback(
-    (e) => {
-      const { keyCode: i, altKey: r } = e;
-      r || i !== o.up && i !== o.down || (e.preventDefault(), h(
-        i === o.up ? () => {
-          u(C.current);
-        } : () => {
-          u(k.current && k.current.element);
-        }
-      ));
-    },
-    [u, h]
-  ), ce = t.useCallback(
-    (e) => {
-      if (!l.current)
-        return;
-      const i = {
-        syntheticEvent: e,
-        nativeEvent: e.nativeEvent,
-        target: l.current
-      };
-      F(i, [], "clear"), g(i), e.preventDefault();
-    },
-    [F, g]
-  ), Ze = t.useCallback(
-    (e, i) => {
-      var r;
-      g({ target: l.current }), d || u((r = w.current) == null ? void 0 : r.element), F({
-        syntheticEvent: i,
-        nativeEvent: i.nativeEvent,
-        target: l.current
-      }, e, "delete");
-    },
-    [F, g, u, d]
-  ), Ce = t.useCallback(
-    (e) => {
-      if (a.onExpandChange && l.current) {
-        const { item: i, itemHierarchicalIndex: r, nativeEvent: b, syntheticEvent: D } = e, Y = {
-          level: wt(r),
-          item: i,
-          nativeEvent: b,
-          syntheticEvent: D,
-          target: l.current
-        };
-        a.onExpandChange.call(void 0, Y);
-      }
-    },
-    [a.onExpandChange]
-  ), Ee = t.useCallback(
-    (e) => {
-      if (a.onFilterChange && l.current) {
-        const r = {
-          filter: { field: a.textField, operator: "contains", value: e.target.value },
-          syntheticEvent: e.syntheticEvent,
-          nativeEvent: e.nativeEvent,
-          target: l.current
-        };
-        a.onFilterChange.call(void 0, r), a.filter === void 0 && ze(e.target.value);
-      }
-    },
-    [a.onFilterChange, a.filter, a.textField]
-  ), ke = t.useCallback(
-    (e) => {
-      if (!l.current)
-        return;
-      const i = {
-        syntheticEvent: e,
-        nativeEvent: e.nativeEvent,
-        target: l.current
-      };
-      a.onCancel && a.onCancel.call(void 0, i), g(i), e.preventDefault();
-    },
-    [a.onCancel, g]
-  ), et = () => {
-    const e = a.filterable ? /* @__PURE__ */ t.createElement(
-      Re,
-      {
-        value: a.filter === void 0 ? be : a.filter,
-        ref: ie,
-        onChange: Ee,
-        onKeyDown: ye,
-        size: v,
-        rounded: V,
-        fillMode: W
-      }
-    ) : null, i = {
-      adaptiveTitle: a.adaptiveTitle,
-      expand: s,
-      onClose: (r) => a.onCancel ? ke(r) : ce(r),
-      windowWidth: oe,
-      mobileFilter: e,
-      footer: {
-        cancelText: Q.toLanguageString(De, ne[De]),
-        onCancel: (r) => a.onCancel ? ke(r) : ce(r),
-        applyText: Q.toLanguageString(Me, ne[Me]),
-        onApply: (r) => g(r)
-      }
-    };
-    return /* @__PURE__ */ t.createElement(kt, { ...i }, /* @__PURE__ */ t.createElement(Ft, { 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(
-      we,
-      {
-        ref: k,
-        tabIndex: _,
-        data: q,
-        focusIdField: I,
-        textField: a.textField,
-        checkField: fe,
-        checkIndeterminateField: me,
-        expandField: a.expandField,
-        childrenField: ge,
-        expandIcons: !0,
-        onItemClick: j,
-        onCheckChange: j,
-        onExpandChange: Ce,
-        checkboxes: !0,
-        size: v,
-        item: a.item,
-        dir: T
-      }
-    ) : /* @__PURE__ */ t.createElement(Fe, null, Q.toLanguageString(te, ne[te]))))));
-  }, tt = t.useCallback(
-    (e) => {
-      for (let i of e)
-        qe(i.target.clientWidth);
-    },
-    []
-  ), Fe = a.listNoData || bt, Q = ft(), xe = !Be || se.valid, X = P && s ? Ae : G.current, Ie = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
-    "span",
-    {
-      className: ee("k-multiselecttree k-input", a.className, {
-        [`k-input-${Ne[v] || v}`]: v,
-        [`k-rounded-${St[V] || V}`]: V,
-        [`k-input-${W}`]: W,
-        "k-focus": d && !E,
-        "k-invalid": !xe,
-        "k-disabled": E,
-        "k-loading": a.loading,
-        "k-required": ve
-      }),
-      tabIndex: _,
-      accessKey: a.accessKey,
-      id: x,
-      style: B ? { ...L, width: void 0 } : L,
-      dir: T,
-      ref: C,
-      onKeyDown: E ? void 0 : Ye,
-      onMouseDown: Qe,
-      onFocus: je,
-      onBlur: Je,
-      role: "combobox",
-      "aria-haspopup": "tree",
-      "aria-expanded": s,
-      "aria-disabled": E,
-      "aria-label": B,
-      "aria-labelledby": a.ariaLabelledBy,
-      "aria-describedby": a.ariaDescribedBy ? a.ariaDescribedBy : "tagslist-" + x,
-      "aria-required": a.required,
-      onClick: E ? void 0 : Xe
-    },
-    /* @__PURE__ */ t.createElement(
-      "div",
-      {
-        id: "tagslist-" + x,
-        className: ee("k-input-values k-chip-list", {
-          [`k-chip-list-${Ne[v] || v}`]: v
-        })
-      },
-      X.length > 0 && /* @__PURE__ */ t.createElement(
-        Ct,
-        {
-          tag: a.tag,
-          onTagDelete: Ze,
-          data: X,
-          guid: x,
-          focused: N ? G.current.find((e) => Te(e, N, I)) : 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(ut, { className: "k-input-loading-icon", name: "loading" }),
-    le && !E && X.length > 0 && /* @__PURE__ */ t.createElement(Et, { onClick: ce }),
-    /* @__PURE__ */ t.createElement(
-      "select",
-      {
-        name: Oe,
-        ref: H,
-        tabIndex: -1,
-        "aria-hidden": !0,
-        title: B,
-        style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
-      },
-      /* @__PURE__ */ t.createElement(
-        "option",
-        {
-          value: a.valueMap ? a.valueMap.call(void 0, m) : m
-        }
-      )
-    ),
-    !P && /* @__PURE__ */ t.createElement(
-      pt,
-      {
-        ...R,
-        popupClass: ee(
-          R.popupClass,
-          "k-multiselecttree-popup"
-        ),
-        className: ee(R.className, { "k-rtl": T === "rtl" }),
-        style: _e,
-        anchor: R.anchor || C.current,
-        show: s,
-        onOpen: Ge,
-        onClose: Ue,
-        ref: U
+        a.onCancel && a.onCancel.call(void 0, i), g(i), e.preventDefault();
       },
-      a.filterable && /* @__PURE__ */ t.createElement(
+      [a.onCancel, g]
+    ), et = () => {
+      const e = a.filterable ? /* @__PURE__ */ t.createElement(
         Re,
         {
           value: a.filter === void 0 ? be : a.filter,
-          ref: w,
+          ref: ie,
           onChange: Ee,
           onKeyDown: ye,
-          tabIndex: _,
           size: v,
           rounded: V,
-          fillMode: W,
-          renderListFilterWrapper: !0,
-          renderPrefixSeparator: !0
+          fillMode: W
         }
-      ),
-      q.length > 0 ? /* @__PURE__ */ t.createElement(
+      ) : null, i = {
+        adaptiveTitle: a.adaptiveTitle,
+        expand: s,
+        onClose: (r) => a.onCancel ? ke(r) : ce(r),
+        windowWidth: oe,
+        mobileFilter: e,
+        footer: {
+          cancelText: Q.toLanguageString(
+            De,
+            ne[De]
+          ),
+          onCancel: (r) => a.onCancel ? ke(r) : ce(r),
+          applyText: Q.toLanguageString(
+            Me,
+            ne[Me]
+          ),
+          onApply: (r) => g(r)
+        }
+      };
+      return /* @__PURE__ */ t.createElement(kt, { ...i }, /* @__PURE__ */ t.createElement(Ft, { 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(
         we,
         {
-          style: { height: R.height },
           ref: k,
           tabIndex: _,
           data: q,
@@ -511,24 +375,149 @@ const It = "Please select a value from the list!", { sizeMap: Ne, roundedMap: St
           item: a.item,
           dir: T
         }
-      ) : /* @__PURE__ */ t.createElement(Fe, null, Q.toLanguageString(te, ne[te]))
-    )
-  ), P && et());
-  return B ? /* @__PURE__ */ t.createElement(
-    yt,
-    {
-      label: B,
-      editorValue: le,
-      editorPlaceholder: de,
-      editorValid: xe,
-      editorDisabled: E,
-      editorId: x,
-      style: { width: L ? L.width : void 0 },
-      children: Ie,
-      dir: T
-    }
-  ) : Ie;
-}), Mt = {
+      ) : /* @__PURE__ */ t.createElement(Fe, null, Q.toLanguageString(te, ne[te]))))));
+    }, tt = t.useCallback((e) => {
+      for (const i of e)
+        qe(i.target.clientWidth);
+    }, []), Fe = a.listNoData || bt, Q = ft(), xe = !Be || se.valid, X = P && s ? Ae : G.current, Ie = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+      "span",
+      {
+        className: ee("k-multiselecttree k-input", a.className, {
+          [`k-input-${Ne[v] || v}`]: v,
+          [`k-rounded-${St[V] || V}`]: V,
+          [`k-input-${W}`]: W,
+          "k-focus": d && !E,
+          "k-invalid": !xe,
+          "k-disabled": E,
+          "k-loading": a.loading,
+          "k-required": ve
+        }),
+        tabIndex: _,
+        accessKey: a.accessKey,
+        id: x,
+        style: B ? { ...L, width: void 0 } : L,
+        dir: T,
+        ref: C,
+        onKeyDown: E ? void 0 : Ye,
+        onMouseDown: Qe,
+        onFocus: je,
+        onBlur: Je,
+        role: "combobox",
+        "aria-haspopup": "tree",
+        "aria-expanded": s,
+        "aria-disabled": E,
+        "aria-label": B,
+        "aria-labelledby": a.ariaLabelledBy,
+        "aria-describedby": a.ariaDescribedBy ? a.ariaDescribedBy : "tagslist-" + x,
+        "aria-required": a.required,
+        onClick: E ? void 0 : Xe
+      },
+      /* @__PURE__ */ t.createElement(
+        "div",
+        {
+          id: "tagslist-" + x,
+          className: ee("k-input-values k-chip-list", {
+            [`k-chip-list-${Ne[v] || v}`]: v
+          })
+        },
+        X.length > 0 && /* @__PURE__ */ t.createElement(
+          Ct,
+          {
+            tag: a.tag,
+            onTagDelete: Ze,
+            data: X,
+            guid: x,
+            focused: N ? G.current.find(
+              (e) => Te(e, N, I)
+            ) : 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(ut, { className: "k-input-loading-icon", name: "loading" }),
+      le && !E && X.length > 0 && /* @__PURE__ */ t.createElement(Et, { onClick: ce }),
+      /* @__PURE__ */ t.createElement(
+        "select",
+        {
+          name: Oe,
+          ref: H,
+          tabIndex: -1,
+          "aria-hidden": !0,
+          title: B,
+          style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
+        },
+        /* @__PURE__ */ t.createElement("option", { value: a.valueMap ? a.valueMap.call(void 0, m) : m })
+      ),
+      !P && /* @__PURE__ */ t.createElement(
+        pt,
+        {
+          ...R,
+          popupClass: ee(R.popupClass, "k-multiselecttree-popup"),
+          className: ee(R.className, { "k-rtl": T === "rtl" }),
+          style: _e,
+          anchor: R.anchor || C.current,
+          show: s,
+          onOpen: Ge,
+          onClose: Ue,
+          ref: U
+        },
+        a.filterable && /* @__PURE__ */ t.createElement(
+          Re,
+          {
+            value: a.filter === void 0 ? be : a.filter,
+            ref: w,
+            onChange: Ee,
+            onKeyDown: ye,
+            tabIndex: _,
+            size: v,
+            rounded: V,
+            fillMode: W,
+            renderListFilterWrapper: !0,
+            renderPrefixSeparator: !0
+          }
+        ),
+        q.length > 0 ? /* @__PURE__ */ t.createElement(
+          we,
+          {
+            style: { height: R.height },
+            ref: k,
+            tabIndex: _,
+            data: q,
+            focusIdField: I,
+            textField: a.textField,
+            checkField: fe,
+            checkIndeterminateField: me,
+            expandField: a.expandField,
+            childrenField: ge,
+            expandIcons: !0,
+            onItemClick: j,
+            onCheckChange: j,
+            onExpandChange: Ce,
+            checkboxes: !0,
+            size: v,
+            item: a.item,
+            dir: T
+          }
+        ) : /* @__PURE__ */ t.createElement(Fe, null, Q.toLanguageString(te, ne[te]))
+      )
+    ), P && et());
+    return B ? /* @__PURE__ */ t.createElement(
+      yt,
+      {
+        label: B,
+        editorValue: le,
+        editorPlaceholder: de,
+        editorValid: xe,
+        editorDisabled: E,
+        editorId: x,
+        style: { width: L ? L.width : void 0 },
+        children: Ie,
+        dir: T
+      }
+    ) : Ie;
+  }
+), Mt = {
   opened: n.bool,
   disabled: n.bool,
   dir: n.string,
@@ -558,15 +547,20 @@ const It = "Please select a value from the list!", { sizeMap: Ne, roundedMap: St
   filterable: n.bool,
   filter: n.string,
   loading: n.bool,
-  tags: n.arrayOf(n.shape({
-    text: n.string,
-    data: n.arrayOf(n.any)
-  })),
+  tags: n.arrayOf(
+    n.shape({
+      text: n.string,
+      data: n.arrayOf(n.any)
+    })
+  ),
   popupSettings: n.shape({
-    animate: n.oneOfType([n.bool, n.shape({
-      openDuration: n.number,
-      closeDuration: n.number
-    })]),
+    animate: n.oneOfType([
+      n.bool,
+      n.shape({
+        openDuration: n.number,
+        closeDuration: n.number
+      })
+    ]),
     popupClass: n.string,
     className: n.string,
     appendTo: n.any,