@progress/kendo-react-dropdowns 13.4.0-develop.5 → 14.0.0-develop.2

package/AutoComplete/AutoComplete.mjs

@@ -13,7 +13,7 @@ import K from "../common/List.mjs";
 import S from "../common/DropDownBase.mjs";
 import L from "../common/GroupStickyHeader.mjs";
 import { getFilteredData as b, getItemValue as y, areSame as w, isPresent as z, getFocusedItem as E, itemIndexStartsWith as H } from "../common/utils.mjs";
-import { withIdHOC as A, createPropsContext as q, withPropsContext as W, withAdaptiveModeContext as G, classNames as k, kendoThemeMaps as U, Keys as m, canUseDOM as M, subscribeToKendoPaste as $, IconWrap as j } from "@progress/kendo-react-common";
+import { withIdHOC as A, withPropsContext as q, withAdaptiveModeContext as W, createPropsContext as G, classNames as k, kendoThemeMaps as U, Keys as m, canUseDOM as M, subscribeToKendoPaste as $, IconWrap as j } from "@progress/kendo-react-common";
 import { FloatingLabel as J } from "@progress/kendo-react-labels";
 import Q from "../common/ClearButton.mjs";
 import { AdaptiveMode as X } from "../common/AdaptiveMode.mjs";
@@ -513,10 +513,10 @@ I.displayName = "AutoComplete", I.propTypes = {
   suffix: void 0
 };
 let _ = I;
-const se = q(), ie = A(
-  W(
+const se = G(), ie = A(
+  q(
     se,
-    G(_)
+    W(_)
   )
 );
 ie.displayName = "KendoReactAutoComplete";

package/ComboBox/ComboBox.mjs

@@ -8,7 +8,7 @@
 import * as u from "react";
 import m from "prop-types";
 import _ from "../common/DropDownBase.mjs";
-import { withIdHOC as et, createPropsContext as st, withPropsContext as it, withUnstyledHOC as ot, withAdaptiveModeContext as at, classNames as S, uComboBox as F, Keys as I, validatePackage as nt, getLicenseMessage as lt, svgIconPropType as rt, canUseDOM as A, subscribeToKendoPaste as pt, IconWrap as dt, WatermarkOverlay as ht } from "@progress/kendo-react-common";
+import { withIdHOC as et, withPropsContext as st, withUnstyledHOC as it, withAdaptiveModeContext as ot, createPropsContext as at, classNames as S, uComboBox as F, Keys as I, validatePackage as nt, getLicenseMessage as lt, svgIconPropType as rt, canUseDOM as A, subscribeToKendoPaste as pt, IconWrap as dt, WatermarkOverlay as ht } from "@progress/kendo-react-common";
 import { FloatingLabel as ct } from "@progress/kendo-react-labels";
 import { getPlainDataDuplicates as ut, getItemIndexByText as P, getFilteredData as y, areSame as w, getItemValue as D, isPresent as k, itemIndexStartsWith as L, suggestValue as gt } from "../common/utils.mjs";
 import mt from "../common/SearchBar.mjs";
@@ -721,11 +721,11 @@ M.displayName = "ComboBox", M.propTypes = {
   suffix: void 0
 };
 let N = M;
-const kt = st(), wt = et(
-  it(
+const kt = at(), wt = et(
+  st(
     kt,
-    ot(
-      at(N)
+    it(
+      ot(N)
     )
   )
 );

package/DropDownList/DropDownList.mjs

@@ -7,7 +7,7 @@
  */
 import * as s from "react";
 import C from "prop-types";
-import { createPropsContext as Xt, getLicenseMessage as Zt, usePropsContext as Rt, validatePackage as en, useUnstyled as tn, useId as nn, useKendoPaste as rn, canUseDOM as nt, useAdaptiveModeContext as on, classNames as L, uDropDownList as P, getTabIndex as sn, IconWrap as an, Keys as I, WatermarkOverlay as ln, sizeMap as dn, svgIconPropType as cn } from "@progress/kendo-react-common";
+import { getLicenseMessage as Xt, usePropsContext as Zt, validatePackage as Rt, useUnstyled as en, useId as tn, useKendoPaste as nn, canUseDOM as nt, useAdaptiveModeContext as rn, classNames as L, uDropDownList as P, getTabIndex as on, IconWrap as sn, createPropsContext as an, Keys as I, WatermarkOverlay as ln, sizeMap as dn, svgIconPropType as cn } from "@progress/kendo-react-common";
 import { FloatingLabel as un } from "@progress/kendo-react-labels";
 import { caretAltDownIcon as pn } from "@progress/kendo-svg-icons";
 import mn from "../common/ListContainer.mjs";
@@ -25,7 +25,7 @@ import { ActionSheetContent as Sn } from "@progress/kendo-react-layout";
 import { AdaptiveMode as Cn } from "../common/AdaptiveMode.mjs";
 const kn = "Please select a value from the list!", Me = s.forwardRef((ut, pt) => {
   let Ke = !1;
-  const mt = Zt(st), n = Rt(En, ut), {
+  const mt = Xt(st), n = Zt(En, ut), {
     delay: ft = z.delay,
     tabIndex: gt = z.tabIndex,
     ignoreCase: J = z.ignoreCase,
@@ -35,12 +35,12 @@ const kn = "Please select a value from the list!", Me = s.forwardRef((ut, pt) =>
   } = n;
   if (n.filterable || n.virtual) {
     const e = [];
-    n.filterable && e.push("filterable"), n.virtual && e.push("virtualization"), Ke = !en(st, {
+    n.filterable && e.push("filterable"), n.virtual && e.push("virtualization"), Ke = !Rt(st, {
       component: "DropDownList",
       features: e
     });
   }
-  const K = tn(), fe = nn(n.id), ge = () => {
+  const K = en(), fe = tn(n.id), ge = () => {
     var e;
     if (nt)
       return ((e = A.current) == null ? void 0 : e.ownerDocument) || window.document;
@@ -481,7 +481,7 @@ const kn = "Please select a value from the list!", Me = s.forwardRef((ut, pt) =>
     },
     [n, J]
   );
-  rn(A, {
+  nn(A, {
     fieldName: _e,
     onValueChange: Bt,
     enabled: !!_e
@@ -541,7 +541,7 @@ const kn = "Please select a value from the list!", Me = s.forwardRef((ut, pt) =>
     valueRender: Je
   } = n, be = n.opened !== void 0 ? n.opened : m.opened, ae = k(), Pe = ne(ae, n.textField), Qe = !ht() || Ie().valid, le = t.current, $t = le.vs, ee = K && K.uDropDownList;
   $t.enabled = U !== void 0;
-  const Xe = on(), _ = !!(ke && Xe && ke <= Xe.medium && n.adaptive);
+  const Xe = rn(), _ = !!(ke && Xe && ke <= Xe.medium && n.adaptive);
   U !== void 0 && (le.vs.skip = U.skip, le.vs.total = U.total, le.vs.pageSize = U.pageSize);
   const Yt = E(n), { focused: jt } = m, Jt = Yt.findIndex((e) => F(e, ae, _t)), Ze = /* @__PURE__ */ s.createElement("span", { id: Ge, className: L(P.inputInner({ c: ee })) }, Pe && /* @__PURE__ */ s.createElement("span", { className: L(P.inputText({ c: ee })) }, Pe)), Qt = Je !== void 0 ? Je.call(void 0, Ze, ae) : Ze, Re = /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement(
     "span",
@@ -568,7 +568,7 @@ const kn = "Please select a value from the list!", Me = s.forwardRef((ut, pt) =>
       } : void 0,
       onFocus: _ ? (e) => xe(e) : Tt,
       onBlur: zt,
-      tabIndex: sn(gt, se),
+      tabIndex: on(gt, se),
       accessKey: n.accessKey,
       onKeyDown: Oe,
       onKeyPress: Ot,
@@ -588,7 +588,7 @@ const kn = "Please select a value from the list!", Me = s.forwardRef((ut, pt) =>
       title: n.title
     },
     Qt,
-    Ye && /* @__PURE__ */ s.createElement(an, { className: L(P.loadingIcon({ c: ee })), name: "loading" }),
+    Ye && /* @__PURE__ */ s.createElement(sn, { className: L(P.loadingIcon({ c: ee })), name: "loading" }),
     /* @__PURE__ */ s.createElement(
       xn,
       {
@@ -649,7 +649,7 @@ const z = {
   fillMode: void 0
 };
 Me.displayName = "KendoReactDropDownList";
-const En = Xt();
+const En = an();
 Me.displayName = "KendoReactDropDownList";
 export {
   Me as DropDownList,

package/DropDownTree/DropDownTree.mjs

@@ -7,7 +7,7 @@
  */
 import * as t from "react";
 import n from "prop-types";
-import { createPropsContext as at, validatePackage as rt, getLicenseMessage as it, usePropsContext as lt, useId as st, getTabIndex as ct, ZIndexContext as Se, useRtl as ut, useAdaptiveModeContext as dt, canUseDOM as pt, noop as X, Keys as c, mapTree as ft, extendDataItem as mt, classNames as re, kendoThemeMaps as vt, IconWrap as Te, WatermarkOverlay as gt } from "@progress/kendo-react-common";
+import { validatePackage as at, getLicenseMessage as rt, usePropsContext as it, useId as lt, getTabIndex as st, ZIndexContext as Se, useRtl as ct, useAdaptiveModeContext as ut, canUseDOM as dt, noop as X, Keys as c, mapTree as pt, extendDataItem as ft, classNames as re, kendoThemeMaps as mt, IconWrap as Te, WatermarkOverlay as vt, createPropsContext as gt } from "@progress/kendo-react-common";
 import { Popup as bt } from "@progress/kendo-react-popup";
 import { useLocalization as ht } from "@progress/kendo-react-intl";
 import { TreeView as Re } from "@progress/kendo-react-treeview";
@@ -22,7 +22,7 @@ import { Button as wt } from "@progress/kendo-react-buttons";
 import { xIcon as Dt, caretAltDownIcon as Ft } from "@progress/kendo-svg-icons";
 import { AdaptiveMode as It } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as St } from "@progress/kendo-react-layout";
-const { sizeMap: Tt, roundedMap: Rt } = vt, Mt = 12e3, Pt = 2e3, Nt = "Please select a value from the list!", Ot = (E) => /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, E.children), Ve = (E) => E.split("_").map((D) => parseInt(D, 10)), Vt = (E, D) => {
+const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please select a value from the list!", Ot = (E) => /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, E.children), Ve = (E) => E.split("_").map((D) => parseInt(D, 10)), Vt = (E, D) => {
   const { validationMessage: G, valid: B, required: r } = E;
   return {
     customError: G !== void 0,
@@ -44,11 +44,11 @@ const { sizeMap: Tt, roundedMap: Rt } = vt, Mt = 12e3, Pt = 2e3, Nt = "Please se
   size: void 0,
   rounded: void 0,
   fillMode: void 0
-}, Lt = at(), Le = t.forwardRef((E, D) => {
-  const G = !rt(Me, { component: "DropDownTree" }), B = it(Me), r = lt(Lt, E), a = {
+}, Lt = gt(), Le = t.forwardRef((E, D) => {
+  const G = !at(Me, { component: "DropDownTree" }), B = rt(Me), r = it(Lt, E), a = {
     ...le,
     ...r
-  }, We = st(), se = a.id || We, {
+  }, We = lt(), se = a.id || We, {
     data: N,
     dataItemKey: O,
     popupSettings: f = {},
@@ -66,13 +66,13 @@ const { sizeMap: Tt, roundedMap: Rt } = vt, Mt = 12e3, Pt = 2e3, Nt = "Please se
     valid: ze,
     required: J,
     validityStyles: qe
-  } = a, Q = ct(a.tabIndex, F), i = t.useRef(null), v = t.useRef(null), S = t.useRef(null), Y = t.useRef(null), $ = t.useRef(null), y = t.useRef(null), U = t.useRef(!1), [ce, Ae] = t.useState(void 0), C = a.value !== void 0, g = C ? a.value : ce !== void 0 ? ce : a.defaultValue, K = yt(g), ee = K ? Et(g, a.textField) : "", te = Vt({ validationMessage: Z, valid: ze, required: J }, K), ue = t.useContext(Se), Be = ue ? ue + Pt : Mt, He = t.useCallback(() => v.current && v.current.focus(), []);
+  } = a, Q = st(a.tabIndex, F), i = t.useRef(null), v = t.useRef(null), S = t.useRef(null), Y = t.useRef(null), $ = t.useRef(null), y = t.useRef(null), U = t.useRef(!1), [ce, Ae] = t.useState(void 0), C = a.value !== void 0, g = C ? a.value : ce !== void 0 ? ce : a.defaultValue, K = yt(g), ee = K ? Et(g, a.textField) : "", te = Vt({ validationMessage: Z, valid: ze, required: J }, K), ue = t.useContext(Se), Be = ue ? ue + Pt : Mt, He = t.useCallback(() => v.current && v.current.focus(), []);
   t.useImperativeHandle(i, () => ({
     props: a,
     element: v.current,
     focus: He
   })), t.useImperativeHandle(D, () => i.current);
-  const k = ut(v, a.dir), _e = {
+  const k = ct(v, a.dir), _e = {
     width: Ct(
       v,
       le,
@@ -80,13 +80,13 @@ const { sizeMap: Tt, roundedMap: Rt } = vt, Mt = 12e3, Pt = 2e3, Nt = "Please se
       V
     ),
     ...k !== void 0 ? { direction: k } : {}
-  }, [Ze, de] = t.useState(!1), l = u !== void 0 ? u : Ze, [p, ne] = t.useState(!1), [oe, $e] = t.useState(), [pe, Ue] = t.useState(""), fe = dt(), h = !!(oe && fe && oe <= fe.medium && a.adaptive), Xe = t.useCallback(() => {
+  }, [Ze, de] = t.useState(!1), l = u !== void 0 ? u : Ze, [p, ne] = t.useState(!1), [oe, $e] = t.useState(), [pe, Ue] = t.useState(""), fe = ut(), h = !!(oe && fe && oe <= fe.medium && a.adaptive), Xe = t.useCallback(() => {
     $.current && $.current.setCustomValidity && $.current.setCustomValidity(
       te.valid ? "" : Z === void 0 ? Nt : Z
     );
   }, [Z, te]);
   t.useEffect(Xe), t.useEffect(() => {
-    const e = pt && window.ResizeObserver && new window.ResizeObserver(nt.bind(void 0));
+    const e = dt && window.ResizeObserver && new window.ResizeObserver(nt.bind(void 0));
     return document != null && document.body && e && e.observe(document.body), () => {
       document != null && document.body && e && e.disconnect();
     };
@@ -331,10 +331,10 @@ const { sizeMap: Tt, roundedMap: Rt } = vt, Mt = 12e3, Pt = 2e3, Nt = "Please se
   }, nt = t.useCallback((e) => {
     for (const o of e)
       $e(o.target.clientWidth);
-  }, []), ke = t.useMemo(() => C || !K ? N : ft(
+  }, []), ke = t.useMemo(() => C || !K ? N : pt(
     N,
     W,
-    (e) => mt(e, W, { [_]: Pe(e, g, O) })
+    (e) => ft(e, W, { [_]: Pe(e, g, O) })
   ), [N, g, C, K, _, W]), xe = a.listNoData || kt, ot = a.valueHolder || Ot, ae = ht(), we = !qe || te.valid, { size: R, rounded: z, fillMode: q } = a, De = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
     "span",
     {
@@ -454,7 +454,7 @@ const { sizeMap: Tt, roundedMap: Rt } = vt, Mt = 12e3, Pt = 2e3, Nt = "Please se
           animate: !1
         }
       ) : /* @__PURE__ */ t.createElement(xe, null, ae.toLanguageString(j, ie[j])),
-      G && /* @__PURE__ */ t.createElement(gt, { message: B })
+      G && /* @__PURE__ */ t.createElement(vt, { message: B })
     ))
   ), h && tt());
   return I ? /* @__PURE__ */ t.createElement(

package/MultiColumnComboBox/MultiColumnComboBox.mjs

@@ -8,13 +8,13 @@
 import * as e from "react";
 import se from "prop-types";
 import { MultiColumnList as ie } from "../common/MultiColumnList.mjs";
-import { createPropsContext as ue, usePropsContext as de, getScrollbarWidth as ce, getter as T, classNames as v, setScrollbarWidth as pe } from "@progress/kendo-react-common";
+import { usePropsContext as ue, getScrollbarWidth as de, getter as T, classNames as v, setScrollbarWidth as ce, createPropsContext as pe } from "@progress/kendo-react-common";
 import { ComboBox as me, ComboBoxWithoutContext as fe } from "../ComboBox/ComboBox.mjs";
 import { getItemValue as ge } from "../common/utils.mjs";
 import W from "../common/withCustomComponent.mjs";
-const he = (s, g) => s ? typeof s == "number" ? s + "px" : s : g, Ce = ue(), P = e.forwardRef(
+const he = (s, g) => s ? typeof s == "number" ? s + "px" : s : g, Ce = pe(), P = e.forwardRef(
   (s, g) => {
-    const t = de(Ce, s), h = e.useRef(null), i = e.useRef(null), x = ce(), {
+    const t = ue(Ce, s), h = e.useRef(null), i = e.useRef(null), x = de(), {
       columns: r = l.columns,
       popupSettings: p = l.popupSettings,
       size: z = l.size,
@@ -120,7 +120,7 @@ const he = (s, g) => s ? typeof s == "number" ? s + "px" : s : g, Ce = ue(), P =
       m(o.group);
     }, []);
     e.useEffect(() => {
-      pe();
+      ce();
     }), e.useEffect(() => {
       const o = t.data;
       m(d), o && o.length !== 0 ? M(!0) : M(!1);

package/MultiSelect/MultiSelect.mjs

@@ -7,7 +7,7 @@
  */
 import * as g from "react";
 import v from "prop-types";
-import { withIdHOC as J, createPropsContext as Q, withPropsContext as X, withAdaptiveModeContext as Z, Keys as u, classNames as S, kendoThemeMaps as tt, IconWrap as B, WatermarkOverlay as et, getLicenseMessage as st, canUseDOM as V, validatePackage as it, subscribeToKendoPaste as ot } from "@progress/kendo-react-common";
+import { withIdHOC as J, withPropsContext as Q, withAdaptiveModeContext as X, createPropsContext as Z, Keys as u, classNames as S, kendoThemeMaps as tt, IconWrap as B, WatermarkOverlay as et, getLicenseMessage as st, canUseDOM as V, validatePackage as it, subscribeToKendoPaste as ot } from "@progress/kendo-react-common";
 import { plusIcon as at } from "@progress/kendo-svg-icons";
 import { FloatingLabel as nt } from "@progress/kendo-react-labels";
 import lt from "../common/ListContainer.mjs";
@@ -722,10 +722,10 @@ C.displayName = "MultiSelect", C.propTypes = {
   suffix: void 0
 };
 let N = C;
-const xt = Q(), St = J(
-  X(
+const xt = Z(), St = J(
+  Q(
     xt,
-    Z(N)
+    X(N)
   )
 );
 St.displayName = "KendoReactMultiSelect";

package/MultiSelectTree/MultiSelectTree.mjs

@@ -7,7 +7,7 @@
  */
 import * as t from "react";
 import n from "prop-types";
-import { createPropsContext as it, usePropsContext as rt, validatePackage as ot, getLicenseMessage as lt, useId as st, noop as Y, getTabIndex as ct, useRtl as ut, useAdaptiveModeContext as dt, canUseDOM as pt, Keys as r, classNames as Z, kendoThemeMaps as ft, IconWrap as mt, WatermarkOverlay as gt } from "@progress/kendo-react-common";
+import { usePropsContext as it, validatePackage as rt, getLicenseMessage as ot, useId as lt, noop as Y, getTabIndex as st, useRtl as ct, useAdaptiveModeContext as ut, canUseDOM as dt, Keys as r, classNames as Z, kendoThemeMaps as pt, IconWrap as ft, WatermarkOverlay as mt, createPropsContext 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 Ie } from "@progress/kendo-react-treeview";
@@ -22,7 +22,7 @@ import xt from "../common/ClearButton.mjs";
 import Re from "../common/ListFilter.mjs";
 import { AdaptiveMode as St } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as wt } from "@progress/kendo-react-layout";
-const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: Tt } = ft, Dt = (N) => N.split("_").map((M) => parseInt(M, 10)), Mt = (N, M) => {
+const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: Tt } = pt, Dt = (N) => N.split("_").map((M) => parseInt(M, 10)), Mt = (N, M) => {
   const { validationMessage: a, valid: V, required: te } = N;
   return {
     customError: a !== void 0,
@@ -43,9 +43,9 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: Tt
   fillMode: void 0,
   required: !1,
   validityStyles: !0
-}, Rt = it(), Ne = t.forwardRef(
+}, Rt = gt(), Ne = t.forwardRef(
   (N, M) => {
-    const a = rt(Rt, N), V = !ot(Te, { component: "MultiSelectTree" }), te = lt(Te), Oe = st(), O = a.id || Oe, {
+    const a = it(Rt, N), V = !rt(Te, { component: "MultiSelectTree" }), te = ot(Te), Oe = lt(), O = a.id || Oe, {
       data: W = [],
       dataItemKey: x,
       style: L = {},
@@ -69,10 +69,10 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: Tt
       validityStyles: Ke = b.validityStyles,
       onOpen: ae = Y,
       onClose: A = Y
-    } = a, $ = ct(a.tabIndex, E), o = t.useRef(null), C = t.useRef(null), w = t.useRef(null), ie = t.useRef(null), H = t.useRef(null), k = t.useRef(null), G = t.useRef(!1), _ = t.useRef([]), j = t.useRef(null), [P, Ve] = t.useState(), [We, ge] = t.useState(!1), [d, re] = t.useState(!1), [oe, qe] = t.useState(), [ze, Ae] = t.useState([]), [ve, $e] = t.useState(""), s = S !== void 0 ? S : We, le = !!(Array.isArray(m) && m.length), se = Mt({ validationMessage: q, valid: Be, required: me }, le), I = ut(C, a.dir), He = {
+    } = a, $ = st(a.tabIndex, E), o = t.useRef(null), C = t.useRef(null), w = t.useRef(null), ie = t.useRef(null), H = t.useRef(null), k = t.useRef(null), G = t.useRef(!1), _ = t.useRef([]), j = t.useRef(null), [P, Ve] = t.useState(), [We, ge] = t.useState(!1), [d, re] = t.useState(!1), [oe, qe] = t.useState(), [ze, Ae] = t.useState([]), [ve, $e] = t.useState(""), s = S !== void 0 ? S : We, le = !!(Array.isArray(m) && m.length), se = Mt({ validationMessage: q, valid: Be, required: me }, le), I = ct(C, a.dir), He = {
       width: Ct(C, b, R, L),
       ...I !== void 0 ? { direction: I } : {}
-    }, Ge = t.useCallback(() => C.current && C.current.focus(), []), he = dt(), T = !!(oe && he && oe <= he.medium && a.adaptive);
+    }, Ge = t.useCallback(() => C.current && C.current.focus(), []), he = ut(), T = !!(oe && he && oe <= he.medium && a.adaptive);
     _.current = ue === void 0 ? (m || []).map((e) => ({ text: bt(e, a.textField), data: [e] })) : [...ue], t.useImperativeHandle(o, () => ({
       props: a,
       element: C.current,
@@ -87,7 +87,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: Tt
       );
     }, [q, se]);
     t.useEffect(_e), t.useEffect(() => {
-      const e = pt && window.ResizeObserver && new window.ResizeObserver(nt.bind(void 0));
+      const e = dt && window.ResizeObserver && new window.ResizeObserver(nt.bind(void 0));
       return document != null && document.body && e && e.observe(document.body), () => {
         e && e.disconnect();
       };
@@ -425,7 +425,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: Tt
         )
       ),
       /* @__PURE__ */ t.createElement("span", { className: "k-input-inner" }, Q.length === 0 && /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, ne)),
-      a.loading && /* @__PURE__ */ t.createElement(mt, { className: "k-input-loading-icon", name: "loading" }),
+      a.loading && /* @__PURE__ */ t.createElement(ft, { className: "k-input-loading-icon", name: "loading" }),
       le && !E && Q.length > 0 && /* @__PURE__ */ t.createElement(xt, { onClick: Ze }),
       /* @__PURE__ */ t.createElement(
         "select",
@@ -491,7 +491,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: Tt
             dir: I
           }
         ) : /* @__PURE__ */ t.createElement(ke, null, Fe.toLanguageString(ee, Me[ee])),
-        V && /* @__PURE__ */ t.createElement(gt, { message: te })
+        V && /* @__PURE__ */ t.createElement(mt, { message: te })
       )
     ), T && tt());
     return B ? /* @__PURE__ */ t.createElement(

package/common/List.d.ts

@@ -46,6 +46,13 @@ export interface ListProps {
     iconField?: string;
     svgIconField?: string;
     checkboxField?: string;
+    /**
+     * Specifies whether to show the group header for the first group.
+     * By default, the first group header is hidden because there is no previous group to differentiate from.
+     *
+     * @default false
+     */
+    showFirstGroupHeader?: boolean;
 }
 /**
  * @hidden

package/common/List.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";const Y=require("react"),Z=require("./ListItem.js"),w=require("./ListGroupItem.js"),h=require("./utils.js"),ee=require("@progress/kendo-react-intl"),I=require("../messages/index.js"),s=require("@progress/kendo-react-common");function te(e){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const i=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(m,l,i.get?i:{enumerable:!0,get:()=>e[l]})}}return m.default=e,Object.freeze(m)}const a=te(Y),re=e=>{const m=ee.useLocalization(),l=s.useUnstyled(),i=l&&l.uDropDownsBase,{id:N,show:b,wrapperCssClass:j,wrapperStyle:M,listStyle:k,listRef:C,wrapperRef:V,listClassName:R,ariaSetSize:B,actionsField:$,descriptionField:_,iconField:q,svgIconField:L,checkboxField:P}=e,D=(()=>{const{textField:o,valueField:t,groupField:n,isMultiColumn:r,optionsGuid:c,skip:f=0,virtual:g,focusedIndex:x,hasDuplicates:H,highlightSelected:J=!0,value:v,data:z,itemRender:K,groupHeaderItemRender:Q}=e,A=Array.isArray(v);let G=0;return z.map((d,u)=>{const E=f+u,F=f+u+G,W=H?v?x===u:!1:d.disabled?!1:J&&(!A&&h.areSame(d,v,t)||A&&v.findIndex(X=>h.areSame(X,d,t))!==-1);let p,y,S;u>0&&n!==void 0&&(y=h.getItemValue(d,n),S=h.getItemValue(z[u-1],n),y&&S&&y!==S&&(p=y));const O=p!==void 0;return p!==void 0&&(G+=1),[O&&a.createElement(w,{id:`option-${c}-${F}`,virtual:g,key:E+"-group-item",group:p,isMultiColumn:r,render:Q,iconField:q,svgIconField:L,groupItem:d}),a.createElement(Z,{id:`option-${c}-${O?F+1:F}`,virtual:g,dataItem:d,selected:W,focused:x===u,index:E,key:E,onClick:e.onClick,textField:o,group:p,render:K,disabled:d.disabled,actionsField:$,descriptionField:_,iconField:q,svgIconField:L,checkboxField:P})]})})(),T=()=>{const o=e.noDataRender,t=a.createElement("div",{className:s.classNames(s.uDropDownsBase.noData({c:i})),"aria-live":"polite"},a.createElement("div",null,m.toLanguageString(I.nodata,I.messages[I.nodata])));return o?o(t):t},U=()=>{if(!e.groupField)return a.createElement("ul",{id:N,role:"listbox","aria-hidden":b?void 0:!0,"aria-setsize":B,className:R||s.classNames(s.uDropDownsBase.ul({c:i})),ref:C,style:k},D);const o=[];let t=[];return D.forEach(n=>{Array.isArray(n)&&n.forEach(r=>{r&&r.type===w?(t.length>0&&o.push(t),t=[r]):r&&t.push(r)})}),t.length>0&&o.push(t),o.map(n=>{var f;const r=n.find(g=>a.isValidElement(g)&&g.type===w),c=(f=r==null?void 0:r.props)==null?void 0:f.id;return a.createElement("ul",{id:c?void 0:N,key:c||"first-group",role:"group","aria-labelledby":c,className:R||s.classNames(s.uDropDownsBase.ul({c:i})),ref:c?void 0:C,style:k},n)})};return D.length?a.createElement("div",{className:j,style:M,ref:V,role:e.groupField?"listbox":void 0,"aria-hidden":e.groupField&&!b?!0:void 0,"aria-setsize":e.groupField?B:void 0,onMouseDown:e.onMouseDown,onBlur:e.onBlur,onScroll:e.onScroll,unselectable:"on"},U(),e.scroller&&a.createElement("div",{className:s.classNames(s.uDropDownsBase.heightContainer({c:i}))},e.scroller)):T()};module.exports=re;
+"use strict";const Y=require("react"),Z=require("./ListItem.js"),S=require("./ListGroupItem.js"),y=require("./utils.js"),ee=require("@progress/kendo-react-intl"),I=require("../messages/index.js"),a=require("@progress/kendo-react-common");function te(e){const g=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const i=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(g,l,i.get?i:{enumerable:!0,get:()=>e[l]})}}return g.default=e,Object.freeze(g)}const n=te(Y),re=e=>{const g=ee.useLocalization(),l=a.useUnstyled(),i=l&&l.uDropDownsBase,{id:N,show:b,wrapperCssClass:j,wrapperStyle:M,listStyle:k,listRef:C,wrapperRef:V,listClassName:R,ariaSetSize:B,actionsField:$,descriptionField:_,iconField:q,svgIconField:L,checkboxField:P}=e,D=(()=>{const{textField:o,valueField:t,groupField:s,isMultiColumn:r,optionsGuid:c,skip:p=0,virtual:v,focusedIndex:z,hasDuplicates:U,highlightSelected:J=!0,value:h,data:G,itemRender:K,groupHeaderItemRender:Q}=e,x=Array.isArray(h);let A=0;return G.map((d,u)=>{const F=p+u,w=p+u+A,W=U?h?z===u:!1:d.disabled?!1:J&&(!x&&y.areSame(d,h,t)||x&&h.findIndex(X=>y.areSame(X,d,t))!==-1);let f,m,E;s!==void 0&&(m=y.getItemValue(d,s),u===0&&e.showFirstGroupHeader&&m?f=m:u>0&&(E=y.getItemValue(G[u-1],s),m&&E&&m!==E&&(f=m)));const O=f!==void 0;return f!==void 0&&(A+=1),[O&&n.createElement(S,{id:`option-${c}-${w}`,virtual:v,key:F+"-group-item",group:f,isMultiColumn:r,render:Q,iconField:q,svgIconField:L,groupItem:d}),n.createElement(Z,{id:`option-${c}-${O?w+1:w}`,virtual:v,dataItem:d,selected:W,focused:z===u,index:F,key:F,onClick:e.onClick,textField:o,group:f,render:K,disabled:d.disabled,actionsField:$,descriptionField:_,iconField:q,svgIconField:L,checkboxField:P})]})})(),H=()=>{const o=e.noDataRender,t=n.createElement("div",{className:a.classNames(a.uDropDownsBase.noData({c:i})),"aria-live":"polite"},n.createElement("div",null,g.toLanguageString(I.nodata,I.messages[I.nodata])));return o?o(t):t},T=()=>{if(!e.groupField)return n.createElement("ul",{id:N,role:"listbox","aria-hidden":b?void 0:!0,"aria-setsize":B,className:R||a.classNames(a.uDropDownsBase.ul({c:i})),ref:C,style:k},D);const o=[];let t=[];return D.forEach(s=>{Array.isArray(s)&&s.forEach(r=>{r&&r.type===S?(t.length>0&&o.push(t),t=[r]):r&&t.push(r)})}),t.length>0&&o.push(t),o.map(s=>{var p;const r=s.find(v=>n.isValidElement(v)&&v.type===S),c=(p=r==null?void 0:r.props)==null?void 0:p.id;return n.createElement("ul",{id:c?void 0:N,key:c||"first-group",role:"group","aria-labelledby":c,className:R||a.classNames(a.uDropDownsBase.ul({c:i})),ref:c?void 0:C,style:k},s)})};return D.length?n.createElement("div",{className:j,style:M,ref:V,role:e.groupField?"listbox":void 0,"aria-hidden":e.groupField&&!b?!0:void 0,"aria-setsize":e.groupField?B:void 0,onMouseDown:e.onMouseDown,onBlur:e.onBlur,onScroll:e.onScroll,unselectable:"on"},T(),e.scroller&&n.createElement("div",{className:a.classNames(a.uDropDownsBase.heightContainer({c:i}))},e.scroller)):H()};module.exports=re;

package/common/List.mjs

@@ -11,87 +11,87 @@ import D from "./ListGroupItem.mjs";
 import { areSame as $, getItemValue as M } from "./utils.mjs";
 import { useLocalization as te } from "@progress/kendo-react-intl";
 import { nodata as V, messages as re } from "../messages/index.mjs";
-import { useUnstyled as oe, classNames as p, uDropDownsBase as v } from "@progress/kendo-react-common";
+import { useUnstyled as oe, classNames as p, uDropDownsBase as h } from "@progress/kendo-react-common";
 const ue = (e) => {
-  const U = te(), I = oe(), m = I && I.uDropDownsBase, {
+  const H = te(), I = oe(), f = I && I.uDropDownsBase, {
     id: S,
-    show: C,
-    wrapperCssClass: j,
-    wrapperStyle: q,
-    listStyle: w,
+    show: w,
+    wrapperCssClass: U,
+    wrapperStyle: j,
+    listStyle: C,
     listRef: N,
-    wrapperRef: H,
+    wrapperRef: q,
     listClassName: k,
     ariaSetSize: L,
     actionsField: J,
     descriptionField: K,
     iconField: R,
-    svgIconField: b,
+    svgIconField: G,
     checkboxField: O
-  } = e, h = (() => {
+  } = e, v = (() => {
     const {
       textField: i,
       valueField: t,
       groupField: o,
       isMultiColumn: r,
       optionsGuid: a,
-      skip: d = 0,
-      virtual: c,
-      focusedIndex: x,
+      skip: u = 0,
+      virtual: m,
+      focusedIndex: b,
       hasDuplicates: T,
       highlightSelected: W = !0,
-      value: f,
+      value: g,
       data: z,
       itemRender: X,
       groupHeaderItemRender: Y
-    } = e, A = Array.isArray(f);
+    } = e, A = Array.isArray(g);
     let B = 0;
-    return z.map((n, s) => {
-      const y = d + s, E = d + s + B, Z = T ? f ? x === s : !1 : n.disabled ? !1 : W && (!A && $(n, f, t) || A && f.findIndex((_) => $(_, n, t)) !== -1);
-      let u, g, F;
-      s > 0 && o !== void 0 && (g = M(n, o), F = M(z[s - 1], o), g && F && g !== F && (u = g));
-      const G = u !== void 0;
-      return u !== void 0 && (B += 1), [
-        G && /* @__PURE__ */ l.createElement(
+    return z.map((s, n) => {
+      const y = u + n, F = u + n + B, Z = T ? g ? b === n : !1 : s.disabled ? !1 : W && (!A && $(s, g, t) || A && g.findIndex((_) => $(_, s, t)) !== -1);
+      let d, c, E;
+      o !== void 0 && (c = M(s, o), n === 0 && e.showFirstGroupHeader && c ? d = c : n > 0 && (E = M(z[n - 1], o), c && E && c !== E && (d = c)));
+      const x = d !== void 0;
+      return d !== void 0 && (B += 1), [
+        x && /* @__PURE__ */ l.createElement(
           D,
           {
-            id: `option-${a}-${E}`,
-            virtual: c,
+            id: `option-${a}-${F}`,
+            virtual: m,
             key: y + "-group-item",
-            group: u,
+            group: d,
             isMultiColumn: r,
             render: Y,
             iconField: R,
-            svgIconField: b,
-            groupItem: n
+            svgIconField: G,
+            groupItem: s
           }
         ),
         /* @__PURE__ */ l.createElement(
           ee,
           {
-            id: `option-${a}-${G ? E + 1 : E}`,
-            virtual: c,
-            dataItem: n,
+            id: `option-${a}-${x ? F + 1 : F}`,
+            virtual: m,
+            dataItem: s,
             selected: Z,
-            focused: x === s,
+            focused: b === n,
             index: y,
             key: y,
             onClick: e.onClick,
             textField: i,
-            group: u,
+            group: d,
             render: X,
-            disabled: n.disabled,
+            disabled: s.disabled,
             actionsField: J,
             descriptionField: K,
             iconField: R,
-            svgIconField: b,
+            svgIconField: G,
             checkboxField: O
           }
         )
       ];
     });
   })(), P = () => {
-    const i = e.noDataRender, t = /* @__PURE__ */ l.createElement("div", { className: p(v.noData({ c: m })), "aria-live": "polite" }, /* @__PURE__ */ l.createElement("div", null, U.toLanguageString(V, re[V])));
+    const i = e.noDataRender, t = /* @__PURE__ */ l.createElement("div", { className: p(h.noData({ c: f })), "aria-live": "polite" }, /* @__PURE__ */ l.createElement("div", null, H.toLanguageString(V, re[V])));
     return i ? i(t) : t;
   }, Q = () => {
     if (!e.groupField)
@@ -100,25 +100,25 @@ const ue = (e) => {
         {
           id: S,
           role: "listbox",
-          "aria-hidden": C ? void 0 : !0,
+          "aria-hidden": w ? void 0 : !0,
           "aria-setsize": L,
-          className: k || p(v.ul({ c: m })),
+          className: k || p(h.ul({ c: f })),
           ref: N,
-          style: w
+          style: C
         },
-        h
+        v
       );
     const i = [];
     let t = [];
-    return h.forEach((o) => {
+    return v.forEach((o) => {
       Array.isArray(o) && o.forEach((r) => {
         r && r.type === D ? (t.length > 0 && i.push(t), t = [r]) : r && t.push(r);
       });
     }), t.length > 0 && i.push(t), i.map((o) => {
-      var d;
+      var u;
       const r = o.find(
-        (c) => l.isValidElement(c) && c.type === D
-      ), a = (d = r == null ? void 0 : r.props) == null ? void 0 : d.id;
+        (m) => l.isValidElement(m) && m.type === D
+      ), a = (u = r == null ? void 0 : r.props) == null ? void 0 : u.id;
       return /* @__PURE__ */ l.createElement(
         "ul",
         {
@@ -126,22 +126,22 @@ const ue = (e) => {
           key: a || "first-group",
           role: "group",
           "aria-labelledby": a,
-          className: k || p(v.ul({ c: m })),
+          className: k || p(h.ul({ c: f })),
           ref: a ? void 0 : N,
-          style: w
+          style: C
         },
         o
       );
     });
   };
-  return h.length ? /* @__PURE__ */ l.createElement(
+  return v.length ? /* @__PURE__ */ l.createElement(
     "div",
     {
-      className: j,
-      style: q,
-      ref: H,
+      className: U,
+      style: j,
+      ref: q,
       role: e.groupField ? "listbox" : void 0,
-      "aria-hidden": e.groupField && !C ? !0 : void 0,
+      "aria-hidden": e.groupField && !w ? !0 : void 0,
       "aria-setsize": e.groupField ? L : void 0,
       onMouseDown: e.onMouseDown,
       onBlur: e.onBlur,
@@ -149,7 +149,7 @@ const ue = (e) => {
       unselectable: "on"
     },
     Q(),
-    e.scroller && /* @__PURE__ */ l.createElement("div", { className: p(v.heightContainer({ c: m })) }, e.scroller)
+    e.scroller && /* @__PURE__ */ l.createElement("div", { className: p(h.heightContainer({ c: f })) }, e.scroller)
   ) : P();
 };
 export {