@progress/kendo-react-grid 9.4.0-develop.7 → 9.4.0-develop.9

package/GridComponent.mjs

@@ -6,78 +6,79 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as l from "react";
-import { validatePackage as dt, uGrid as ct, getter as N, classNames as m, canUseDOM as st } from "@progress/kendo-react-common";
-import { process as mt } from "@progress/kendo-data-query";
-import { getDetailExpandableOptions as ut, getGroupExpandableOptions as ft, getSelectionOptions as gt, tableKeyboardNavigationTools as q, Pager as bt, tableKeyboardNavigationBodyAttributes as yt, tableKeyboardNavigationScopeAttributes as ke, tableColumnsVirtualization as Ct } from "@progress/kendo-react-data-tools";
-import { GridSelectionCell as ht } from "./cells/GridSelectionCell.mjs";
-import { GridHierarchyCell as wt } from "./cells/GridHierarchyCell.mjs";
-import { GridEditCell as Et } from "./cells/GridEditCell.mjs";
-import { Header as It } from "./header/Header.mjs";
-import { HeaderRow as Rt } from "./header/HeaderRow.mjs";
-import { FilterRow as xt } from "./header/FilterRow.mjs";
-import { GroupPanel as vt } from "./header/GroupPanel.mjs";
-import { Footer as St } from "./footer/Footer.mjs";
-import { getColumnWidth as p, isSorted as Ne, flatData as Gt, autoGenerateColumns as kt, mapColumns as Nt, clientColumn as Ft, getNestedValue as Fe, getColSpan as De, resolveCells as Dt, isClientReference as Tt, sanitizeColumns as Kt, readColumns as Ht } from "./utils/index.mjs";
-import { GridCell as At } from "./cells/GridCell.mjs";
+import { validatePackage as ct, uGrid as st, getter as N, classNames as m, canUseDOM as mt } from "@progress/kendo-react-common";
+import { process as ut } from "@progress/kendo-data-query";
+import { getDetailExpandableOptions as ft, getGroupExpandableOptions as gt, getSelectionOptions as bt, tableKeyboardNavigationTools as q, Pager as yt, tableKeyboardNavigationBodyAttributes as ht, tableKeyboardNavigationScopeAttributes as ke, tableColumnsVirtualization as Ct } from "@progress/kendo-react-data-tools";
+import { GridSelectionCell as wt } from "./cells/GridSelectionCell.mjs";
+import { GridHierarchyCell as Et } from "./cells/GridHierarchyCell.mjs";
+import { GridEditCell as It } from "./cells/GridEditCell.mjs";
+import { Header as Rt } from "./header/Header.mjs";
+import { HeaderRow as xt } from "./header/HeaderRow.mjs";
+import { FilterRow as vt } from "./header/FilterRow.mjs";
+import { GroupPanel as St } from "./header/GroupPanel.mjs";
+import { Footer as Gt } from "./footer/Footer.mjs";
+import { getColumnWidth as p, isSorted as Ne, flatData as kt, autoGenerateColumns as Nt, mapColumns as Ft, clientColumn as Dt, getNestedValue as Fe, getColSpan as De, resolveCells as Tt, isClientReference as Kt, sanitizeColumns as Ht, readColumns as At } from "./utils/index.mjs";
+import { GridCell as Pt } from "./cells/GridCell.mjs";
 import { GridGroupCell as Te } from "./cells/GridGroupCell.mjs";
-import { GridRow as Pt } from "./rows/GridRow.mjs";
-import { GridHeaderSelectionCell as Bt } from "./header/GridHeaderSelectionCell.mjs";
+import { GridRow as Bt } from "./rows/GridRow.mjs";
+import { GridHeaderSelectionCell as Vt } from "./header/GridHeaderSelectionCell.mjs";
 import { GridNoRecords as Ke } from "./components/noRecords/GridNoRecords.mjs";
 import { operators as He } from "./filterCommon.mjs";
-import { FooterRow as Vt } from "./footer/FooterRow.mjs";
+import { FooterRow as Lt } from "./footer/FooterRow.mjs";
 import { normalize as zt } from "./paging/GridPagerSettings.mjs";
 import { packageMetadata as Ot } from "./package-metadata.mjs";
 import { GridDetailCell as _t } from "./cells/GridDetailCell.mjs";
-import { GridDetailHierarchyCell as Lt } from "./cells/GridDetailHierarchyCell.mjs";
+import { GridDetailHierarchyCell as Mt } from "./cells/GridDetailHierarchyCell.mjs";
 import { GridNoRecordsContainer as Ae } from "./components/noRecords/GridNoRecordsContainer.mjs";
-import { GridWatermarkOverlay as Mt } from "./GridWatermarkOverlay.mjs";
+import { GridWatermarkOverlay as Wt } from "./GridWatermarkOverlay.mjs";
 import { GridClientWrapper as Pe } from "./GridClientWrapper.mjs";
-import { GridColGroup as Wt } from "./components/colGroup/GridColGroup.mjs";
-import { GridTable as jt } from "./components/table/GridTable.mjs";
+import { GridColGroup as jt } from "./components/colGroup/GridColGroup.mjs";
+import { GridTable as $t } from "./components/table/GridTable.mjs";
 import { GridDropClue as Be } from "./components/GridDropClue.mjs";
 import { GridDragClue as Ve } from "./components/GridDragClue.mjs";
-import { GridTableBody as ze } from "./components/table/GridTableBody.mjs";
-import { PagerContainer as $t } from "./components/PagerContainer.mjs";
-import { GridTableScrollable as Ut } from "./components/table/GridTableScrollable.mjs";
-import { GridElementContainer as Oe } from "./components/GridElementContainer.mjs";
-import { GridContainerElementContainer as Jt } from "./components/GridContainerElementContainer.mjs";
-import { VirtualScrollHeightContainer as Qt } from "./components/VirtualScrollHeightContainer.mjs";
-import { LocalizationService as Xt, IntlService as Yt } from "@progress/kendo-react-intl";
-import { gridAriaLabel as _e, messages as Zt } from "./messages/index.mjs";
+import { GridTableBody as Le } from "./components/table/GridTableBody.mjs";
+import { PagerContainer as Ut } from "./components/PagerContainer.mjs";
+import { GridTableScrollable as Jt } from "./components/table/GridTableScrollable.mjs";
+import { GridElementContainer as ze } from "./components/GridElementContainer.mjs";
+import { GridContainerElementContainer as Qt } from "./components/GridContainerElementContainer.mjs";
+import { VirtualScrollHeightContainer as Xt } from "./components/VirtualScrollHeightContainer.mjs";
+import { LocalizationService as Yt, IntlService as Zt } from "@progress/kendo-react-intl";
+import { gridAriaLabel as Oe, messages as qt } from "./messages/index.mjs";
 import { VirtualScrollFixed as j } from "./VirtualScrollFixed.mjs";
-import { VirtualScroll as qt } from "./VirtualScroll.mjs";
-import { GridCustomCellClientContainer as pt } from "./components/GridCustomCellClientContainer.mjs";
-import { GridReorderableRowsContainer as el } from "./components/GridDraggableRowsContainer.mjs";
-import { GridRowReorderCell as tl } from "./cells/GridRowReorderCell.mjs";
-import { GridHeaderRowReorderCell as ll } from "./header/client/GridHeaderRowReorderCell.mjs";
-const al = l.forwardRef((e, ee) => {
+import { VirtualScroll as pt } from "./VirtualScroll.mjs";
+import { GridCustomCellClientContainer as el } from "./components/GridCustomCellClientContainer.mjs";
+import { GridReorderableRowsContainer as tl } from "./components/GridDraggableRowsContainer.mjs";
+import { GridRowReorderCell as ll } from "./cells/GridRowReorderCell.mjs";
+import { GridHeaderRowReorderCell as al } from "./header/client/GridHeaderRowReorderCell.mjs";
+import { GridLoader as _e } from "./components/GridLoader.mjs";
+const rl = l.forwardRef((e, ee) => {
   var we, Ee, Ie, Re, xe, ve, Se;
   const R = e.id + "-role-element-id", x = e.navigatable ? R : "";
-  dt(Ot);
-  const Le = (t, r, o, d, i, a, c) => {
-    const f = [], g = Gt(
+  ct(Ot);
+  const Me = (t, r, o, d, i, a, c) => {
+    const f = [], g = kt(
       f,
-      h,
+      C,
       t,
       { index: r },
       o !== void 0,
       d,
       i,
       a,
-      Ze.defaultExpand,
+      qe.defaultExpand,
       c
     );
     return { flattedData: f, resolvedGroupsCount: g };
-  }, Me = (t) => {
+  }, We = (t) => {
     const r = t.filter(
       (i) => i && i.type && i.type.displayName === "KendoReactGridColumn"
-    ), o = u.current.filter((i) => i.declarationIndex >= 0 && i.parentIndex === -1), d = Kt(o);
-    return Ht(r, d, { prevId: 0, idPrefix: x });
-  }, We = (t) => t.filter((r) => st && r && r.media ? window.matchMedia(r.media).matches : r), je = (t, r) => {
+    ), o = u.current.filter((i) => i.declarationIndex >= 0 && i.parentIndex === -1), d = Ht(o);
+    return At(r, d, { prevId: 0, idPrefix: x });
+  }, je = (t) => t.filter((r) => mt && r && r.media ? window.matchMedia(r.media).matches : r), $e = (t, r) => {
     var i;
-    const o = Me(t), d = We(o);
-    u.current = d, u.current.length === 0 && (u.current = kt(
-      h,
+    const o = We(t), d = je(o);
+    u.current = d, u.current.length === 0 && (u.current = Nt(
+      C,
       e.group,
       {
         column: (i = T.column) != null ? i : e.expandField
@@ -86,13 +87,13 @@ const al = l.forwardRef((e, ee) => {
         prevId: 0,
         idPrefix: x
       }
-    )), $e(u.current, r), v = Nt(u.current, !0), le.current = u.current.map(Ft);
-  }, $e = (t, r) => {
+    )), Ue(u.current, r), v = Ft(u.current, !0), le.current = u.current.map(Dt);
+  }, Ue = (t, r) => {
     var i;
     t.filter((a) => e.selectedField && a.field === e.selectedField || a.columnType === "checkbox").forEach((a) => {
-      a.width = a.width || "50px", a.cell = a.cell || ht, a._type = "edit", a.headerCell = a.headerCell || Bt;
+      a.width = a.width || "50px", a.cell = a.cell || wt, a._type = "edit", a.headerCell = a.headerCell || Vt;
     }), G !== void 0 && t.filter((a) => a.columnType === "reorder").forEach((a) => {
-      a.width = a.width || "50px", a.cell = a.cell || tl, a.headerCell = a.headerCell || ll, a.sortable = !1, a.filterable = !1, a.editable = !1;
+      a.width = a.width || "50px", a.cell = a.cell || ll, a.headerCell = a.headerCell || al, a.sortable = !1, a.filterable = !1, a.editable = !1;
     });
     const o = {
       id: "",
@@ -118,7 +119,7 @@ const al = l.forwardRef((e, ee) => {
     (e.expandField || T.enabled) && e.detail && (t.unshift({
       ...o,
       _type: "expand",
-      cell: wt,
+      cell: Et,
       field: (i = T.column) != null ? i : e.expandField,
       headerClassName: m(s.hierarchyCell({}))
     }), d++);
@@ -131,10 +132,10 @@ const al = l.forwardRef((e, ee) => {
         locked: e.lockGroups
       }), d++;
     t.slice(d).forEach((a) => a.parentIndex >= 0 && (a.parentIndex += d));
-  }, te = () => h.length === e.total, Ue = () => {
+  }, te = () => C.length === e.total, Je = () => {
     const { rowHeight: t, detailRowHeight: r, detail: o, expandField: d } = e, i = te(), a = t !== void 0 && t > 0, c = r !== void 0 && r > 0;
-    return !a || D && !i || !!(o && d) && (!c || !i) ? qt : j;
-  }, $ = () => e.isClient ? u : le, Je = (t, r, o, d, i, a) => {
+    return !a || D && !i || !!(o && d) && (!c || !i) ? pt : j;
+  }, $ = () => e.isClient ? u : le, Qe = (t, r, o, d, i, a) => {
     let c = De(t, r);
     if (e.columnVirtualization && t.colSpan === 1)
       return { colSpan: a, colsToSkip: i };
@@ -144,15 +145,15 @@ const al = l.forwardRef((e, ee) => {
   let U, b = [], V;
   const u = e.columnsRef || { current: [] }, le = { current: [] };
   let v = [[]];
-  const Qe = e.scrollLeftRef || { current: 0 }, z = e.localization || new Xt(), Xe = e.intl || new Yt("en"), S = e.unstyled, s = S && S.uGrid ? S.uGrid : ct, G = typeof e.rowReorderable == "object" ? e.rowReorderable.enabled : e.rowReorderable, F = e.autoProcessData === !0 ? {
+  const Xe = e.scrollLeftRef || { current: 0 }, L = e.localization || new Yt(), Ye = e.intl || new Zt("en"), S = e.unstyled, s = S && S.uGrid ? S.uGrid : st, G = typeof e.rowReorderable == "object" ? e.rowReorderable.enabled : e.rowReorderable, F = e.autoProcessData === !0 ? {
     group: !0,
     sort: !0,
     filter: !0,
     page: !0
   } : e.autoProcessData;
-  let h, I;
-  if (Array.isArray(e.data) ? (h = e.data, I = (we = e.total) != null ? we : h.length) : (h = ((Ee = e.data) == null ? void 0 : Ee.data) || [], I = (xe = (Re = e.total) != null ? Re : (Ie = e.data) == null ? void 0 : Ie.total) != null ? xe : h.length), F) {
-    const { data: t, total: r } = mt(h, {
+  let C, I;
+  if (Array.isArray(e.data) ? (C = e.data, I = (we = e.total) != null ? we : C.length) : (C = ((Ee = e.data) == null ? void 0 : Ee.data) || [], I = (xe = (Re = e.total) != null ? Re : (Ie = e.data) == null ? void 0 : Ie.total) != null ? xe : C.length), F) {
+    const { data: t, total: r } = ut(C, {
       group: F.group ? e.group : void 0,
       sort: F.sort ? e.sort : void 0,
       filter: F.filter ? e.filter : void 0,
@@ -161,12 +162,12 @@ const al = l.forwardRef((e, ee) => {
         skip: e.skip
       } : {}
     });
-    h = t, I = (ve = e.total) != null ? ve : r;
+    C = t, I = (ve = e.total) != null ? ve : r;
   }
-  const { size: w = "medium" } = e, Ye = typeof e.groupable == "object" && e.groupable.footer || "none", k = e.scrollable === "virtual", D = e.groupable === !0 || typeof e.groupable == "object" && e.groupable.enabled !== !1, T = ut(!!e.detail), Ze = ft(
+  const { size: w = "medium" } = e, Ze = typeof e.groupable == "object" && e.groupable.footer || "none", k = e.scrollable === "virtual", D = e.groupable === !0 || typeof e.groupable == "object" && e.groupable.enabled !== !1, T = ft(!!e.detail), qe = gt(
     typeof e.groupable == "object" && e.groupable.enabled !== !1 ? e.groupable.expandable : e.groupable
-  ), { resolvedGroupsCount: qe, flattedData: pe } = Le(
-    Ye,
+  ), { resolvedGroupsCount: pe, flattedData: et } = Me(
+    Ze,
     e.skip || 0,
     e.group,
     e.expandField,
@@ -174,24 +175,24 @@ const al = l.forwardRef((e, ee) => {
     e.groupExpand,
     e.dataItemKey
   );
-  b = pe;
-  const J = Ue();
+  b = et;
+  const J = Je();
   J === j && te() && (V = b.slice(
     e.skip || 0,
     (e.skip || 0) + ((e.take !== void 0 ? e.take : e.pageSize) || 0)
   ));
-  const ae = gt(e.selectable || !!e.selectedField), et = ae && ae.drag ? "none" : void 0, O = l.Children.toArray(e.children);
-  je(O, qe);
-  const re = O.map((t) => t && t.type && t.type.displayName === "KendoReactGridToolbar" ? l.cloneElement(t, { ...t.props, ariaControls: R }) : null), _ = O.filter((t) => t && t.type && t.type.displayName === "KendoReactGridNoRecords"), ne = O.filter(
+  const ae = bt(e.selectable || !!e.selectedField), tt = ae && ae.drag ? "none" : void 0, z = l.Children.toArray(e.children);
+  $e(z, pe);
+  const re = z.map((t) => t && t.type && t.type.displayName === "KendoReactGridToolbar" ? l.cloneElement(t, { ...t.props, ariaControls: R }) : null), O = z.filter((t) => t && t.type && t.type.displayName === "KendoReactGridNoRecords"), ne = z.filter(
     (t) => t && t.type && t.type.displayName === "KendoReactGridStatusBar"
-  ), y = u.current.filter((t) => t.children.length === 0), ie = D && /* @__PURE__ */ l.createElement(vt, { columns: $().current, group: e.group || [], ariaControls: R }), oe = /* @__PURE__ */ l.createElement(
-    It,
+  ), y = u.current.filter((t) => t.children.length === 0), ie = D && /* @__PURE__ */ l.createElement(St, { columns: $().current, group: e.group || [], ariaControls: R }), oe = /* @__PURE__ */ l.createElement(
+    Rt,
     {
       size: w,
       staticHeaders: e.scrollable !== "none",
       draggable: e.reorderable || D,
       headerRow: /* @__PURE__ */ l.createElement(
-        Rt,
+        xt,
         {
           cells: e.cells,
           sort: e.sort,
@@ -207,7 +208,7 @@ const al = l.forwardRef((e, ee) => {
           columnsMap: v,
           cellRender: e.headerCellRender,
           navigatable: !!e.navigatable,
-          localization: z,
+          localization: L,
           unstyled: S,
           headerSelectionValue: !!(e.select && b.filter((t) => t.rowType === "data").every(
             (t) => e.select && e.dataItemKey && N(e.dataItemKey)(t.dataItem) !== void 0 ? e.select[N(e.dataItemKey)(t.dataItem)] : void 0
@@ -215,7 +216,7 @@ const al = l.forwardRef((e, ee) => {
         }
       ),
       filterRow: e.filterable && /* @__PURE__ */ l.createElement(
-        xt,
+        vt,
         {
           cells: e.cells,
           size: w,
@@ -226,50 +227,50 @@ const al = l.forwardRef((e, ee) => {
           cellRender: e.filterCellRender,
           navigatable: !!e.navigatable,
           ariaRowIndex: v.length + 1,
-          localization: z
+          localization: L
         }
       ) || void 0,
       cols: y.map((t, r) => /* @__PURE__ */ l.createElement("col", { key: r.toString(), width: p(t) }))
     }
-  ), tt = Qe.current || 0, lt = parseFloat(((e.style || {}).width || "").toString()), at = (t, r, o, d) => {
+  ), lt = Xe.current || 0, at = parseFloat(((e.style || {}).width || "").toString()), rt = (t, r, o, d) => {
     let i = !1;
     const a = e.selectedField ? Fe(e.selectedField, t.dataItem) : e.select && e.dataItemKey && N(e.dataItemKey)(t.dataItem) !== void 0 ? e.select[N(e.dataItemKey)(t.dataItem)] : void 0;
     let c = 0;
     const { colSpans: f, hiddenColumns: g } = Ct({
       enabled: e.columnVirtualization,
       columns: y,
-      tableViewPortWidth: lt,
-      scrollLeft: tt,
+      tableViewPortWidth: at,
+      scrollLeft: lt,
       getColSpan: De,
       dataItem: t.dataItem
-    }), E = y.filter((n, C) => !g[C]);
+    }), E = y.filter((n, h) => !g[h]);
     return {
-      row: y.map((n, C) => {
-        if (g[C])
+      row: y.map((n, h) => {
+        if (g[h])
           return null;
         if (c > 0)
           return c--, null;
-        const { colSpan: H, colsToSkip: A } = Je(
+        const { colSpan: H, colsToSkip: A } = Qe(
           n,
           t.dataItem,
           E,
-          C,
+          h,
           c,
-          f[C]
+          f[h]
         );
         c = A;
-        const M = n.id ? n.id : C, W = m(s.contentSticky({ locked: n.locked }), n.className), it = n.left !== void 0 ? { left: n.left, right: n.right } : {};
+        const M = n.id ? n.id : h, W = m(s.contentSticky({ locked: n.locked }), n.className), ot = n.left !== void 0 ? { left: n.left, right: n.right } : {};
         let Ge = !1;
         if (n.editable && (e.editable || e.editField)) {
           const B = e.editField ? Fe(e.editField, t.dataItem) : e.edit && e.dataItemKey ? e.edit[N(e.dataItemKey)(t.dataItem)] : void 0, Z = typeof B == "boolean" ? B : Array.isArray(B) ? B.indexOf(n.field) > -1 : n.field !== void 0 && B === n.field;
           Z && n.columnType === "data" && (Z === !0 || Z === n.field) && (i = !0, Ge = !0);
         }
-        const Y = n.cell || Ge && Et || At, ot = e.expandField && e.detail && n.field === e.expandField || n._type === "expand", P = {
+        const Y = n.cell || Ge && It || Pt, dt = e.expandField && e.detail && n.field === e.expandField || n._type === "expand", P = {
           locked: e.lockGroups,
           id: q.generateNavigatableId(
-            `${r}-${String(C)}`,
+            `${r}-${String(h)}`,
             x,
-            ot || t.rowType === "groupHeader" || t.rowType === "groupFooter" || n.field === "value" ? "nodata" : "cell"
+            dt || t.rowType === "groupHeader" || t.rowType === "groupFooter" || n.field === "value" ? "nodata" : "cell"
           ),
           colSpan: H,
           dataItem: t.dataItem,
@@ -280,31 +281,31 @@ const al = l.forwardRef((e, ee) => {
           rowReorderable: G,
           className: W,
           render: e.cellRender,
-          cells: Dt(e.cells, n.cells),
-          columnIndex: C,
+          cells: Tt(e.cells, n.cells),
+          columnIndex: h,
           columnsCount: y.length,
           rowType: t.rowType,
           level: t.level,
           expanded: t.expanded,
           dataIndex: t.dataIndex,
           rowDataIndex: o,
-          columnPosition: it,
+          columnPosition: ot,
           style: {},
           ariaColumnIndex: n.ariaColumnIndex,
-          isSelected: (n == null ? void 0 : n._type) === "edit" ? a : Array.isArray(a) && a.indexOf(C) > -1,
+          isSelected: (n == null ? void 0 : n._type) === "edit" ? a : Array.isArray(a) && a.indexOf(h) > -1,
           isSorted: !!Ne(n.field, e.sort),
           isInEdit: i,
           isAlt: d,
           unstyled: S,
           group: t.group,
-          localization: z,
-          intl: Xe
+          localization: L,
+          intl: Ye
         };
         return n.cell ? /* @__PURE__ */ l.createElement(
-          pt,
+          el,
           {
             key: M,
-            isClient: Tt(Y),
+            isClient: Kt(Y),
             dataItem: P.dataItem,
             rowDataIndex: P.rowDataIndex,
             columnIndex: P.columnIndex
@@ -333,10 +334,10 @@ const al = l.forwardRef((e, ee) => {
     let t = -1, r = 0;
     (V || b).forEach((o, d) => {
       o.rowType === "data" && (se++, t++);
-      const i = se % 2 === 0, a = e.dataItemKey && N(e.dataItemKey)(o.dataItem), c = d + (e.skip || 0), f = a || "ai" + c, g = f + "_1", E = at(o, f, t, i);
+      const i = se % 2 === 0, a = e.dataItemKey && N(e.dataItemKey)(o.dataItem), c = d + (e.skip || 0), f = a || "ai" + c, g = f + "_1", E = rt(o, f, t, i);
       if (K = c + ue + r, Q.push(
         /* @__PURE__ */ l.createElement(
-          Pt,
+          Bt,
           {
             key: f,
             dataItem: o.dataItem,
@@ -372,7 +373,7 @@ const al = l.forwardRef((e, ee) => {
               role: "row",
               "aria-rowindex": K
             },
-            e.group && e.group.map((C, H) => {
+            e.group && e.group.map((h, H) => {
               var W;
               const A = (W = E == null ? void 0 : E.row[H]) == null ? void 0 : W.props.style, M = A ? { left: A.left, right: A.right } : {};
               return /* @__PURE__ */ l.createElement(
@@ -380,7 +381,7 @@ const al = l.forwardRef((e, ee) => {
                 {
                   id: "",
                   dataIndex: o.dataIndex,
-                  field: C.field,
+                  field: h.field,
                   dataItem: o.dataItem,
                   key: H,
                   columnPosition: M,
@@ -394,7 +395,7 @@ const al = l.forwardRef((e, ee) => {
               );
             }),
             (e.expandField || T.enabled) && /* @__PURE__ */ l.createElement(
-              Lt,
+              Mt,
               {
                 unstyled: S,
                 id: q.generateNavigatableId(`${g}-dhcell`, x)
@@ -422,16 +423,16 @@ const al = l.forwardRef((e, ee) => {
     skip: e.skip || 0,
     take: (e.take !== void 0 ? e.take : e.pageSize) || 10,
     ...zt(e.pageable || {})
-  }, ge = /* @__PURE__ */ l.createElement($t, null, e.pager ? /* @__PURE__ */ l.createElement(e.pager, { ...fe }) : /* @__PURE__ */ l.createElement(bt, { className: m(s.pager({})), ...fe })), rt = (t, r) => /* @__PURE__ */ l.createElement("col", { key: r.toString(), width: p(t) }), nt = (Se = e.cells) != null && Se.footerCell || u.current.some((t) => {
+  }, ge = /* @__PURE__ */ l.createElement(Ut, null, e.pager ? /* @__PURE__ */ l.createElement(e.pager, { ...fe }) : /* @__PURE__ */ l.createElement(yt, { className: m(s.pager({})), ...fe })), nt = (t, r) => /* @__PURE__ */ l.createElement("col", { key: r.toString(), width: p(t) }), it = (Se = e.cells) != null && Se.footerCell || u.current.some((t) => {
     var r;
     return !!(t.footerCell || (r = t.cells) != null && r.footerCell);
   }) ? /* @__PURE__ */ l.createElement(
-    St,
+    Gt,
     {
       size: w,
       staticHeaders: e.scrollable !== "none",
       row: /* @__PURE__ */ l.createElement(
-        Vt,
+        Lt,
         {
           cells: e.cells,
           idPrefix: x,
@@ -439,39 +440,39 @@ const al = l.forwardRef((e, ee) => {
           ariaRowIndex: K + 1
         }
       ),
-      cols: y.map(rt)
+      cols: y.map(nt)
     }
-  ) : null, be = /* @__PURE__ */ l.createElement(Wt, null, y.map((t, r) => /* @__PURE__ */ l.createElement(
+  ) : null, be = /* @__PURE__ */ l.createElement(jt, null, y.map((t, r) => /* @__PURE__ */ l.createElement(
     "col",
     {
       key: r.toString(),
       className: Ne(t.field, e.sort) ? m(s.sorted({})) : void 0,
       width: p(t)
     }
-  ))), ye = e.reorderable || D, { detail: rl, cells: nl, ...Ce } = e, he = /* @__PURE__ */ l.createElement(
+  ))), ye = e.reorderable || D, { detail: nl, cells: il, ...he } = e, Ce = /* @__PURE__ */ l.createElement(
     "tbody",
     {
       role: "rowgroup",
       className: m(s.tbody({})),
-      ...yt
+      ...ht
     },
     Q
   );
-  let X = he;
+  let X = Ce;
   if (G && (X = /* @__PURE__ */ l.createElement(
-    el,
+    tl,
     {
       unstyled: s,
       columns: u.current,
       rowReorderSettings: e.rowReorderable
     },
-    he
+    Ce
   )), e.scrollable === "none")
     return /* @__PURE__ */ l.createElement(
       Pe,
       {
         gridRef: ee,
-        gridProps: Ce,
+        gridProps: he,
         columnsRef: $(),
         columnsMapRef: v,
         dataRef: b,
@@ -481,7 +482,7 @@ const al = l.forwardRef((e, ee) => {
         total: I,
         detailExpandable: !!e.detail
       },
-      /* @__PURE__ */ l.createElement(Oe, null, /* @__PURE__ */ l.createElement(
+      /* @__PURE__ */ l.createElement(ze, null, /* @__PURE__ */ l.createElement(
         "div",
         {
           id: e.id,
@@ -493,27 +494,28 @@ const al = l.forwardRef((e, ee) => {
         re,
         ie,
         /* @__PURE__ */ l.createElement(
-          jt,
+          $t,
           {
             selectable: e.selectable,
             className: m(s.table({ size: w }))
           },
           be,
           oe,
-          /* @__PURE__ */ l.createElement(ze, { rowReorderable: G }, X)
+          /* @__PURE__ */ l.createElement(Le, { rowReorderable: G }, X)
         ),
-        me && /* @__PURE__ */ l.createElement(Ae, null, _.length ? _ : /* @__PURE__ */ l.createElement(Ke, null)),
+        me && /* @__PURE__ */ l.createElement(Ae, null, O.length ? O : /* @__PURE__ */ l.createElement(Ke, null)),
         ye && /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(Be, null), /* @__PURE__ */ l.createElement(Ve, null))
       )),
       ne,
-      e.pageable && ge
+      e.pageable && ge,
+      /* @__PURE__ */ l.createElement(_e, { loader: e.loader, showLoader: e.showLoader })
     );
-  let L = e.style || {};
-  return k && (L.height || (L = Object.assign({}, L, { height: "450px" }))), /* @__PURE__ */ l.createElement(
+  let _ = e.style || {};
+  return k && (_.height || (_ = Object.assign({}, _, { height: "450px" }))), /* @__PURE__ */ l.createElement(
     Pe,
     {
       gridRef: ee,
-      gridProps: Ce,
+      gridProps: he,
       columnsRef: $(),
       columnsMapRef: v,
       dataRef: b,
@@ -523,11 +525,11 @@ const al = l.forwardRef((e, ee) => {
       total: I,
       detailExpandable: !!e.detail
     },
-    /* @__PURE__ */ l.createElement(Oe, null, /* @__PURE__ */ l.createElement(
+    /* @__PURE__ */ l.createElement(ze, null, /* @__PURE__ */ l.createElement(
       "div",
       {
         id: e.id,
-        style: L,
+        style: _,
         className: m(
           s.wrapper({
             size: w,
@@ -548,11 +550,11 @@ const al = l.forwardRef((e, ee) => {
           "aria-colcount": y.length,
           "aria-rowcount": I,
           id: R,
-          "aria-label": z.toLanguageString(_e, Zt[_e])
+          "aria-label": L.toLanguageString(Oe, qt[Oe])
         },
         oe,
-        /* @__PURE__ */ l.createElement("div", { className: m(s.container({})), role: "presentation" }, /* @__PURE__ */ l.createElement(Jt, null, /* @__PURE__ */ l.createElement("div", { className: m(s.content({})), role: "presentation" }, /* @__PURE__ */ l.createElement("div", { className: m(s.tableWrap({})), role: "presentation" }, /* @__PURE__ */ l.createElement(
-          Ut,
+        /* @__PURE__ */ l.createElement("div", { className: m(s.container({})), role: "presentation" }, /* @__PURE__ */ l.createElement(Qt, null, /* @__PURE__ */ l.createElement("div", { className: m(s.content({})), role: "presentation" }, /* @__PURE__ */ l.createElement("div", { className: m(s.tableWrap({})), role: "presentation" }, /* @__PURE__ */ l.createElement(
+          Jt,
           {
             selectable: e.selectable,
             tableClassName: m(
@@ -560,28 +562,29 @@ const al = l.forwardRef((e, ee) => {
                 size: w
               })
             ),
-            tableStyle: { userSelect: et }
+            tableStyle: { userSelect: tt }
           },
           be,
-          /* @__PURE__ */ l.createElement(ze, { rowReorderable: G }, X)
-        ), me && /* @__PURE__ */ l.createElement(Ae, null, _.length ? _ : /* @__PURE__ */ l.createElement(Ke, null))), k && /* @__PURE__ */ l.createElement(
+          /* @__PURE__ */ l.createElement(Le, { rowReorderable: G }, X)
+        ), me && /* @__PURE__ */ l.createElement(Ae, null, O.length ? O : /* @__PURE__ */ l.createElement(Ke, null))), k && /* @__PURE__ */ l.createElement(
           "div",
           {
             className: m(s.heightContainer({})),
             role: "presentation"
           },
-          /* @__PURE__ */ l.createElement(Qt, { isVirtualScroll: k })
+          /* @__PURE__ */ l.createElement(Xt, { isVirtualScroll: k })
         )))),
-        nt,
+        it,
         ye && /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(Be, null), /* @__PURE__ */ l.createElement(Ve, null)),
-        /* @__PURE__ */ l.createElement(Mt, null)
+        /* @__PURE__ */ l.createElement(Wt, null)
       ),
       ne,
-      e.pageable && ge
+      e.pageable && ge,
+      /* @__PURE__ */ l.createElement(_e, { loader: e.loader, showLoader: e.showLoader })
     ))
   );
 });
-al.displayName = "KendoReactGridComponent";
+rl.displayName = "KendoReactGridComponent";
 export {
-  al as GridComponent
+  rl as GridComponent
 };

package/components/GridLoader.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),c=require("@progress/kendo-react-indicators");function l(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const n=l(o),i={height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},s=e=>{var t;return n.createElement(n.Fragment,null,e.showLoader?(t=e.loader)!=null?t:n.createElement("div",{className:"k-loading-mask"},n.createElement("div",{className:"k-loading-color"}),n.createElement("div",{style:i},n.createElement(c.Loader,{size:"large",type:"converging-spinner"}))):null)};exports.GridLoader=s;

package/components/GridLoader.mjs

@@ -0,0 +1,22 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as e from "react";
+import { Loader as a } from "@progress/kendo-react-indicators";
+const n = {
+  height: "100%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+}, o = (t) => {
+  var r;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, t.showLoader ? (r = t.loader) != null ? r : /* @__PURE__ */ e.createElement("div", { className: "k-loading-mask" }, /* @__PURE__ */ e.createElement("div", { className: "k-loading-color" }), /* @__PURE__ */ e.createElement("div", { style: n }, /* @__PURE__ */ e.createElement(a, { size: "large", type: "converging-spinner" }))) : null);
+};
+export {
+  o as GridLoader
+};