@progress/kendo-react-grid 10.0.0-develop.3 → 10.0.0-develop.5

package/GridComponent.mjs

@@ -6,109 +6,119 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as l from "react";
-import { uGrid as St, validatePackage as vt, getter as H, classNames as f, WatermarkOverlay as Rt, canUseDOM as xt } from "@progress/kendo-react-common";
-import { process as Gt } from "@progress/kendo-data-query";
-import { combineFilters as kt, getDetailExpandableOptions as Nt, getGroupExpandableOptions as Ft, getSelectionOptions as Dt, tableKeyboardNavigationTools as le, Pager as Tt, tableKeyboardNavigationBodyAttributes as Pt, tableKeyboardNavigationScopeAttributes as Ae, tableColumnsVirtualization as Ht } from "@progress/kendo-react-data-tools";
-import { GridSelectionCell as Kt } from "./cells/GridSelectionCell.mjs";
-import { GridHierarchyCell as At } from "./cells/GridHierarchyCell.mjs";
-import { GridEditCell as Bt } from "./cells/GridEditCell.mjs";
-import { Header as Vt } from "./header/Header.mjs";
-import { HeaderRow as Lt } from "./header/HeaderRow.mjs";
+import { uGrid as Rt, validatePackage as xt, getter as K, classNames as f, WatermarkOverlay as Gt } from "@progress/kendo-react-common";
+import { process as kt } from "@progress/kendo-data-query";
+import { combineFilters as Nt, getDetailExpandableOptions as Ft, getGroupExpandableOptions as Dt, getSelectionOptions as Tt, tableKeyboardNavigationTools as O, Pager as Pt, tableKeyboardNavigationBodyAttributes as Ht, tableKeyboardNavigationScopeAttributes as Ve, tableColumnsVirtualization as Kt } from "@progress/kendo-react-data-tools";
+import { GridSelectionCell as At } from "./cells/GridSelectionCell.mjs";
+import { GridHierarchyCell as Bt } from "./cells/GridHierarchyCell.mjs";
+import { GridEditCell as Vt } from "./cells/GridEditCell.mjs";
+import { Header as Lt } from "./header/Header.mjs";
+import { HeaderRow as _t } from "./header/HeaderRow.mjs";
 import { FilterRow as Ot } from "./header/FilterRow.mjs";
-import { GroupPanel as _t } from "./header/GroupPanel.mjs";
-import { Footer as zt } from "./footer/Footer.mjs";
-import { isRowReorderEnabled as Mt, getRowSpanOptions as Be, getColumnWidth as ae, isSorted as Ve, flatData as Wt, autoGenerateColumns as jt, mapColumns as $t, clientColumn as Ut, getNestedValue as Le, getColSpan as Oe, resolveCells as Jt, isClientReference as Qt, sanitizeColumns as Xt, readColumns as Yt } from "./utils/index.mjs";
+import { GroupPanel as zt } from "./header/GroupPanel.mjs";
+import { Footer as Mt } from "./footer/Footer.mjs";
+import { isRowReorderEnabled as Wt, getRowSpanOptions as Le, getColumnWidth as re, isSorted as _e, flatData as $t, autoGenerateColumns as jt, mapColumns as Ut, clientColumn as qt, getFlatColumnsState as Jt, getColumnState as ne, getNestedValue as Oe, getColSpan as ze, resolveCells as Qt, isClientReference as Xt, readColumns as Yt } from "./utils/index.mjs";
 import { GridCell as Zt } from "./cells/GridCell.mjs";
-import { GridGroupCell as _e } from "./cells/GridGroupCell.mjs";
-import { GridRow as qt } from "./rows/GridRow.mjs";
-import { GridHeaderSelectionCell as pt } from "./header/GridHeaderSelectionCell.mjs";
-import { GridNoRecords as ze } from "./components/noRecords/GridNoRecords.mjs";
-import { operators as Me } from "./filterCommon.mjs";
-import { FooterRow as el } from "./footer/FooterRow.mjs";
-import { normalize as tl } from "./paging/GridPagerSettings.mjs";
-import { packageMetadata as ll } from "./package-metadata.mjs";
-import { GridDetailCell as al } from "./cells/GridDetailCell.mjs";
-import { GridDetailHierarchyCell as rl } from "./cells/GridDetailHierarchyCell.mjs";
-import { GridNoRecordsContainer as We } from "./components/noRecords/GridNoRecordsContainer.mjs";
-import { GridClientWrapper as je } from "./GridClientWrapper.mjs";
-import { GridColGroup as nl } from "./components/colGroup/GridColGroup.mjs";
-import { GridTable as il } from "./components/table/GridTable.mjs";
-import { GridDropClue as $e } from "./components/GridDropClue.mjs";
-import { GridDragClue as Ue } from "./components/GridDragClue.mjs";
-import { GridTableBody as Je } from "./components/table/GridTableBody.mjs";
-import { PagerContainer as ol } from "./components/PagerContainer.mjs";
-import { GridTableScrollable as dl } from "./components/table/GridTableScrollable.mjs";
-import { GridElementContainer as Qe } from "./components/GridElementContainer.mjs";
-import { GridContainerElementContainer as cl } from "./components/GridContainerElementContainer.mjs";
-import { VirtualScrollHeightContainer as sl } from "./components/VirtualScrollHeightContainer.mjs";
-import { gridAriaLabel as Xe, messages as ul } from "./messages/index.mjs";
-import { VirtualScrollFixed as j } from "./VirtualScrollFixed.mjs";
-import { VirtualScroll as ml } from "./VirtualScroll.mjs";
-import { GridCustomCellClientContainer as fl } from "./components/GridCustomCellClientContainer.mjs";
-import { GridReorderableRowsContainer as gl } from "./components/GridDraggableRowsContainer.mjs";
-import { GridRowReorderCell as bl } from "./cells/GridRowReorderCell.mjs";
-import { GridHeaderRowReorderCell as hl } from "./header/client/GridHeaderRowReorderCell.mjs";
-import { GridLoader as Ye } from "./components/GridLoader.mjs";
-import { gridPremiumFeatures as yl } from "./utils/premium.mjs";
-import { LocalizationService as Cl, IntlService as wl } from "@progress/kendo-react-intl";
-const El = l.forwardRef((e, re) => {
-  var ve, Re, xe, Ge, ke, Ne, Fe, De;
-  const R = e.id + "-role-element-id", x = e.navigatable ? R : "", Ze = (t, r, d, o, i, a, c) => {
-    const u = [], h = Wt(
-      u,
+import { GridGroupCell as Me } from "./cells/GridGroupCell.mjs";
+import { GridRow as pt } from "./rows/GridRow.mjs";
+import { GridHeaderSelectionCell as el } from "./header/GridHeaderSelectionCell.mjs";
+import { GridNoRecords as We } from "./components/noRecords/GridNoRecords.mjs";
+import { operators as $e } from "./filterCommon.mjs";
+import { FooterRow as tl } from "./footer/FooterRow.mjs";
+import { normalize as ll } from "./paging/GridPagerSettings.mjs";
+import { packageMetadata as al } from "./package-metadata.mjs";
+import { GridDetailCell as rl } from "./cells/GridDetailCell.mjs";
+import { GridDetailHierarchyCell as nl } from "./cells/GridDetailHierarchyCell.mjs";
+import { GridNoRecordsContainer as je } from "./components/noRecords/GridNoRecordsContainer.mjs";
+import { GridClientWrapper as Ue } from "./GridClientWrapper.mjs";
+import { GridColGroup as il } from "./components/colGroup/GridColGroup.mjs";
+import { GridTable as ol } from "./components/table/GridTable.mjs";
+import { GridDropClue as qe } from "./components/GridDropClue.mjs";
+import { GridDragClue as Je } from "./components/GridDragClue.mjs";
+import { GridTableBody as Qe } from "./components/table/GridTableBody.mjs";
+import { PagerContainer as dl } from "./components/PagerContainer.mjs";
+import { GridTableScrollable as cl } from "./components/table/GridTableScrollable.mjs";
+import { GridElementContainer as Xe } from "./components/GridElementContainer.mjs";
+import { GridContainerElementContainer as sl } from "./components/GridContainerElementContainer.mjs";
+import { VirtualScrollHeightContainer as ml } from "./components/VirtualScrollHeightContainer.mjs";
+import { gridAriaLabel as Ye, messages as ul } from "./messages/index.mjs";
+import { VirtualScrollFixed as U } from "./VirtualScrollFixed.mjs";
+import { VirtualScroll as fl } from "./VirtualScroll.mjs";
+import { GridCustomCellClientContainer as gl } from "./components/GridCustomCellClientContainer.mjs";
+import { GridReorderableRowsContainer as bl } from "./components/GridDraggableRowsContainer.mjs";
+import { GridRowReorderCell as hl } from "./cells/GridRowReorderCell.mjs";
+import { GridHeaderRowReorderCell as yl } from "./header/client/GridHeaderRowReorderCell.mjs";
+import { GridLoader as Ze } from "./components/GridLoader.mjs";
+import { gridPremiumFeatures as Cl } from "./utils/premium.mjs";
+import { LocalizationService as wl, IntlService as El } from "@progress/kendo-react-intl";
+const Sl = l.forwardRef((e, ie) => {
+  var xe, Ge, ke, Ne, Fe, De, Te, Pe;
+  const x = e.id + "-role-element-id", G = e.navigatable ? x : "";
+  let E = e.columnsState || [];
+  const pe = (t, n, d, i, o, s, a) => {
+    const c = [], g = $t(
+      c,
       C,
       t,
-      { index: r },
+      { index: n },
       d !== void 0,
-      o,
       i,
-      a,
-      ct.defaultExpand,
-      c
+      o,
+      s,
+      mt.defaultExpand,
+      a
     );
-    return { flattedData: u, resolvedGroupsCount: h };
-  }, qe = (t) => {
-    const r = t.filter(
-      (i) => i && i.type && i.type.displayName === "KendoReactGridColumn"
-    ), d = s.current.filter((i) => i.declarationIndex >= 0 && i.parentIndex === -1), o = Xt(d);
-    return Yt(r, o, { prevId: 0, idPrefix: x });
-  }, pe = (t) => t.filter((r) => xt && r && r.media ? window.matchMedia(r.media).matches : r), et = () => {
-    const t = [], r = (d, o) => d == null ? void 0 : d.forEach((i) => {
-      const a = i.hidden || o;
+    return { flattedData: c, resolvedGroupsCount: g };
+  }, et = (t) => {
+    const n = t.filter(
+      (d) => d && d.type && d.type.displayName === "KendoReactGridColumn"
+    );
+    return Yt(n, E, { prevId: 0, idPrefix: G });
+  }, tt = () => {
+    const t = [], n = (d, i) => d == null ? void 0 : d.forEach((o) => {
+      const s = o.hidden || i;
       t.push({
-        ...i,
-        hidden: a
-      }), r(i.children, a);
+        ...o,
+        hidden: s
+      }), n(o.children, s);
     });
-    return r(e.columnsState, !1), t;
-  }, tt = (t) => {
-    const r = et();
+    return n(E, !1), t;
+  }, lt = (t) => {
+    const n = tt();
     return t.filter((d) => {
-      var o;
-      return !((o = r.find((i) => i.id === d.id)) != null && o.hidden);
+      var i;
+      return !d.hidden && !((i = n.find((o) => o.id === d.id)) != null && i.hidden);
     });
-  }, lt = (t, r) => {
-    var i;
-    const d = qe(t), o = pe(d);
-    s.current = o, s.current.length === 0 && (s.current = jt(
+  }, at = (t, n) => {
+    var d;
+    m = et(t), m.filter((i) => !i.hidden).length === 0 && (m = jt(
       C,
       e.group,
       {
-        column: (i = A.column) != null ? i : e.expandField
+        column: (d = B.column) != null ? d : e.expandField
       },
       {
         prevId: 0,
-        idPrefix: x
+        idPrefix: G
       }
-    )), s.current = tt(s.current), at(s.current, r), G = $t(s.current, !0), ne.current = s.current.map(Ut);
-  }, at = (t, r) => {
-    var i;
+    )), nt(m, n), m = lt(m), k = Ut(m, !0), oe = m.map(qt);
+  }, rt = (t, n) => {
+    const d = (i) => {
+      var s;
+      const o = n.find((a) => a.id === i.id);
+      return o ? (o.children = (s = i.children) == null ? void 0 : s.map(d), o) : ne(i);
+    };
+    E = t.filter((i) => i.parentIndex === -1).map(d);
+  }, nt = (t, n) => {
+    var s;
     t.filter((a) => e.selectedField && a.field === e.selectedField || a.columnType === "checkbox").forEach((a) => {
-      a.width = a.width || "50px", a.cell = a.cell || Kt, a._type = "edit", a.headerCell = a.headerCell || pt;
-    }), N !== void 0 && t.filter((a) => a.columnType === "reorder").forEach((a) => {
-      a.width = a.width || "50px", a.cell = a.cell || bl, a.headerCell = a.headerCell || hl, a.sortable = !1, a.filterable = !1, a.editable = !1;
+      a.width = a.width || "50px", a.cell = a.cell || At, a._type = "edit", a.headerCell = a.headerCell || el;
+    }), F !== void 0 && t.filter((a) => a.columnType === "reorder").forEach((a) => {
+      a.width = a.width || "50px", a.cell = a.cell || hl, a.headerCell = a.headerCell || yl, a.sortable = !1, a.filterable = !1, a.editable = !1;
     });
-    const d = {
+    const d = Jt(E);
+    rt(t, d);
+    const i = {
       id: "",
       resizable: !0,
       width: "32px",
@@ -129,64 +139,69 @@ const El = l.forwardRef((e, re) => {
       isAccessible: !0
     };
     let o = 0;
-    (e.expandField || A.enabled) && e.detail && (t.unshift({
-      ...d,
-      _type: "expand",
-      cell: At,
-      field: (i = A.column) != null ? i : e.expandField,
-      headerClassName: f(m.hierarchyCell({}))
-    }), o++);
-    for (let a = 0; a < r; a++)
-      t.unshift({
-        ...d,
+    if ((e.expandField || B.enabled) && e.detail) {
+      const a = {
+        ...i,
+        _type: "expand",
+        id: O.generateNavigatableId(`${o++}`, "expand", "column"),
+        cell: Bt,
+        field: (s = B.column) != null ? s : e.expandField,
+        headerClassName: f(u.hierarchyCell({}))
+      };
+      t.unshift(a), E.unshift(d.find((c) => c.id === a.id) || ne(a));
+    }
+    for (let a = 0; a < n; a++) {
+      const c = {
+        ...i,
         isAccessible: !1,
-        cell: _e,
+        cell: Me,
+        id: O.generateNavigatableId(`${o++}`, "group", "column"),
         field: "value",
         locked: e.lockGroups
-      }), o++;
+      };
+      t.unshift(c), E.unshift(d.find((g) => g.id === c.id) || ne(c));
+    }
     t.slice(o).forEach((a) => {
-      a.parentIndex >= 0 && (a.parentIndex += o), a.rowSpannable = a.rowSpannable !== void 0 ? Be(a.rowSpannable) : oe;
+      a.parentIndex >= 0 && (a.parentIndex += o), a.rowSpannable = a.rowSpannable !== void 0 ? Le(a.rowSpannable) : ce;
     });
-  }, $ = () => C.length === e.total, rt = () => {
-    const { rowHeight: t, detailRowHeight: r, detail: d, expandField: o } = e, i = $(), a = t !== void 0 && t > 0, c = r !== void 0 && r > 0;
-    return !a || K && !i || !!(d && o) && (!c || !i) ? ml : j;
-  }, U = () => e.isClient ? s : ne, nt = (t, r, d, o, i, a) => {
-    let c = Oe(t, r);
+  }, q = () => C.length === e.total, it = () => {
+    const { rowHeight: t, detailRowHeight: n, detail: d, expandField: i } = e, o = q(), s = t !== void 0 && t > 0, a = n !== void 0 && n > 0;
+    return !s || A && !o || !!(d && i) && (!a || !o) ? fl : U;
+  }, J = () => e.isClient ? m : oe, ot = (t, n, d, i, o, s) => {
+    let a = ze(t, n);
     if (e.columnVirtualization && t.colSpan === 1)
-      return { colSpan: a, colsToSkip: i };
-    let u = d.length - 1 === o, h = d.length - o;
-    return e.columnVirtualization && (u = b.length - 1 === o, h = b.length - o), c > 1 && !u ? i = c - 1 : c = 1, h <= c && !u && (c = h), { colSpan: c, colsToSkip: i };
+      return { colSpan: s, colsToSkip: o };
+    let c = d.length - 1 === i, g = d.length - i;
+    return e.columnVirtualization && (c = h.length - 1 === i, g = h.length - i), a > 1 && !c ? o = a - 1 : a = 1, g <= a && !c && (a = g), { colSpan: a, colsToSkip: o };
   };
-  let J, g = [], O;
-  const s = e.columnsRef || { current: [] }, ne = { current: [] };
-  let G = [[]];
-  const it = e.scrollLeftRef || { current: 0 }, _ = e.localization || new Cl(e.language), ot = e.intl || new wl((ve = e.locale) != null ? ve : "en"), k = e.unstyled, m = k && k.uGrid ? k.uGrid : St, N = Mt(e.rowReorderable), F = e.autoProcessData === !0 ? {
+  let Q, b = [], z, m = [], oe = [], k = [[]];
+  const dt = e.scrollLeftRef || { current: 0 }, M = e.localization || new wl(e.language), ct = e.intl || new El((xe = e.locale) != null ? xe : "en"), N = e.unstyled, u = N && N.uGrid ? N.uGrid : Rt, F = Wt(e.rowReorderable), D = e.autoProcessData === !0 ? {
     group: !0,
     sort: !0,
     filter: !0,
     search: !0,
     page: !0
   } : e.autoProcessData;
-  let C, v;
-  if (Array.isArray(e.data) ? (C = e.data, v = (Re = e.total) != null ? Re : C.length) : (C = ((xe = e.data) == null ? void 0 : xe.data) || [], v = (Ne = (ke = e.total) != null ? ke : (Ge = e.data) == null ? void 0 : Ge.total) != null ? Ne : C.length), F) {
-    const { data: t, total: r } = Gt(C, {
-      group: F.group ? e.group : void 0,
-      sort: F.sort ? e.sort : void 0,
-      filter: kt(
-        F.filter ? e.filter : void 0,
-        F.search ? e.search : void 0
+  let C, R;
+  if (Array.isArray(e.data) ? (C = e.data, R = (Ge = e.total) != null ? Ge : C.length) : (C = ((ke = e.data) == null ? void 0 : ke.data) || [], R = (De = (Fe = e.total) != null ? Fe : (Ne = e.data) == null ? void 0 : Ne.total) != null ? De : C.length), D) {
+    const { data: t, total: n } = kt(C, {
+      group: D.group ? e.group : void 0,
+      sort: D.sort ? e.sort : void 0,
+      filter: Nt(
+        D.filter ? e.filter : void 0,
+        D.search ? e.search : void 0
       ),
-      ...F.page ? {
+      ...D.page ? {
         take: e.take,
         skip: e.skip
       } : {}
     });
-    C = t, v = (Fe = e.total) != null ? Fe : r;
+    C = t, R = (Te = e.total) != null ? Te : n;
   }
-  const { size: E = "medium" } = e, dt = typeof e.groupable == "object" && e.groupable.footer || "none", D = e.scrollable === "virtual", K = e.groupable === !0 || typeof e.groupable == "object" && e.groupable.enabled !== !1, A = Nt(!!e.detail), ct = Ft(
+  const { size: S = "medium" } = e, st = typeof e.groupable == "object" && e.groupable.footer || "none", T = e.scrollable === "virtual", A = e.groupable === !0 || typeof e.groupable == "object" && e.groupable.enabled !== !1, B = Ft(!!e.detail), mt = Dt(
     typeof e.groupable == "object" && e.groupable.enabled !== !1 ? e.groupable.expandable : e.groupable
-  ), { resolvedGroupsCount: st, flattedData: ut } = Ze(
-    dt,
+  ), { resolvedGroupsCount: ut, flattedData: ft } = pe(
+    st,
     e.skip || 0,
     e.group,
     e.expandField,
@@ -194,49 +209,49 @@ const El = l.forwardRef((e, re) => {
     e.groupExpand,
     e.dataItemKey
   );
-  g = ut;
-  const Q = rt();
-  Q === j && $() && (O = g.slice(
+  b = ft;
+  const X = it();
+  X === U && q() && (z = b.slice(
     e.skip || 0,
     (e.skip || 0) + ((e.take !== void 0 ? e.take : e.pageSize) || 0)
   ));
-  const ie = Dt(e.selectable || !!e.selectedField), oe = Be(e.rowSpannable), mt = ie && ie.drag ? "none" : void 0, z = l.useMemo(() => l.Children.toArray(e.children), [e.children]);
-  lt(z, st);
-  const X = l.useMemo(() => {
-    const t = yl(e, s.current);
+  const de = Tt(e.selectable || !!e.selectedField), ce = Le(e.rowSpannable), gt = de && de.drag ? "none" : void 0, W = l.useMemo(() => l.Children.toArray(e.children), [e.children]);
+  at(W, ut);
+  const Y = l.useMemo(() => {
+    const t = Cl(e, m);
     return {
       premium: t.length > 0,
       features: t
     };
-  }, [e, s]), ft = l.useMemo(() => X.premium ? !vt(ll, { component: "Grid", features: X.features }) : !1, [X.premium]), de = z.map((t) => t && t.type && t.type.displayName === "KendoReactGridToolbar" ? l.cloneElement(t, { ...t.props, ariaControls: R }) : null), M = z.filter((t) => t && t.type && t.type.displayName === "KendoReactGridNoRecords"), ce = z.filter(
+  }, [e, m]), bt = l.useMemo(() => Y.premium ? !xt(al, { component: "Grid", features: Y.features }) : !1, [Y.premium]), se = W.map((t) => t && t.type && t.type.displayName === "KendoReactGridToolbar" ? l.cloneElement(t, { ...t.props, ariaControls: x }) : null), $ = W.filter((t) => t && t.type && t.type.displayName === "KendoReactGridNoRecords"), me = W.filter(
     (t) => t && t.type && t.type.displayName === "KendoReactGridStatusBar"
-  ), b = s.current.filter((t) => t.children.length === 0), se = K && /* @__PURE__ */ l.createElement(_t, { columns: U().current, group: e.group || [], ariaControls: R }), ue = /* @__PURE__ */ l.createElement(
-    Vt,
+  ), h = m.filter((t) => t.children.length === 0), ue = A && /* @__PURE__ */ l.createElement(zt, { columns: J(), group: e.group || [], ariaControls: x }), fe = /* @__PURE__ */ l.createElement(
+    Lt,
     {
-      size: E,
+      size: S,
       staticHeaders: e.scrollable !== "none",
-      draggable: e.reorderable || K,
+      draggable: e.reorderable || A,
       headerRow: /* @__PURE__ */ l.createElement(
-        Lt,
+        _t,
         {
           cells: e.cells,
           sort: e.sort,
           sortable: e.sortable,
           group: e.group || [],
-          groupable: K,
+          groupable: A,
           filter: e.filter,
           filterable: e.filterable,
-          filterOperators: e.filterOperators || Me,
+          filterOperators: e.filterOperators || $e,
           columnMenu: e.columnMenu,
           columnMenuIcon: e.columnMenuIcon,
-          columns: s.current,
-          columnsMap: G,
+          columns: m,
+          columnsMap: k,
           cellRender: e.headerCellRender,
           navigatable: !!e.navigatable,
-          localization: _,
-          unstyled: k,
-          headerSelectionValue: !!(e.select && g.filter((t) => t.rowType === "data").every(
-            (t) => e.select && e.dataItemKey && H(e.dataItemKey)(t.dataItem) !== void 0 ? e.select[H(e.dataItemKey)(t.dataItem)] : void 0
+          localization: M,
+          unstyled: N,
+          headerSelectionValue: !!(e.select && b.filter((t) => t.rowType === "data").every(
+            (t) => e.select && e.dataItemKey && K(e.dataItemKey)(t.dataItem) !== void 0 ? e.select[K(e.dataItemKey)(t.dataItem)] : void 0
           ))
         }
       ),
@@ -244,207 +259,207 @@ const El = l.forwardRef((e, re) => {
         Ot,
         {
           cells: e.cells,
-          size: E,
-          columns: s.current,
+          size: S,
+          columns: m,
           filter: e.filter,
-          filterOperators: e.filterOperators || Me,
+          filterOperators: e.filterOperators || $e,
           sort: e.sort,
           cellRender: e.filterCellRender,
           navigatable: !!e.navigatable,
-          ariaRowIndex: G.length + 1,
-          localization: _
+          ariaRowIndex: k.length + 1,
+          localization: M
         }
       ) || void 0,
-      cols: b.map((t, r) => /* @__PURE__ */ l.createElement("col", { key: r.toString(), width: ae(t) }))
+      cols: h.map((t, n) => /* @__PURE__ */ l.createElement("col", { key: n.toString(), width: re(t) }))
     }
-  ), gt = it.current || 0, bt = parseFloat(((e.style || {}).width || "").toString()), ht = (t, r, d, o, i) => {
-    let a = !1;
-    const c = e.selectedField ? Le(e.selectedField, t.dataItem) : e.select && e.dataItemKey && H(e.dataItemKey)(t.dataItem) !== void 0 ? e.select[H(e.dataItemKey)(t.dataItem)] : void 0;
-    let u = 0;
-    const { colSpans: h, hiddenColumns: T } = Ht({
+  ), ht = dt.current || 0, yt = parseFloat(((e.style || {}).width || "").toString()), Ct = (t, n, d, i, o) => {
+    let s = !1;
+    const a = e.selectedField ? Oe(e.selectedField, t.dataItem) : e.select && e.dataItemKey && K(e.dataItemKey)(t.dataItem) !== void 0 ? e.select[K(e.dataItemKey)(t.dataItem)] : void 0;
+    let c = 0;
+    const { colSpans: g, hiddenColumns: P } = Kt({
       enabled: e.columnVirtualization,
-      columns: b,
-      tableViewPortWidth: bt,
-      scrollLeft: gt,
-      getColSpan: Oe,
+      columns: h,
+      tableViewPortWidth: yt,
+      scrollLeft: ht,
+      getColSpan: ze,
       dataItem: t.dataItem
-    }), I = b.filter((n, y) => !T[y]);
+    }), I = h.filter((r, y) => !P[y]);
     return {
-      row: b.map((n, y) => {
-        var Te, Pe, He, Ke;
-        if (T[y])
+      row: h.map((r, y) => {
+        var He, Ke, Ae, Be;
+        if (P[y])
           return null;
-        if (u > 0)
-          return u--, null;
+        if (c > 0)
+          return c--, null;
         let w;
-        if ((Te = n.rowSpannable) != null && Te.enabled && t.rowType === "data" && n.field && i) {
-          const S = n.field ? (He = (Pe = n.rowSpannable).valueGetter) == null ? void 0 : He.call(Pe, t.dataItem, n.field) : null;
-          w = { value: S, count: 1 }, i[n.field] && ((Ke = i[n.field]) == null ? void 0 : Ke.value) === S && i[n.field] !== null ? (i[n.field].count++, w.count = null) : i[n.field] = w;
+        if ((He = r.rowSpannable) != null && He.enabled && t.rowType === "data" && r.field && o) {
+          const v = r.field ? (Ae = (Ke = r.rowSpannable).valueGetter) == null ? void 0 : Ae.call(Ke, t.dataItem, r.field) : null;
+          w = { value: v, count: 1 }, o[r.field] && ((Be = o[r.field]) == null ? void 0 : Be.value) === v && o[r.field] !== null ? (o[r.field].count++, w.count = null) : o[r.field] = w;
         }
-        const { colSpan: V, colsToSkip: q } = nt(
-          n,
+        const { colSpan: L, colsToSkip: ee } = ot(
+          r,
           t.dataItem,
           I,
           y,
-          u,
-          h[y]
+          c,
+          g[y]
         );
-        u = q;
-        const L = n.id ? n.id : y, wt = f(m.contentSticky({ locked: n.locked }), n.className), Et = n.left !== void 0 ? { left: n.left, right: n.right } : {};
-        let p = !1;
-        if (n.editable && (e.editable || e.editField)) {
-          const S = e.editField ? Le(e.editField, t.dataItem) : e.edit && e.dataItemKey ? e.edit[H(e.dataItemKey)(t.dataItem)] : void 0, te = typeof S == "boolean" ? S : Array.isArray(S) ? S.indexOf(n.field) > -1 : n.field !== void 0 && S === n.field;
-          te && n.columnType === "data" && (te === !0 || te === n.field) && (a = !0, p = !0);
+        c = ee;
+        const _ = r.id ? r.id : y, St = f(u.contentSticky({ locked: r.locked }), r.className), It = r.left !== void 0 ? { left: r.left, right: r.right } : {};
+        let te = !1;
+        if (r.editable && (e.editable || e.editField)) {
+          const v = e.editField ? Oe(e.editField, t.dataItem) : e.edit && e.dataItemKey ? e.edit[K(e.dataItemKey)(t.dataItem)] : void 0, ae = typeof v == "boolean" ? v : Array.isArray(v) ? v.indexOf(r.field) > -1 : r.field !== void 0 && v === r.field;
+          ae && r.columnType === "data" && (ae === !0 || ae === r.field) && (s = !0, te = !0);
         }
-        const ee = n.cell || p && Bt || Zt, It = e.expandField && e.detail && n.field === e.expandField || n._type === "expand", P = {
+        const le = r.cell || te && Vt || Zt, vt = e.expandField && e.detail && r.field === e.expandField || r._type === "expand", H = {
           locked: e.lockGroups,
-          id: le.generateNavigatableId(
-            `${r}-${String(y)}`,
-            x,
-            It || t.rowType === "groupHeader" || t.rowType === "groupFooter" || n.field === "value" ? "nodata" : "cell"
+          id: O.generateNavigatableId(
+            `${n}-${String(y)}`,
+            G,
+            vt || t.rowType === "groupHeader" || t.rowType === "groupFooter" || r.field === "value" ? "nodata" : "cell"
           ),
-          colSpan: V,
+          colSpan: L,
           dataItem: t.dataItem,
-          field: n.field,
-          editor: n.editor,
-          format: n.format,
-          columnType: n.columnType,
-          rowReorderable: N,
-          className: wt,
+          field: r.field,
+          editor: r.editor,
+          format: r.format,
+          columnType: r.columnType,
+          rowReorderable: F,
+          className: St,
           render: e.cellRender,
-          cells: Jt(e.cells, n.cells),
+          cells: Qt(e.cells, r.cells),
           columnIndex: y,
-          columnsCount: b.length,
+          columnsCount: h.length,
           rowType: t.rowType,
           level: t.level,
           expanded: t.expanded,
           dataIndex: t.dataIndex,
           rowDataIndex: d,
-          columnPosition: Et,
+          columnPosition: It,
           style: {},
-          ariaColumnIndex: n.ariaColumnIndex,
-          isSelected: (n == null ? void 0 : n._type) === "edit" ? c : Array.isArray(c) && c.indexOf(y) > -1,
-          isSorted: !!Ve(n.field, e.sort),
-          isInEdit: p,
-          isAlt: o,
-          unstyled: k,
+          ariaColumnIndex: r.ariaColumnIndex,
+          isSelected: (r == null ? void 0 : r._type) === "edit" ? a : Array.isArray(a) && a.indexOf(y) > -1,
+          isSorted: !!_e(r.field, e.sort),
+          isInEdit: te,
+          isAlt: i,
+          unstyled: N,
           group: t.group,
-          localization: _,
-          intl: ot,
+          localization: M,
+          intl: ct,
           _rowSpan: w
         };
-        return n.cell ? /* @__PURE__ */ l.createElement(
-          fl,
+        return r.cell ? /* @__PURE__ */ l.createElement(
+          gl,
           {
-            key: L,
-            isClient: Qt(ee),
-            dataItem: P.dataItem,
-            rowDataIndex: P.rowDataIndex,
-            columnIndex: P.columnIndex,
-            columnPosition: P.columnPosition
+            key: _,
+            isClient: Xt(le),
+            dataItem: H.dataItem,
+            rowDataIndex: H.rowDataIndex,
+            columnIndex: H.columnIndex,
+            columnPosition: H.columnPosition
           },
-          /* @__PURE__ */ l.createElement(ee, { ...P })
-        ) : /* @__PURE__ */ l.createElement(ee, { key: L, ...P });
+          /* @__PURE__ */ l.createElement(le, { ...H })
+        ) : /* @__PURE__ */ l.createElement(le, { key: _, ...H });
       }),
-      isInEdit: a,
-      isSelected: typeof c == "boolean" && c
+      isInEdit: s,
+      isSelected: typeof a == "boolean" && a
     };
   };
-  let me = 0;
-  if (D && J)
-    for (let t = 0; t < J.topCacheCount + J.attendedSkip - (e.skip || 0); t++) {
-      const r = g.shift();
-      if (r)
-        g.push(r), me++, r.rowType === "groupHeader" && t--;
+  let ge = 0;
+  if (T && Q)
+    for (let t = 0; t < Q.topCacheCount + Q.attendedSkip - (e.skip || 0); t++) {
+      const n = b.shift();
+      if (n)
+        b.push(n), ge++, n.rowType === "groupHeader" && t--;
       else
         break;
     }
-  const fe = (t) => t >= g.length - me;
-  let ge = e.skip || 0;
-  const Y = [], be = !g.length, he = G.length + (e.filterable ? 1 : 0) + 1;
-  let B = 0;
-  if (g.length) {
-    let t = -1, r = 0;
-    const d = oe.enabled ? {} : void 0;
-    (O || g).forEach((o, i) => {
-      o.rowType === "data" && (ge++, t++);
-      const a = ge % 2 === 0, c = e.dataItemKey && H(e.dataItemKey)(o.dataItem), u = i + (e.skip || 0), h = c || "ai" + u, T = h + "_1", I = ht(o, h, t, a, d);
-      if (B = u + he + r, Y.push(
+  const be = (t) => t >= b.length - ge;
+  let he = e.skip || 0;
+  const Z = [], ye = !b.length, Ce = k.length + (e.filterable ? 1 : 0) + 1;
+  let V = 0;
+  if (b.length) {
+    let t = -1, n = 0;
+    const d = ce.enabled ? {} : void 0;
+    (z || b).forEach((i, o) => {
+      i.rowType === "data" && (he++, t++);
+      const s = he % 2 === 0, a = e.dataItemKey && K(e.dataItemKey)(i.dataItem), c = o + (e.skip || 0), g = a || "ai" + c, P = g + "_1", I = Ct(i, g, t, s, d);
+      if (V = c + Ce + n, Z.push(
         /* @__PURE__ */ l.createElement(
-          qt,
+          pt,
           {
-            key: h,
-            dataItem: o.dataItem,
-            isAltRow: a,
+            key: g,
+            dataItem: i.dataItem,
+            isAltRow: s,
             isInEdit: I.isInEdit,
-            rowType: o.rowType,
-            isRowReorderable: N,
-            isHidden: fe(i),
+            rowType: i.rowType,
+            isRowReorderable: F,
+            isHidden: be(o),
             onClick: null,
             onDoubleClick: null,
             selectedField: e.selectedField,
             rowHeight: e.rowHeight,
             render: e.rowRender,
-            ariaRowIndex: B,
-            absoluteRowIndex: u,
-            dataIndex: D && !e.groupable ? u : t,
+            ariaRowIndex: V,
+            absoluteRowIndex: c,
+            dataIndex: T && !e.groupable ? c : t,
             isSelected: I.isSelected,
             rows: e.rows
           },
           I.row
         )
-      ), e.detail && o.rowType === "data" && o.expanded) {
-        const n = b.length - (e.expandField || A.enabled ? 1 : 0) - (e.group ? e.group.length : 0) || 1;
-        r++, B = u + he + r, Y.push(
+      ), e.detail && i.rowType === "data" && i.expanded) {
+        const r = h.length - (e.expandField || B.enabled ? 1 : 0) - (e.group ? e.group.length : 0) || 1;
+        n++, V = c + Ce + n, Z.push(
           /* @__PURE__ */ l.createElement(
             "tr",
             {
-              key: T,
-              className: f(m.detailTr({ isAlt: a })),
+              key: P,
+              className: f(u.detailTr({ isAlt: s })),
               style: {
-                visibility: fe(i) ? "hidden" : "",
+                visibility: be(o) ? "hidden" : "",
                 height: e.detailRowHeight
               },
               role: "row",
-              "aria-rowindex": B
+              "aria-rowindex": V
             },
             e.group && e.group.map((y, w) => {
-              var L;
-              const V = (L = I == null ? void 0 : I.row[w]) == null ? void 0 : L.props.style, q = V ? { left: V.left, right: V.right } : {};
+              var _;
+              const L = (_ = I == null ? void 0 : I.row[w]) == null ? void 0 : _.props.style, ee = L ? { left: L.left, right: L.right } : {};
               return /* @__PURE__ */ l.createElement(
-                _e,
+                Me,
                 {
                   id: "",
-                  dataIndex: o.dataIndex,
+                  dataIndex: i.dataIndex,
                   field: y.field,
-                  dataItem: o.dataItem,
+                  dataItem: i.dataItem,
                   key: w,
-                  columnPosition: q,
+                  columnPosition: ee,
                   style: {},
                   ariaColumnIndex: 1 + w,
                   isSelected: !1,
                   locked: e.lockGroups,
                   cells: e.cells,
-                  group: o.group
+                  group: i.group
                 }
               );
             }),
-            (e.expandField || A.enabled) && /* @__PURE__ */ l.createElement(
-              rl,
+            (e.expandField || B.enabled) && /* @__PURE__ */ l.createElement(
+              nl,
               {
-                unstyled: k,
-                id: le.generateNavigatableId(`${T}-dhcell`, x)
+                unstyled: N,
+                id: O.generateNavigatableId(`${P}-dhcell`, G)
               }
             ),
             /* @__PURE__ */ l.createElement(
-              al,
+              rl,
               {
-                dataItem: o.dataItem,
-                dataIndex: o.dataIndex,
-                colSpan: n,
+                dataItem: i.dataItem,
+                dataIndex: i.dataIndex,
+                colSpan: r,
                 ariaColIndex: 2 + (e.group ? e.group.length : 0),
                 detail: e.detail,
-                id: le.generateNavigatableId(`${T}-dcell`, x)
+                id: O.generateNavigatableId(`${P}-dcell`, G)
               }
             )
           )
@@ -452,175 +467,177 @@ const El = l.forwardRef((e, re) => {
       }
     });
   }
-  const ye = {
-    size: E,
-    total: v,
+  const we = {
+    size: S,
+    total: R,
     skip: e.skip || 0,
     take: (e.take !== void 0 ? e.take : e.pageSize) || 10,
-    ...tl(e.pageable || {})
-  }, Ce = /* @__PURE__ */ l.createElement(ol, null, e.pager ? /* @__PURE__ */ l.createElement(e.pager, { ...ye }) : /* @__PURE__ */ l.createElement(Tt, { className: f(m.pager({})), ...ye })), yt = (t, r) => /* @__PURE__ */ l.createElement("col", { key: r.toString(), width: ae(t) }), Ct = (De = e.cells) != null && De.footerCell || s.current.some((t) => {
-    var r;
-    return !!(t.footerCell || (r = t.cells) != null && r.footerCell);
+    ...ll(e.pageable || {})
+  }, Ee = /* @__PURE__ */ l.createElement(dl, null, e.pager ? /* @__PURE__ */ l.createElement(e.pager, { ...we }) : /* @__PURE__ */ l.createElement(Pt, { className: f(u.pager({})), ...we })), wt = (t, n) => /* @__PURE__ */ l.createElement("col", { key: n.toString(), width: re(t) }), Et = (Pe = e.cells) != null && Pe.footerCell || m.some((t) => {
+    var n;
+    return !!(t.footerCell || (n = t.cells) != null && n.footerCell);
   }) ? /* @__PURE__ */ l.createElement(
-    zt,
+    Mt,
     {
-      size: E,
+      size: S,
       staticHeaders: e.scrollable !== "none",
       row: /* @__PURE__ */ l.createElement(
-        el,
+        tl,
         {
           cells: e.cells,
-          idPrefix: x,
-          columns: s.current,
-          ariaRowIndex: B + 1
+          idPrefix: G,
+          columns: m,
+          ariaRowIndex: V + 1
         }
       ),
-      cols: b.map(yt)
+      cols: h.map(wt)
     }
-  ) : null, we = /* @__PURE__ */ l.createElement(nl, null, b.map((t, r) => /* @__PURE__ */ l.createElement(
+  ) : null, Se = /* @__PURE__ */ l.createElement(il, null, h.map((t, n) => /* @__PURE__ */ l.createElement(
     "col",
     {
-      key: r.toString(),
-      className: Ve(t.field, e.sort) ? f(m.sorted({})) : void 0,
-      width: ae(t)
+      key: n.toString(),
+      className: _e(t.field, e.sort) ? f(u.sorted({})) : void 0,
+      width: re(t)
     }
-  ))), Ee = e.reorderable || K, { detail: Il, cells: Sl, rows: vl, ...Ie } = e, Se = /* @__PURE__ */ l.createElement(
+  ))), Ie = e.reorderable || A, { detail: Il, cells: vl, rows: Rl, ...ve } = e, Re = /* @__PURE__ */ l.createElement(
     "tbody",
     {
       role: "rowgroup",
-      className: f(m.tbody({})),
-      ...Pt
+      className: f(u.tbody({})),
+      ...Ht
     },
-    Y
+    Z
   );
-  let Z = Se;
-  if (N && (Z = /* @__PURE__ */ l.createElement(
-    gl,
+  let p = Re;
+  if (F && (p = /* @__PURE__ */ l.createElement(
+    bl,
     {
-      unstyled: m,
-      columns: s.current,
+      unstyled: u,
+      columns: m,
       rowReorderSettings: e.rowReorderable
     },
-    Se
+    Re
   )), e.scrollable === "none")
     return /* @__PURE__ */ l.createElement(
-      je,
+      Ue,
       {
-        gridRef: re,
-        gridProps: Ie,
-        columnsRef: U(),
-        columnsMapRef: G,
-        dataRef: g,
-        slicedData: O,
-        isFixedVirtualScroll: Q === j,
-        id: R,
-        total: v,
-        isAllData: $(),
+        gridRef: ie,
+        gridProps: ve,
+        columnsRef: J(),
+        columnsMapRef: k,
+        columnsState: E,
+        dataRef: b,
+        slicedData: z,
+        isFixedVirtualScroll: X === U,
+        id: x,
+        total: R,
+        isAllData: q(),
         detailExpandable: !!e.detail
       },
-      /* @__PURE__ */ l.createElement(Qe, null, /* @__PURE__ */ l.createElement(
+      /* @__PURE__ */ l.createElement(Xe, null, /* @__PURE__ */ l.createElement(
         "div",
         {
           id: e.id,
           style: e.style,
-          className: f(m.wrapper({ size: E }), e.className),
+          className: f(u.wrapper({ size: S }), e.className),
           "aria-label": e.ariaLabel,
-          ...Ae
+          ...Ve
         },
-        de,
         se,
+        ue,
         /* @__PURE__ */ l.createElement(
-          il,
+          ol,
           {
             selectable: e.selectable,
-            className: f(m.table({ size: E }))
+            className: f(u.table({ size: S }))
           },
-          we,
-          ue,
-          /* @__PURE__ */ l.createElement(Je, { rowReorderable: N }, Z)
+          Se,
+          fe,
+          /* @__PURE__ */ l.createElement(Qe, { rowReorderable: F }, p)
         ),
-        be && /* @__PURE__ */ l.createElement(We, null, M.length ? M : /* @__PURE__ */ l.createElement(ze, null)),
-        Ee && /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement($e, null), /* @__PURE__ */ l.createElement(Ue, null))
+        ye && /* @__PURE__ */ l.createElement(je, null, $.length ? $ : /* @__PURE__ */ l.createElement(We, null)),
+        Ie && /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(qe, null), /* @__PURE__ */ l.createElement(Je, null))
       )),
-      ce,
-      e.pageable && Ce,
-      /* @__PURE__ */ l.createElement(Ye, { loader: e.loader, showLoader: e.showLoader })
+      me,
+      e.pageable && Ee,
+      /* @__PURE__ */ l.createElement(Ze, { loader: e.loader, showLoader: e.showLoader })
     );
-  let W = e.style || {};
-  return D && (W.height || (W = Object.assign({}, W, { height: "450px" }))), /* @__PURE__ */ l.createElement(
-    je,
+  let j = e.style || {};
+  return T && (j.height || (j = Object.assign({}, j, { height: "450px" }))), /* @__PURE__ */ l.createElement(
+    Ue,
     {
-      gridRef: re,
-      gridProps: Ie,
-      columnsRef: U(),
-      columnsMapRef: G,
-      dataRef: g,
-      slicedData: O,
-      isFixedVirtualScroll: Q === j,
-      id: R,
-      total: v,
+      gridRef: ie,
+      gridProps: ve,
+      columnsRef: J(),
+      columnsMapRef: k,
+      columnsState: E,
+      dataRef: b,
+      slicedData: z,
+      isFixedVirtualScroll: X === U,
+      id: x,
+      total: R,
       detailExpandable: !!e.detail
     },
-    /* @__PURE__ */ l.createElement(Qe, null, /* @__PURE__ */ l.createElement(
+    /* @__PURE__ */ l.createElement(Xe, null, /* @__PURE__ */ l.createElement(
       "div",
       {
         id: e.id,
-        style: W,
+        style: j,
         className: f(
-          m.wrapper({
-            size: E,
-            virtual: D
+          u.wrapper({
+            size: S,
+            virtual: T
           }),
           e.className
         ),
         "aria-label": e.ariaLabel,
-        ...Ae
+        ...Ve
       },
-      de,
       se,
+      ue,
       /* @__PURE__ */ l.createElement(
         "div",
         {
-          className: f(m.ariaRoot({})),
+          className: f(u.ariaRoot({})),
           role: "grid",
-          "aria-colcount": b.length,
-          "aria-rowcount": v,
-          id: R,
-          "aria-label": _.toLanguageString(Xe, ul[Xe])
+          "aria-colcount": h.length,
+          "aria-rowcount": R,
+          id: x,
+          "aria-label": M.toLanguageString(Ye, ul[Ye])
         },
-        ue,
-        /* @__PURE__ */ l.createElement("div", { className: f(m.container({})), role: "presentation" }, /* @__PURE__ */ l.createElement(cl, null, /* @__PURE__ */ l.createElement("div", { className: f(m.content({})), role: "presentation" }, /* @__PURE__ */ l.createElement("div", { className: f(m.tableWrap({})), role: "presentation" }, /* @__PURE__ */ l.createElement(
-          dl,
+        fe,
+        /* @__PURE__ */ l.createElement("div", { className: f(u.container({})), role: "presentation" }, /* @__PURE__ */ l.createElement(sl, null, /* @__PURE__ */ l.createElement("div", { className: f(u.content({})), role: "presentation" }, /* @__PURE__ */ l.createElement("div", { className: f(u.tableWrap({})), role: "presentation" }, /* @__PURE__ */ l.createElement(
+          cl,
           {
             selectable: e.selectable,
             tableClassName: f(
-              m.table({
-                size: E
+              u.table({
+                size: S
               })
             ),
-            tableStyle: { userSelect: mt }
+            tableStyle: { userSelect: gt }
           },
-          we,
-          /* @__PURE__ */ l.createElement(Je, { rowReorderable: N }, Z)
-        ), be && /* @__PURE__ */ l.createElement(We, null, M.length ? M : /* @__PURE__ */ l.createElement(ze, null))), D && /* @__PURE__ */ l.createElement(
+          Se,
+          /* @__PURE__ */ l.createElement(Qe, { rowReorderable: F }, p)
+        ), ye && /* @__PURE__ */ l.createElement(je, null, $.length ? $ : /* @__PURE__ */ l.createElement(We, null))), T && /* @__PURE__ */ l.createElement(
           "div",
           {
-            className: f(m.heightContainer({})),
+            className: f(u.heightContainer({})),
             role: "presentation"
           },
-          /* @__PURE__ */ l.createElement(sl, { isVirtualScroll: D })
+          /* @__PURE__ */ l.createElement(ml, { isVirtualScroll: T })
         )))),
-        Ct,
-        Ee && /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement($e, null), /* @__PURE__ */ l.createElement(Ue, null)),
-        ft && /* @__PURE__ */ l.createElement(Rt, null)
+        Et,
+        Ie && /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(qe, null), /* @__PURE__ */ l.createElement(Je, null)),
+        bt && /* @__PURE__ */ l.createElement(Gt, null)
       ),
-      ce,
-      e.pageable && Ce,
-      /* @__PURE__ */ l.createElement(Ye, { loader: e.loader, showLoader: e.showLoader })
+      me,
+      e.pageable && Ee,
+      /* @__PURE__ */ l.createElement(Ze, { loader: e.loader, showLoader: e.showLoader })
     ))
   );
 });
-El.displayName = "KendoReactGridComponent";
+Sl.displayName = "KendoReactGridComponent";
 export {
-  El as GridComponent
+  Sl as GridComponent
 };