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

package/DropDownTree/DropDownTree.mjs

@@ -7,27 +7,27 @@
  */
 import * as t from "react";
 import n from "prop-types";
-import { createPropsContext as nt, validatePackage as ot, usePropsContext as at, useId as rt, getTabIndex as it, ZIndexContext as Fe, useRtl as lt, useAdaptiveModeContext as st, canUseDOM as ct, Keys as c, noop as $, mapTree as ut, extendDataItem as dt, classNames as ae, IconWrap as Ie, WatermarkOverlay as pt, kendoThemeMaps as mt } from "@progress/kendo-react-common";
+import { createPropsContext as nt, validatePackage as ot, usePropsContext as at, useId as rt, getTabIndex as it, ZIndexContext as Ie, useRtl as lt, useAdaptiveModeContext as st, canUseDOM as ct, Keys as c, noop as U, mapTree as ut, extendDataItem as dt, classNames as ae, IconWrap as Se, WatermarkOverlay as pt, kendoThemeMaps as mt } from "@progress/kendo-react-common";
 import { Popup as ft } from "@progress/kendo-react-popup";
 import { useLocalization as vt } from "@progress/kendo-react-intl";
-import { TreeView as Se } from "@progress/kendo-react-treeview";
+import { TreeView as Te } from "@progress/kendo-react-treeview";
 import { packageMetadata as gt } from "../package-metadata.mjs";
 import { getItemValue as bt, areSame as Re, isPresent as ht } from "../common/utils.mjs";
 import { useDropdownWidth as Et } from "./useDropdownWidth.mjs";
 import { ListNoData as yt } from "./ListNoData.mjs";
-import { clear as Te, messages as re, nodata as U } from "../messages/index.mjs";
+import { clear as Pe, messages as re, nodata as X } from "../messages/index.mjs";
 import { FloatingLabel as Ct } from "@progress/kendo-react-labels";
-import Ne from "../common/ListFilter.mjs";
+import Me from "../common/ListFilter.mjs";
 import { Button as kt } from "@progress/kendo-react-buttons";
 import { xIcon as xt, caretAltDownIcon as wt } from "@progress/kendo-svg-icons";
 import { AdaptiveMode as Dt } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as Ft } from "@progress/kendo-react-layout";
-const { sizeMap: It, roundedMap: St } = mt, Rt = 12e3, Tt = 2e3, Nt = "Please select a value from the list!", Pt = (y) => /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, y.children), Pe = (y) => y.split("_").map((F) => parseInt(F, 10)), Mt = (y, F) => {
-  const { validationMessage: X, valid: r, required: a } = y;
+const { sizeMap: It, roundedMap: St } = mt, Tt = 12e3, Rt = 2e3, Pt = "Please select a value from the list!", Mt = (y) => /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, y.children), Ne = (y) => y.split("_").map((D) => parseInt(D, 10)), Nt = (y, D) => {
+  const { validationMessage: j, valid: r, required: a } = y;
   return {
-    customError: X !== void 0,
-    valid: !!(r !== void 0 ? r : !a || F),
-    valueMissing: !F
+    customError: j !== void 0,
+    valid: !!(r !== void 0 ? r : !a || D),
+    valueMissing: !D
   };
 }, ie = {
   selectField: "selected",
@@ -44,48 +44,48 @@ const { sizeMap: It, roundedMap: St } = mt, Rt = 12e3, Tt = 2e3, Nt = "Please se
   size: "medium",
   rounded: "medium",
   fillMode: "solid"
-}, Ot = nt(), Me = t.forwardRef((y, F) => {
-  const X = !ot(gt, { component: "DropDownTree" }), r = at(Ot, y), a = {
+}, Ot = nt(), Oe = t.forwardRef((y, D) => {
+  const j = !ot(gt, { component: "DropDownTree" }), r = at(Ot, y), a = {
     ...ie,
     ...r
-  }, Oe = rt(), le = a.id || Oe, {
-    data: N,
-    dataItemKey: P,
+  }, Ve = rt(), le = a.id || Ve, {
+    data: M,
+    dataItemKey: N,
     popupSettings: b = {},
-    style: M,
+    style: O,
     opened: u,
-    disabled: I,
-    onOpen: O = $,
-    onClose: m = $,
-    placeholder: j,
-    label: V,
-    name: Ve,
-    selectField: z,
+    disabled: F,
+    onOpen: V = U,
+    onClose: m = U,
+    placeholder: A,
+    label: I,
+    name: We,
+    selectField: H,
     subItemsField: W,
-    validationMessage: H,
-    valid: We,
+    validationMessage: _,
+    valid: Le,
     required: G,
-    validityStyles: Le
-  } = a, J = it(a.tabIndex, I), i = t.useRef(null), f = t.useRef(null), S = t.useRef(null), Q = t.useRef(null), _ = t.useRef(null), h = t.useRef(null), Z = t.useRef(!1), [se, Ke] = t.useState(void 0), C = a.value !== void 0, v = C ? a.value : se !== void 0 ? se : a.defaultValue, L = ht(v), Y = L ? bt(v, a.textField) : "", ee = Mt({ validationMessage: H, valid: We, required: G }, L), ce = t.useContext(Fe), Be = ce ? ce + Tt : Rt, qe = t.useCallback(() => f.current && f.current.focus(), []);
+    validityStyles: Ke
+  } = a, J = it(a.tabIndex, F), i = t.useRef(null), f = t.useRef(null), S = t.useRef(null), Q = t.useRef(null), Z = t.useRef(null), h = t.useRef(null), $ = t.useRef(!1), [se, ze] = t.useState(void 0), C = a.value !== void 0, v = C ? a.value : se !== void 0 ? se : a.defaultValue, L = ht(v), Y = L ? bt(v, a.textField) : "", ee = Nt({ validationMessage: _, valid: Le, required: G }, L), ce = t.useContext(Ie), Be = ce ? ce + Rt : Tt, qe = t.useCallback(() => f.current && f.current.focus(), []);
   t.useImperativeHandle(i, () => ({
     props: a,
     element: f.current,
     focus: qe
-  })), t.useImperativeHandle(F, () => i.current);
+  })), t.useImperativeHandle(D, () => i.current);
   const k = lt(f, a.dir), Ae = {
     width: Et(
       f,
       ie,
       { ...ie.popupSettings, ...b },
-      M
+      O
     ),
     ...k !== void 0 ? { direction: k } : {}
-  }, [ze, ue] = t.useState(!1), l = u !== void 0 ? u : ze, [d, te] = t.useState(!1), [ne, He] = t.useState(), [de, _e] = t.useState(""), pe = st(), x = !!(ne && pe && ne <= pe.medium && a.adaptive), Ze = t.useCallback(() => {
-    _.current && _.current.setCustomValidity && _.current.setCustomValidity(
-      ee.valid ? "" : H === void 0 ? Nt : H
+  }, [He, ue] = t.useState(!1), l = u !== void 0 ? u : He, [d, te] = t.useState(!1), [ne, _e] = t.useState(), [de, Ze] = t.useState(""), pe = st(), E = !!(ne && pe && ne <= pe.medium && a.adaptive), $e = t.useCallback(() => {
+    Z.current && Z.current.setCustomValidity && Z.current.setCustomValidity(
+      ee.valid ? "" : _ === void 0 ? Pt : _
     );
-  }, [H, ee]);
-  t.useEffect(Ze), t.useEffect(() => {
+  }, [_, ee]);
+  t.useEffect($e), t.useEffect(() => {
     const e = ct && window.ResizeObserver && new window.ResizeObserver(et.bind(void 0));
     return document != null && document.body && e && e.observe(document.body), () => {
       document != null && document.body && e && e.disconnect();
@@ -94,29 +94,29 @@ const { sizeMap: It, roundedMap: St } = mt, Rt = 12e3, Tt = 2e3, Nt = "Please se
   const me = t.useCallback(
     (e) => {
       if (!l) {
-        if (O) {
+        if (V) {
           const o = { ...e };
-          O.call(void 0, o);
+          V.call(void 0, o);
         }
         u === void 0 && ue(!0);
       }
     },
-    [l, u, O]
-  ), w = t.useCallback(
+    [l, u, V]
+  ), x = t.useCallback(
     (e) => {
       if (l) {
         if (m) {
           const o = { ...e };
           m.call(void 0, o);
         }
-        u === void 0 && (ue(!1), x && setTimeout(() => {
+        u === void 0 && (ue(!1), E && setTimeout(() => {
           var o;
           g((o = Q.current) == null ? void 0 : o.element);
         }, 300));
       }
     },
-    [l, u, m, x]
-  ), $e = t.useCallback(
+    [l, u, m, E]
+  ), fe = t.useCallback(
     (e) => {
       if (!e.isDefaultPrevented() && i.current) {
         te(!0);
@@ -125,46 +125,46 @@ const { sizeMap: It, roundedMap: St } = mt, Rt = 12e3, Tt = 2e3, Nt = "Please se
           nativeEvent: e.nativeEvent,
           target: i.current
         };
-        (l ? w : me)(o);
+        (l ? x : me)(o);
       }
     },
-    [l, u, O, m]
-  ), R = t.useCallback((e) => {
-    Z.current = !0, e(), window.setTimeout(() => Z.current = !1, 0);
+    [l, u, V, m]
+  ), T = t.useCallback((e) => {
+    $.current = !0, e(), window.setTimeout(() => $.current = !1, 0);
   }, []), Ue = t.useCallback(
     (e) => {
-      var D, we;
+      var w, De;
       const { keyCode: o, altKey: s } = e, p = h.current && h.current.element;
-      if (!i.current || e.isDefaultPrevented() && ((D = S.current) == null ? void 0 : D.element) === e.target)
+      if (!i.current || e.isDefaultPrevented() && ((w = S.current) == null ? void 0 : w.element) === e.target)
         return;
-      const T = {
+      const P = {
         syntheticEvent: e,
         nativeEvent: e.nativeEvent,
         target: i.current
       };
       if (l)
         if (o === c.esc || s && o === c.up)
-          e.preventDefault(), w(T);
+          e.preventDefault(), x(P);
         else if (p && p.querySelector(".k-focus") && (o === c.up || o === c.down || o === c.left || o === c.right || o === c.home || o === c.end)) {
-          if (o === c.up && ((we = S.current) != null && we.element)) {
-            const q = Array.from(p.querySelectorAll(".k-treeview-item")), De = [...q].reverse().find((A) => !!(A && A.querySelector(".k-focus")));
-            if (De && q.indexOf(De) === 0)
-              return R(() => {
-                var A;
-                g((A = S.current) == null ? void 0 : A.element);
+          if (o === c.up && ((De = S.current) != null && De.element)) {
+            const B = Array.from(p.querySelectorAll(".k-treeview-item")), Fe = [...B].reverse().find((q) => !!(q && q.querySelector(".k-focus")));
+            if (Fe && B.indexOf(Fe) === 0)
+              return T(() => {
+                var q;
+                g((q = S.current) == null ? void 0 : q.element);
               });
           }
-          R($);
-        } else o === c.down && R(() => {
-          var q;
-          g(((q = S.current) == null ? void 0 : q.element) || p);
+          T(U);
+        } else o === c.down && T(() => {
+          var B;
+          g(((B = S.current) == null ? void 0 : B.element) || p);
         });
-      else s && o === c.down ? (e.preventDefault(), me(T)) : l || o === c.esc && be(e);
+      else s && o === c.down ? (e.preventDefault(), me(P)) : l || o === c.esc && he(e);
     },
-    [l, u, O, m]
-  ), fe = t.useCallback((e) => {
+    [l, u, V, m]
+  ), ve = t.useCallback((e) => {
     const { keyCode: o, altKey: s } = e;
-    s || o !== c.up && o !== c.down || (e.preventDefault(), R(
+    s || o !== c.up && o !== c.down || (e.preventDefault(), T(
       o === c.up ? () => {
         g(f.current);
       } : () => {
@@ -172,15 +172,15 @@ const { sizeMap: It, roundedMap: St } = mt, Rt = 12e3, Tt = 2e3, Nt = "Please se
       }
     ));
   }, []), g = t.useCallback((e) => {
-    e && R(() => e.focus());
+    e && T(() => e.focus());
   }, []), Xe = t.useCallback(() => {
     var e;
-    !d && l && !u ? w({ target: i.current }) : r.filterable ? g((e = S.current) == null ? void 0 : e.element) : g(h.current && h.current.element);
+    !d && l && !u ? x({ target: i.current }) : r.filterable ? g((e = S.current) == null ? void 0 : e.element) : g(h.current && h.current.element);
   }, [m, r.filterable, d, u, l]), je = t.useCallback(() => {
     d && g(f.current);
   }, [d]), Ge = t.useCallback(
     (e) => {
-      if (!d && !Z.current && (te(!0), r.onFocus && i.current)) {
+      if (!d && !$.current && (te(!0), r.onFocus && i.current)) {
         const o = {
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
@@ -192,7 +192,7 @@ const { sizeMap: It, roundedMap: St } = mt, Rt = 12e3, Tt = 2e3, Nt = "Please se
     [d, r.onFocus]
   ), Je = t.useCallback(
     (e) => {
-      if (d && !Z.current && i.current) {
+      if (d && !$.current && i.current) {
         te(!1);
         const o = {
           syntheticEvent: e,
@@ -203,41 +203,41 @@ const { sizeMap: It, roundedMap: St } = mt, Rt = 12e3, Tt = 2e3, Nt = "Please se
           const s = { ...o };
           r.onBlur.call(void 0, s);
         }
-        x || w(o);
+        E || x(o);
       }
     },
     [d, r.onBlur, l, u, m]
   ), Qe = t.useCallback(() => {
-    d && R($), x && setTimeout(() => {
+    d && T(U), E && setTimeout(() => {
       var e;
       g((e = Q.current) == null ? void 0 : e.element);
     }, 300);
-  }, [d, x]), ve = t.useCallback(
+  }, [d, E]), ge = t.useCallback(
     (e, o, s) => {
       if (r.onChange) {
         const p = {
           value: o,
-          level: s ? Pe(s) : [],
+          level: s ? Ne(s) : [],
           ...e
         };
         r.onChange.call(void 0, p);
       }
-      C || Ke(o);
+      C || ze(o);
     },
     [r.onChange, C]
-  ), ge = t.useCallback(
+  ), be = t.useCallback(
     (e) => {
-      if (Re(e.item, v, P) || !i.current)
+      if (Re(e.item, v, N) || !i.current)
         return;
-      const { item: o, itemHierarchicalIndex: s, nativeEvent: p, syntheticEvent: T } = e, D = {
-        syntheticEvent: T,
+      const { item: o, itemHierarchicalIndex: s, nativeEvent: p, syntheticEvent: P } = e, w = {
+        syntheticEvent: P,
         nativeEvent: p,
         target: i.current
       };
-      ve(D, o, s), w(D);
+      ge(w, o, s), x(w);
     },
-    [C, v, r.onChange, P, l, u, m]
-  ), be = t.useCallback(
+    [C, v, r.onChange, N, l, u, m]
+  ), he = t.useCallback(
     (e) => {
       if (!i.current)
         return;
@@ -246,24 +246,24 @@ const { sizeMap: It, roundedMap: St } = mt, Rt = 12e3, Tt = 2e3, Nt = "Please se
         nativeEvent: e.nativeEvent,
         target: i.current
       };
-      ve(o, null), w(o), e.preventDefault();
+      ge(o, null), x(o), e.preventDefault();
     },
     [C, r.onChange, l, u, m]
-  ), he = t.useCallback(
+  ), Ee = t.useCallback(
     (e) => {
       if (e.syntheticEvent.stopPropagation(), r.onExpandChange && i.current) {
-        const { item: o, itemHierarchicalIndex: s, nativeEvent: p, syntheticEvent: T } = e, D = {
-          level: Pe(s),
+        const { item: o, itemHierarchicalIndex: s, nativeEvent: p, syntheticEvent: P } = e, w = {
+          level: Ne(s),
           item: o,
           nativeEvent: p,
-          syntheticEvent: T,
+          syntheticEvent: P,
           target: i.current
         };
-        r.onExpandChange.call(void 0, D);
+        r.onExpandChange.call(void 0, w);
       }
     },
     [r.onExpandChange]
-  ), Ee = t.useCallback(
+  ), ye = t.useCallback(
     (e) => {
       if (r.onFilterChange && i.current) {
         const s = {
@@ -276,65 +276,67 @@ const { sizeMap: It, roundedMap: St } = mt, Rt = 12e3, Tt = 2e3, Nt = "Please se
           nativeEvent: e.nativeEvent,
           target: i.current
         };
-        r.onFilterChange.call(void 0, s), r.filter === void 0 && _e(e.target.value);
+        r.onFilterChange.call(void 0, s), r.filter === void 0 && Ze(e.target.value);
       }
     },
     [r.onFilterChange, r.filter, r.textField]
   ), Ye = () => {
     const e = a.filterable ? /* @__PURE__ */ t.createElement(
-      Ne,
+      Me,
       {
         value: a.filter === void 0 ? de : a.filter,
         ref: Q,
-        onChange: Ee,
-        onKeyDown: fe,
-        size: E,
+        onChange: ye,
+        onKeyDown: ve,
+        size: "large",
         rounded: K,
-        fillMode: B
+        fillMode: z,
+        placeholder: A
       }
     ) : null, o = {
-      title: a.adaptiveTitle,
+      title: a.adaptiveTitle || I,
+      subTitle: a.adaptiveSubtitle,
       expand: l,
-      onClose: (s) => w(s),
+      onClose: (s) => x(s),
       windowWidth: ne,
       mobileFilter: e
     };
-    return /* @__PURE__ */ t.createElement(Dt, { ...o }, /* @__PURE__ */ t.createElement(Ft, null, /* @__PURE__ */ t.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ t.createElement("div", { className: "k-list k-list-lg" }, N.length > 0 ? /* @__PURE__ */ t.createElement(
-      Se,
+    return /* @__PURE__ */ t.createElement(Dt, { ...o }, /* @__PURE__ */ t.createElement(Ft, null, M.length > 0 ? /* @__PURE__ */ t.createElement(
+      Te,
       {
         ref: h,
         tabIndex: J,
-        data: ye,
-        focusIdField: P,
+        data: Ce,
+        focusIdField: N,
         textField: a.textField,
-        selectField: z,
+        selectField: H,
         expandField: a.expandField,
         childrenField: W,
         expandIcons: !0,
-        onItemClick: ge,
-        onExpandChange: he,
-        size: E,
+        onItemClick: be,
+        onExpandChange: Ee,
+        size: "large",
         item: a.item,
         dir: k,
         animate: b.animate
       }
-    ) : /* @__PURE__ */ t.createElement(Ce, null, oe.toLanguageString(U, re[U]))))));
+    ) : /* @__PURE__ */ t.createElement(ke, null, oe.toLanguageString(X, re[X]))));
   }, et = t.useCallback((e) => {
     for (const o of e)
-      He(o.target.clientWidth);
-  }, []), ye = t.useMemo(() => C || !L ? N : ut(
-    N,
+      _e(o.target.clientWidth);
+  }, []), Ce = t.useMemo(() => C || !L ? M : ut(
+    M,
     W,
-    (e) => dt(e, W, { [z]: Re(e, v, P) })
-  ), [N, v, C, L, z, W]), Ce = a.listNoData || yt, tt = a.valueHolder || Pt, oe = vt(), ke = !Le || ee.valid, { size: E, rounded: K, fillMode: B } = a, xe = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+    (e) => dt(e, W, { [H]: Re(e, v, N) })
+  ), [M, v, C, L, H, W]), ke = a.listNoData || yt, tt = a.valueHolder || Mt, oe = vt(), xe = !Ke || ee.valid, { size: R, rounded: K, fillMode: z } = a, we = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
     "span",
     {
       className: ae("k-dropdowntree k-picker", a.className, {
-        [`k-picker-${It[E] || E}`]: E,
+        [`k-picker-${It[R] || R}`]: R,
         [`k-rounded-${St[K] || K}`]: K,
-        [`k-picker-${B}`]: B,
+        [`k-picker-${z}`]: z,
         "k-focus": d,
-        "k-invalid": !ke,
+        "k-invalid": !xe,
         "k-loading": a.loading,
         "k-required": G,
         "k-disabled": a.disabled
@@ -342,36 +344,36 @@ const { sizeMap: It, roundedMap: St } = mt, Rt = 12e3, Tt = 2e3, Nt = "Please se
       tabIndex: J,
       accessKey: a.accessKey,
       id: le,
-      style: V ? { ...M, width: void 0 } : M,
+      style: I ? { ...O, width: void 0 } : O,
       dir: k,
       ref: f,
-      onKeyDown: I ? void 0 : Ue,
+      onKeyDown: F ? void 0 : Ue,
       onMouseDown: Qe,
-      onClick: I ? void 0 : $e,
-      onFocus: Ge,
+      onClick: F ? void 0 : fe,
+      onFocus: E ? (e) => fe(e) : Ge,
       onBlur: Je,
       role: "combobox",
       "aria-haspopup": "tree",
       "aria-expanded": l,
-      "aria-disabled": I,
-      "aria-label": V,
+      "aria-disabled": F,
+      "aria-label": I,
       "aria-labelledby": a.ariaLabelledBy,
       "aria-describedby": a.ariaDescribedBy,
       "aria-required": G
     },
-    /* @__PURE__ */ t.createElement("span", { className: "k-input-inner" }, (Y || j) && /* @__PURE__ */ t.createElement(tt, { item: v }, Y || j)),
-    a.loading && /* @__PURE__ */ t.createElement(Ie, { className: "k-input-loading-icon", name: "loading" }),
-    L && !I && /* @__PURE__ */ t.createElement(
+    /* @__PURE__ */ t.createElement("span", { className: "k-input-inner" }, (Y || A) && /* @__PURE__ */ t.createElement(tt, { item: v }, Y || A)),
+    a.loading && /* @__PURE__ */ t.createElement(Se, { className: "k-input-loading-icon", name: "loading" }),
+    L && !F && /* @__PURE__ */ t.createElement(
       "span",
       {
-        onClick: be,
+        onClick: he,
         className: "k-clear-value",
-        title: oe.toLanguageString(Te, re[Te]),
+        title: oe.toLanguageString(Pe, re[Pe]),
         role: "button",
         tabIndex: -1,
         onMouseDown: (e) => e.preventDefault()
       },
-      /* @__PURE__ */ t.createElement(Ie, { name: "x", icon: xt })
+      /* @__PURE__ */ t.createElement(Se, { name: "x", icon: xt })
     ),
     /* @__PURE__ */ t.createElement(
       kt,
@@ -380,8 +382,8 @@ const { sizeMap: It, roundedMap: St } = mt, Rt = 12e3, Tt = 2e3, Nt = "Please se
         type: "button",
         "aria-label": "select",
         className: "k-input-button",
-        size: E,
-        fillMode: B,
+        size: R,
+        fillMode: z,
         themeColor: "base",
         rounded: null,
         icon: "caret-alt-down",
@@ -391,16 +393,16 @@ const { sizeMap: It, roundedMap: St } = mt, Rt = 12e3, Tt = 2e3, Nt = "Please se
     /* @__PURE__ */ t.createElement(
       "select",
       {
-        name: Ve,
-        ref: _,
+        name: We,
+        ref: Z,
         tabIndex: -1,
         "aria-hidden": !0,
-        title: V,
+        title: I,
         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, v) : v })
     ),
-    !x && /* @__PURE__ */ t.createElement(Fe.Provider, { value: Be }, /* @__PURE__ */ t.createElement(
+    !E && /* @__PURE__ */ t.createElement(Ie.Provider, { value: Be }, /* @__PURE__ */ t.createElement(
       ft,
       {
         ...b,
@@ -413,57 +415,57 @@ const { sizeMap: It, roundedMap: St } = mt, Rt = 12e3, Tt = 2e3, Nt = "Please se
         onClose: je
       },
       a.filterable && /* @__PURE__ */ t.createElement(
-        Ne,
+        Me,
         {
           value: a.filter === void 0 ? de : a.filter,
           ref: S,
-          onChange: Ee,
-          onKeyDown: fe,
-          size: E,
+          onChange: ye,
+          onKeyDown: ve,
+          size: R,
           rounded: K,
-          fillMode: B,
+          fillMode: z,
           renderListFilterWrapper: !0,
           renderPrefixSeparator: !0
         }
       ),
-      N.length > 0 ? /* @__PURE__ */ t.createElement(
-        Se,
+      M.length > 0 ? /* @__PURE__ */ t.createElement(
+        Te,
         {
           style: { height: b.height },
           ref: h,
           tabIndex: J,
-          data: ye,
-          focusIdField: P,
+          data: Ce,
+          focusIdField: N,
           textField: a.textField,
-          selectField: z,
+          selectField: H,
           expandField: a.expandField,
           childrenField: W,
           expandIcons: !0,
-          onItemClick: ge,
-          onExpandChange: he,
-          size: E,
+          onItemClick: be,
+          onExpandChange: Ee,
+          size: R,
           item: a.item,
           dir: k,
           animate: b.animate
         }
-      ) : /* @__PURE__ */ t.createElement(Ce, null, oe.toLanguageString(U, re[U])),
-      X && /* @__PURE__ */ t.createElement(pt, null)
+      ) : /* @__PURE__ */ t.createElement(ke, null, oe.toLanguageString(X, re[X])),
+      j && /* @__PURE__ */ t.createElement(pt, null)
     ))
-  ), x && Ye());
-  return V ? /* @__PURE__ */ t.createElement(
+  ), E && Ye());
+  return I ? /* @__PURE__ */ t.createElement(
     Ct,
     {
-      label: V,
+      label: I,
       editorValue: Y,
-      editorPlaceholder: j,
-      editorValid: ke,
-      editorDisabled: I,
+      editorPlaceholder: A,
+      editorValid: xe,
+      editorDisabled: F,
       editorId: le,
-      style: { width: M ? M.width : void 0 },
-      children: xe,
+      style: { width: O ? O.width : void 0 },
+      children: we,
       dir: k
     }
-  ) : xe;
+  ) : we;
 }), Vt = {
   opened: n.bool,
   disabled: n.bool,
@@ -518,11 +520,12 @@ const { sizeMap: It, roundedMap: St } = mt, Rt = 12e3, Tt = 2e3, Nt = "Please se
   valueHolder: n.func,
   listNoData: n.func,
   adaptiveTitle: n.string,
+  adaptiveSubtitle: n.string,
   adaptive: n.bool
 };
-Me.displayName = "KendoReactDropDownTree";
-Me.propTypes = Vt;
+Oe.displayName = "KendoReactDropDownTree";
+Oe.propTypes = Vt;
 export {
-  Me as DropDownTree,
+  Oe as DropDownTree,
   Ot as DropDownTreePropsContext
 };

package/MultiColumnComboBox/MultiColumnComboBox.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ue=require("react"),ie=require("prop-types"),de=require("../common/MultiColumnList.js"),l=require("@progress/kendo-react-common"),j=require("../ComboBox/ComboBox.js"),ce=require("../common/utils.js"),K=require("../common/withCustomComponent.js");function pe(a){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const c=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(d,e,c.get?c:{enumerable:!0,get:()=>a[e]})}}return d.default=a,Object.freeze(d)}const t=pe(ue),me=(a,d)=>a?typeof a=="number"?a+"px":a:d,G=l.createPropsContext(),y=t.forwardRef((a,d)=>{const e=l.usePropsContext(G,a),c=t.useRef(null),n=t.useRef(null),w=l.getScrollbarWidth(),{columns:s=i.columns,popupSettings:f=i.popupSettings,size:W=i.size,rounded:z=i.rounded,fillMode:L=i.fillMode,className:_,prefix:D=void 0,suffix:$=void 0,onOpen:M,onClose:S,onFocus:N,onBlur:E,onChange:F,onFilterChange:H,onPageChange:R,...V}=e;t.useImperativeHandle(c,()=>({element:n.current&&n.current.element,focus(){n.current&&n.current.focus()},get value(){return n.current&&n.current.value},get name(){return n.current&&n.current.name},props:e})),t.useImperativeHandle(d,()=>c.current);const g=t.useMemo(()=>{if(e.groupField!==void 0&&e.data)return ce.getItemValue(e.data[0],e.groupField)},[e.data,e.groupField]),[k,b]=t.useState(g),[q,B]=t.useState(!0),[A]=D?K(e.prefix||t.Fragment):[],[J]=$?K(e.suffix||t.Fragment):[],Q=t.useMemo(()=>{const o=t.createElement("th",{className:"k-table-th",colSpan:s.length},k);return t.createElement(t.Fragment,null,e.header,t.createElement("div",{className:"k-table-header-wrap"},t.createElement("table",{className:"k-table",role:"presentation"},t.createElement("colgroup",null,s.map((r,p)=>t.createElement("col",{key:r.uniqueKey?r.uniqueKey:p,style:{width:r.width?r.width:i.width}}))),t.createElement("thead",{className:"k-table-thead"},t.createElement("tr",{className:"k-table-row"},s.map((r,p)=>t.createElement("th",{className:"k-table-th",key:r.uniqueKey?r.uniqueKey:p},r.header||" "))),k&&q&&t.createElement("tr",{className:"k-table-group-row"},e.groupStickyHeaderItemRender?e.groupStickyHeaderItemRender.call(void 0,o,{}):o)))))},[e.header,s,k,q]),U=t.useMemo(()=>`calc(${s.map(o=>me(o.width,i.width)).filter(Boolean).join(" + ")} + ${w}px + 4px)`,[s,w]),I=e.virtual?e.virtual.skip:0,X=t.useCallback((o,r)=>{const p=s.map((m,se)=>t.createElement("span",{className:e.itemRender?void 0:"k-table-td",style:e.itemRender?void 0:{width:m.width?m.width:i.width},key:m.uniqueKey?m.uniqueKey:se},m.field?String(l.getter(m.field)(r.dataItem)):""));let C,h,v,x,O=e.data||[];const P=r.index-I;e.groupField!==void 0&&(x=l.getter(e.groupField),h=x(O[P]),v=x(O[P-1]),h&&v&&h!==v&&(C=h)),C&&e.groupMode==="classic"&&p.push(t.createElement("div",{key:"group",className:"k-table-td k-table-group-td"},t.createElement("span",null,C)));const T=t.cloneElement(o,{...o.props,className:l.classNames("k-table-row",{"k-table-alt-row":r.index%2!==0,"k-focus":r.focused,"k-selected":r.selected,"k-first":!!C,"k-disabled":r.dataItem.disabled})},p);return e.itemRender?e.itemRender.call(void 0,T,r):T},[s,e.groupField,e.itemRender,e.data,I]),u=t.useCallback((o,r)=>{o&&o.call(void 0,{...r,target:c.current})},[]),Y=t.useCallback(o=>(e.virtual||b(g),u(M,o)),[u,M,e.virtual,g]),Z=t.useCallback(o=>u(S,o),[S]),ee=t.useCallback(o=>u(N,o),[N]),te=t.useCallback(o=>u(E,o),[E]),oe=t.useCallback(o=>u(F,o),[F]),re=t.useCallback(o=>u(R,o),[R]),ae=t.useCallback(o=>(b(g),u(H,{...o,mobileMode:o.target.mobileMode})),[H]),ne=t.useCallback(o=>{b(o.group)},[]);t.useEffect(()=>{l.setScrollbarWidth()}),t.useEffect(()=>{const o=e.data;b(g),o&&o.length!==0?B(!0):B(!1)},[e.data]);const le=t.useCallback(o=>t.createElement(de.MultiColumnList,{...o}),[]);return t.createElement(j.ComboBox,{...V,list:le,popupSettings:{...f,popupClass:l.classNames("k-dropdowngrid-popup",f.popupClass),width:f.width||U,className:f.className},ref:n,header:Q,itemRender:X,groupHeaderItemRender:e.groupHeaderItemRender,size:W,rounded:z,fillMode:L,groupMode:e.groupMode,groupField:e.groupField,isMultiColumn:!0,onOpen:Y,onClose:Z,onFocus:ee,onBlur:te,onChange:oe,onFilterChange:ae,onPageChange:re,onGroupScroll:ne,className:l.classNames("k-dropdowngrid",_),required:e.required,adaptive:e.adaptive,adaptiveFilter:e.adaptiveFilter,adaptiveTitle:e.adaptiveTitle,footer:e.footer,footerClassName:"k-table-footer",prefix:A,suffix:J})}),ge={...j.ComboBoxWithoutContext.propTypes,columns:ie.any.isRequired},i={columns:[],popupSettings:{},width:"200px",size:"medium",rounded:"medium",fillMode:"solid"};y.displayName="KendoMultiColumnComboBox";y.propTypes=ge;exports.MultiColumnComboBox=y;exports.MultiColumnComboBoxPropsContext=G;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ue=require("react"),ie=require("prop-types"),de=require("../common/MultiColumnList.js"),l=require("@progress/kendo-react-common"),j=require("../ComboBox/ComboBox.js"),ce=require("../common/utils.js"),K=require("../common/withCustomComponent.js");function pe(a){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const c=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(d,e,c.get?c:{enumerable:!0,get:()=>a[e]})}}return d.default=a,Object.freeze(d)}const t=pe(ue),me=(a,d)=>a?typeof a=="number"?a+"px":a:d,G=l.createPropsContext(),y=t.forwardRef((a,d)=>{const e=l.usePropsContext(G,a),c=t.useRef(null),n=t.useRef(null),S=l.getScrollbarWidth(),{columns:s=i.columns,popupSettings:f=i.popupSettings,size:W=i.size,rounded:z=i.rounded,fillMode:L=i.fillMode,className:_,prefix:D=void 0,suffix:$=void 0,onOpen:w,onClose:M,onFocus:N,onBlur:E,onChange:F,onFilterChange:H,onPageChange:R,...V}=e;t.useImperativeHandle(c,()=>({element:n.current&&n.current.element,focus(){n.current&&n.current.focus()},get value(){return n.current&&n.current.value},get name(){return n.current&&n.current.name},props:e})),t.useImperativeHandle(d,()=>c.current);const g=t.useMemo(()=>{if(e.groupField!==void 0&&e.data)return ce.getItemValue(e.data[0],e.groupField)},[e.data,e.groupField]),[k,b]=t.useState(g),[q,B]=t.useState(!0),[A]=D?K(e.prefix||t.Fragment):[],[J]=$?K(e.suffix||t.Fragment):[],Q=t.useMemo(()=>{const o=t.createElement("th",{className:"k-table-th",colSpan:s.length},k);return t.createElement(t.Fragment,null,e.header,t.createElement("div",{className:"k-table-header-wrap"},t.createElement("table",{className:"k-table",role:"presentation"},t.createElement("colgroup",null,s.map((r,p)=>t.createElement("col",{key:r.uniqueKey?r.uniqueKey:p,style:{width:r.width?r.width:i.width}}))),t.createElement("thead",{className:"k-table-thead"},t.createElement("tr",{className:"k-table-row"},s.map((r,p)=>t.createElement("th",{className:"k-table-th",key:r.uniqueKey?r.uniqueKey:p},r.header||" "))),k&&q&&t.createElement("tr",{className:"k-table-group-row"},e.groupStickyHeaderItemRender?e.groupStickyHeaderItemRender.call(void 0,o,{}):o)))))},[e.header,s,k,q]),U=t.useMemo(()=>`calc(${s.map(o=>me(o.width,i.width)).filter(Boolean).join(" + ")} + ${S}px + 4px)`,[s,S]),I=e.virtual?e.virtual.skip:0,X=t.useCallback((o,r)=>{const p=s.map((m,se)=>t.createElement("span",{className:e.itemRender?void 0:"k-table-td",style:e.itemRender?void 0:{width:m.width?m.width:i.width},key:m.uniqueKey?m.uniqueKey:se},m.field?String(l.getter(m.field)(r.dataItem)):""));let C,h,v,x,O=e.data||[];const P=r.index-I;e.groupField!==void 0&&(x=l.getter(e.groupField),h=x(O[P]),v=x(O[P-1]),h&&v&&h!==v&&(C=h)),C&&e.groupMode==="classic"&&p.push(t.createElement("div",{key:"group",className:"k-table-td k-table-group-td"},t.createElement("span",null,C)));const T=t.cloneElement(o,{...o.props,className:l.classNames("k-table-row",{"k-table-alt-row":r.index%2!==0,"k-focus":r.focused,"k-selected":r.selected,"k-first":!!C,"k-disabled":r.dataItem.disabled})},p);return e.itemRender?e.itemRender.call(void 0,T,r):T},[s,e.groupField,e.itemRender,e.data,I]),u=t.useCallback((o,r)=>{o&&o.call(void 0,{...r,target:c.current})},[]),Y=t.useCallback(o=>(e.virtual||b(g),u(w,o)),[u,w,e.virtual,g]),Z=t.useCallback(o=>u(M,o),[M]),ee=t.useCallback(o=>u(N,o),[N]),te=t.useCallback(o=>u(E,o),[E]),oe=t.useCallback(o=>u(F,o),[F]),re=t.useCallback(o=>u(R,o),[R]),ae=t.useCallback(o=>(b(g),u(H,{...o,mobileMode:o.target.mobileMode})),[H]),ne=t.useCallback(o=>{b(o.group)},[]);t.useEffect(()=>{l.setScrollbarWidth()}),t.useEffect(()=>{const o=e.data;b(g),o&&o.length!==0?B(!0):B(!1)},[e.data]);const le=t.useCallback(o=>t.createElement(de.MultiColumnList,{...o}),[]);return t.createElement(j.ComboBox,{...V,list:le,popupSettings:{...f,popupClass:l.classNames("k-dropdowngrid-popup",f.popupClass),width:f.width||U,className:f.className},ref:n,header:Q,itemRender:X,groupHeaderItemRender:e.groupHeaderItemRender,size:W,rounded:z,fillMode:L,groupMode:e.groupMode,groupField:e.groupField,isMultiColumn:!0,onOpen:Y,onClose:Z,onFocus:ee,onBlur:te,onChange:oe,onFilterChange:ae,onPageChange:re,onGroupScroll:ne,className:l.classNames("k-dropdowngrid",_),required:e.required,adaptive:e.adaptive,adaptiveFilter:e.adaptiveFilter,adaptiveTitle:e.adaptiveTitle,adaptiveSubtitle:e.adaptiveSubtitle,footer:e.footer,footerClassName:"k-table-footer",prefix:A,suffix:J})}),ge={...j.ComboBoxWithoutContext.propTypes,columns:ie.any.isRequired},i={columns:[],popupSettings:{},width:"200px",size:"medium",rounded:"medium",fillMode:"solid"};y.displayName="KendoMultiColumnComboBox";y.propTypes=ge;exports.MultiColumnComboBox=y;exports.MultiColumnComboBoxPropsContext=G;