@progress/kendo-react-dropdowns 14.0.0-develop.1 → 14.0.0-develop.3

package/MultiColumnComboBox/MultiColumnComboBox.mjs

@@ -6,46 +6,46 @@
  *-------------------------------------------------------------------------------------------
  */
 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 { 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(
+import ue from "prop-types";
+import { MultiColumnList as de } from "../common/MultiColumnList.mjs";
+import { usePropsContext as ce, getScrollbarWidth as pe, getter as T, classNames as x, setScrollbarWidth as me, createPropsContext as fe } from "@progress/kendo-react-common";
+import { ComboBox as ge, ComboBoxWithoutContext as he } from "../ComboBox/ComboBox.mjs";
+import { getItemValue as Ce } from "../common/utils.mjs";
+import L from "../common/withCustomComponent.mjs";
+const be = (s, g) => s ? typeof s == "number" ? s + "px" : s : g, ke = fe(), P = e.forwardRef(
   (s, g) => {
-    const t = de(Ce, s), h = e.useRef(null), i = e.useRef(null), x = ce(), {
-      columns: r = l.columns,
+    const t = ce(ke, s), h = e.useRef(null), i = e.useRef(null), y = pe(), {
+      columns: a = l.columns,
       popupSettings: p = l.popupSettings,
       size: z = l.size,
       rounded: O = l.rounded,
-      fillMode: L = l.fillMode,
-      className: $,
-      prefix: j = void 0,
-      suffix: V = void 0,
-      onOpen: y,
-      onClose: w,
+      fillMode: $ = l.fillMode,
+      className: j,
+      prefix: V = void 0,
+      suffix: A = void 0,
+      onOpen: w,
+      onClose: S,
       onFocus: F,
-      onBlur: S,
-      onChange: H,
+      onBlur: H,
+      onChange: R,
       onFilterChange: E,
       onPageChange: N,
-      ...A
+      ...D
     } = t;
     e.useImperativeHandle(h, () => {
-      var o;
+      var r;
       return {
-        element: ((o = i.current) == null ? void 0 : o.element) || null,
+        element: ((r = i.current) == null ? void 0 : r.element) || null,
         focus() {
           i.current && i.current.focus();
         },
         get value() {
-          var a;
-          return (a = i.current) == null ? void 0 : a.value;
+          var o;
+          return (o = i.current) == null ? void 0 : o.value;
         },
         get name() {
-          var a;
-          return (a = i.current) == null ? void 0 : a.name;
+          var o;
+          return (o = i.current) == null ? void 0 : o.name;
         },
         props: t
       };
@@ -55,106 +55,109 @@ const he = (s, g) => s ? typeof s == "number" ? s + "px" : s : g, Ce = ue(), P =
     );
     const d = e.useMemo(() => {
       if (t.groupField !== void 0 && t.data)
-        return ge(t.data[0], t.groupField);
-    }, [t.data, t.groupField]), [C, m] = e.useState(d), [R, M] = e.useState(!0), [D] = j ? W(t.prefix || e.Fragment) : [], [J] = V ? W(t.suffix || e.Fragment) : [], Q = e.useMemo(() => {
-      const o = /* @__PURE__ */ e.createElement("th", { className: "k-table-th", colSpan: r.length }, C);
-      return /* @__PURE__ */ e.createElement(e.Fragment, null, t.header, /* @__PURE__ */ e.createElement("div", { className: "k-table-header-wrap k-table-scroller" }, /* @__PURE__ */ e.createElement("table", { className: "k-table", role: "presentation" }, /* @__PURE__ */ e.createElement("colgroup", null, r.map((a, c) => /* @__PURE__ */ e.createElement(
+        return Ce(t.data[0], t.groupField);
+    }, [t.data, t.groupField]), [C, m] = e.useState(d), [M, B] = e.useState(!0), b = e.useRef(null), [J] = V ? L(t.prefix || e.Fragment) : [], [Q] = A ? L(t.suffix || e.Fragment) : [], U = e.useMemo(() => {
+      const r = /* @__PURE__ */ e.createElement("th", { className: "k-table-th", colSpan: a.length }, C);
+      return /* @__PURE__ */ e.createElement(e.Fragment, null, t.header, /* @__PURE__ */ e.createElement("div", { ref: b, className: "k-table-header-wrap" }, /* @__PURE__ */ e.createElement("table", { className: "k-table", role: "presentation" }, /* @__PURE__ */ e.createElement("colgroup", null, a.map((o, c) => /* @__PURE__ */ e.createElement(
         "col",
         {
-          key: a.uniqueKey ? a.uniqueKey : c,
-          style: { width: a.width ? a.width : l.width }
+          key: o.uniqueKey ? o.uniqueKey : c,
+          style: { width: o.width ? o.width : l.width }
         }
-      ))), /* @__PURE__ */ e.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ e.createElement("tr", { className: "k-table-row" }, r.map((a, c) => /* @__PURE__ */ e.createElement("th", { className: "k-table-th", key: a.uniqueKey ? a.uniqueKey : c }, a.header || " "))), C && R && /* @__PURE__ */ e.createElement("tr", { className: "k-table-group-row" }, t.groupStickyHeaderItemRender ? t.groupStickyHeaderItemRender.call(void 0, o, {}) : o)))));
-    }, [t.header, r, C, R]), U = e.useMemo(
+      ))), /* @__PURE__ */ e.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ e.createElement("tr", { className: "k-table-row" }, a.map((o, c) => /* @__PURE__ */ e.createElement("th", { className: "k-table-th", key: o.uniqueKey ? o.uniqueKey : c }, o.header || " "))), C && M && /* @__PURE__ */ e.createElement("tr", { className: "k-table-group-row" }, t.groupStickyHeaderItemRender ? t.groupStickyHeaderItemRender.call(void 0, r, {}) : r)))));
+    }, [t.header, a, C, M]), X = e.useMemo(
       () => (
         // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
-        `calc(${r.map((o) => he(o.width, l.width)).filter(Boolean).join(" + ")} + ${x}px + 4px)`
+        `calc(${a.map((r) => be(r.width, l.width)).filter(Boolean).join(" + ")} + ${y}px + 4px)`
       ),
-      [r, x]
-    ), B = t.virtual ? t.virtual.skip : 0, X = e.useCallback(
-      (o, a) => {
-        const c = r.map((u, le) => /* @__PURE__ */ e.createElement(
+      [a, y]
+    ), q = t.virtual ? t.virtual.skip : 0, Y = e.useCallback(
+      (r, o) => {
+        const c = a.map((u, ie) => /* @__PURE__ */ e.createElement(
           "span",
           {
             className: t.itemRender ? void 0 : "k-table-td",
             style: t.itemRender ? void 0 : { width: u.width ? u.width : l.width },
-            key: u.uniqueKey ? u.uniqueKey : le
+            key: u.uniqueKey ? u.uniqueKey : ie
           },
-          u.field ? String(T(u.field)(a.dataItem)) : ""
+          u.field ? String(T(u.field)(o.dataItem)) : ""
         ));
-        let q, f, b, k, I = t.data || [];
-        const K = a.index - B;
-        t.groupField !== void 0 && (k = T(t.groupField), f = k(I[K]), b = k(I[K - 1]), f && b && f !== b && (q = f));
+        let I, f, k, v, K = t.data || [];
+        const W = o.index - q;
+        t.groupField !== void 0 && (v = T(t.groupField), f = v(K[W]), k = v(K[W - 1]), f && k && f !== k && (I = f));
         const G = e.cloneElement(
-          o,
+          r,
           {
-            ...o.props,
-            className: v("k-table-row", {
-              "k-table-alt-row": a.index % 2 !== 0,
-              "k-focus": a.focused,
-              "k-selected": a.selected,
-              "k-first": !!q,
-              "k-disabled": a.dataItem.disabled
+            ...r.props,
+            className: x("k-table-row", {
+              "k-table-alt-row": o.index % 2 !== 0,
+              "k-focus": o.focused,
+              "k-selected": o.selected,
+              "k-first": !!I,
+              "k-disabled": o.dataItem.disabled
             })
           },
           c
         );
-        return t.itemRender ? t.itemRender.call(void 0, G, a) : G;
+        return t.itemRender ? t.itemRender.call(void 0, G, o) : G;
       },
-      [r, t.groupField, t.itemRender, t.data, B]
-    ), n = e.useCallback((o, a) => {
-      o && o.call(void 0, {
-        ...a,
+      [a, t.groupField, t.itemRender, t.data, q]
+    ), n = e.useCallback((r, o) => {
+      r && r.call(void 0, {
+        ...o,
         target: h.current
       });
-    }, []), Y = e.useCallback(
-      (o) => (t.virtual || m(d), n(y, o)),
-      [n, y, t.virtual, d]
-    ), Z = e.useCallback((o) => n(w, o), [w]), _ = e.useCallback((o) => n(F, o), [F]), ee = e.useCallback((o) => n(S, o), [S]), te = e.useCallback((o) => n(H, o), [H]), oe = e.useCallback((o) => n(N, o), [N]), ae = e.useCallback(
-      (o) => (m(d), n(E, {
-        ...o,
-        mobileMode: o.target.mobileMode
+    }, []), Z = e.useCallback(
+      (r) => (t.virtual || m(d), n(w, r)),
+      [n, w, t.virtual, d]
+    ), _ = e.useCallback((r) => n(S, r), [S]), ee = e.useCallback((r) => n(F, r), [F]), te = e.useCallback((r) => n(H, r), [H]), re = e.useCallback((r) => n(R, r), [R]), oe = e.useCallback((r) => n(N, r), [N]), ae = e.useCallback(
+      (r) => (m(d), n(E, {
+        ...r,
+        mobileMode: r.target.mobileMode
       })),
       [E]
-    ), re = e.useCallback((o) => {
-      m(o.group);
+    ), ne = e.useCallback((r) => {
+      m(r.group);
+    }, []), le = e.useCallback((r) => {
+      b.current && (b.current.scrollLeft = r.target.scrollLeft);
     }, []);
     e.useEffect(() => {
-      pe();
+      me();
     }), e.useEffect(() => {
-      const o = t.data;
-      m(d), o && o.length !== 0 ? M(!0) : M(!1);
+      const r = t.data;
+      m(d), r && r.length !== 0 ? B(!0) : B(!1);
     }, [t.data]);
-    const ne = e.useCallback((o) => /* @__PURE__ */ e.createElement(ie, { ...o }), []);
+    const se = e.useCallback((r) => /* @__PURE__ */ e.createElement(de, { ...r }), []);
     return /* @__PURE__ */ e.createElement(
-      me,
+      ge,
       {
-        ...A,
-        list: ne,
+        ...D,
+        list: se,
         popupSettings: {
           ...p,
-          popupClass: v("k-dropdowngrid-popup", p.popupClass),
-          width: p.width || U,
+          popupClass: x("k-dropdowngrid-popup", p.popupClass),
+          width: p.width || X,
           className: p.className
         },
         ref: i,
-        header: Q,
-        itemRender: X,
+        header: U,
+        itemRender: Y,
         groupHeaderItemRender: t.groupHeaderItemRender,
         size: z,
         rounded: O,
-        fillMode: L,
+        fillMode: $,
         groupField: t.groupField,
         isMultiColumn: !0,
-        onOpen: Y,
-        onClose: Z,
-        onFocus: _,
-        onBlur: ee,
-        onChange: te,
+        onOpen: Z,
+        onClose: _,
+        onFocus: ee,
+        onBlur: te,
+        onChange: re,
         onFilterChange: ae,
         onPageChange: oe,
-        onGroupScroll: re,
-        className: v("k-dropdowngrid", $),
+        onGroupScroll: ne,
+        onListScroll: le,
+        className: x("k-dropdowngrid", j),
         required: t.required,
         adaptive: t.adaptive,
         adaptiveFilter: t.adaptiveFilter,
@@ -162,14 +165,14 @@ const he = (s, g) => s ? typeof s == "number" ? s + "px" : s : g, Ce = ue(), P =
         adaptiveSubtitle: t.adaptiveSubtitle,
         footer: t.footer,
         footerClassName: "k-table-footer",
-        prefix: D,
-        suffix: J
+        prefix: J,
+        suffix: Q
       }
     );
   }
-), be = {
-  ...fe.propTypes,
-  columns: se.any.isRequired
+), ve = {
+  ...he.propTypes,
+  columns: ue.any.isRequired
 }, l = {
   columns: [],
   popupSettings: {},
@@ -179,8 +182,8 @@ const he = (s, g) => s ? typeof s == "number" ? s + "px" : s : g, Ce = ue(), P =
   fillMode: void 0
 };
 P.displayName = "KendoMultiColumnComboBox";
-P.propTypes = be;
+P.propTypes = ve;
 export {
   P as MultiColumnComboBox,
-  Ce as MultiColumnComboBoxPropsContext
+  ke as MultiColumnComboBoxPropsContext
 };

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 {