@progress/kendo-react-grid 9.1.0-develop.8 → 9.1.0

package/Grid.mjs

@@ -24,7 +24,7 @@ import { VirtualScroll as jn } from "./VirtualScroll.mjs";
 import { VirtualScrollFixed as Rt } from "./VirtualScrollFixed.mjs";
 import { ColumnResize as qn } from "./drag/ColumnResize.mjs";
 import { CommonDragLogic as Jn } from "./drag/CommonDragLogic.mjs";
-import { getColumnWidth as Ne, isSorted as Ct, sanitizeColumns as Xn, firefox as vt, firefoxMaxHeight as yt, flatData as Yn, autoGenerateColumns as Qn, getNestedValue as wt, resolveCells as Zn, readColumns as pn } from "./utils/index.mjs";
+import { getColumnWidth as De, isSorted as Ct, sanitizeColumns as Xn, firefox as vt, firefoxMaxHeight as yt, flatData as Yn, autoGenerateColumns as Qn, getNestedValue as wt, resolveCells as Zn, readColumns as pn } from "./utils/index.mjs";
 import { GridCell as er } from "./cells/GridCell.mjs";
 import { GridGroupCell as Et } from "./cells/GridGroupCell.mjs";
 import { GridRow as tr } from "./rows/GridRow.mjs";
@@ -39,16 +39,16 @@ import { GridDetailHierarchyCell as cr } from "./cells/GridDetailHierarchyCell.m
 import { SAFARI_REGEX as ir } from "./constants/index.mjs";
 const kt = r.forwardRef((t, xt) => {
   var nt, rt, at, lt;
-  const se = Rn();
+  const ue = Rn();
   Cn(St);
   const A = () => {
     var e;
     if (Q)
       return ((e = Z()) == null ? void 0 : e.ownerDocument) || document;
-  }, T = () => (t.id || se) + "-role-element-id", V = () => {
+  }, T = () => (t.id || ue) + "-role-element-id", V = () => {
     const e = s.current.filter((n) => n.declarationIndex >= 0 && n.parentIndex === -1);
     return Xn(e);
-  }, Z = () => k.current, fe = r.useCallback(
+  }, Z = () => k.current, se = r.useCallback(
     (e) => {
       var l;
       if (!c.current || !((l = c.current) != null && l.container) || t.scrollable === "none")
@@ -66,17 +66,17 @@ const kt = r.forwardRef((t, xt) => {
       }
     },
     [t.scrollable]
-  ), Fe = r.useCallback(
+  ), Ne = r.useCallback(
     (e) => {
-      const n = { rowIndex: Se.current };
+      const n = { rowIndex: Ie.current };
       e.forEach((a) => {
-        a.isIntersecting || fe(n);
+        a.isIntersecting || se(n);
       });
     },
-    [fe]
-  ), [, ge] = r.useReducer((e) => !e, !0), Ge = (e) => JSON.stringify(e.map((n) => ({ id: n.id, field: n.field, title: n.title, children: n.children }))), B = r.useMemo(() => r.Children.toArray(t.children), [t.children]), Ht = () => Ge(B) === Ge(s.current), Tt = () => {
-    Ht() || ge();
-  }, me = (e, n, a) => {
+    [se]
+  ), [, fe] = r.useReducer((e) => !e, !0), Fe = (e) => JSON.stringify(e.map((n) => ({ id: n.id, field: n.field, title: n.title, children: n.children }))), B = r.useMemo(() => r.Children.toArray(t.children), [t.children]), Ht = () => Fe(B) === Fe(s.current), Tt = () => {
+    Ht() || fe();
+  }, ge = (e, n, a) => {
     if (t.onContextMenu) {
       const l = {
         target: w.current,
@@ -87,23 +87,23 @@ const kt = r.forwardRef((t, xt) => {
       };
       t.onContextMenu.call(void 0, l);
     }
-  }, Ae = () => {
+  }, Ge = () => {
     const { data: e, total: n } = t;
     return Array.isArray(e) ? e.length === n : e ? n === e.total : !1;
   }, Dt = () => {
-    const { rowHeight: e, detailRowHeight: n, detail: a, expandField: l, groupable: i } = t, u = Ae(), d = e !== void 0 && e > 0, h = n !== void 0 && n > 0, E = i === !0 || typeof i == "object" && i.enabled !== !1;
+    const { rowHeight: e, detailRowHeight: n, detail: a, expandField: l, groupable: i } = t, u = Ge(), d = e !== void 0 && e > 0, h = n !== void 0 && n > 0, E = i === !0 || typeof i == "object" && i.enabled !== !1;
     return !d || E && !u || !!(a && l) && (!h || !u) ? jn : Rt;
   }, Nt = (e, n) => {
     if (c.current) {
-      if (c.current.fixedScroll = t.fixedScroll || !1, c.current.PageChange = ee, c.current.realSkip = t.skip || 0, c.current.pageSize = (t.take !== void 0 ? t.take : t.pageSize) || 0, c.current.scrollableVirtual = t.scrollable === "virtual", c.current.total = e, c.current.propsSkip = (t.skip || 0) + (t.scrollable === "virtual" ? c.current.topCacheCount + (c.current.attendedSkip - (t.skip || 0)) : 0), t.rowHeight !== void 0 && t.rowHeight > 0 && !n) {
+      if (c.current.fixedScroll = t.fixedScroll || !1, c.current.PageChange = p, c.current.realSkip = t.skip || 0, c.current.pageSize = (t.take !== void 0 ? t.take : t.pageSize) || 0, c.current.scrollableVirtual = t.scrollable === "virtual", c.current.total = e, c.current.propsSkip = (t.skip || 0) + (t.scrollable === "virtual" ? c.current.topCacheCount + (c.current.attendedSkip - (t.skip || 0)) : 0), t.rowHeight !== void 0 && t.rowHeight > 0 && !n) {
         const a = t.rowHeight * e;
         c.current.containerHeight = vt ? Math.min(yt, a) : a;
       } else
         c.current.containerHeight = 1533915;
-      if (c.current.containerRef = _, c.current.tableBodyRef = U, c.current.table = y.current, le.current = void 0, c.current instanceof Rt) {
+      if (c.current.containerRef = _, c.current.tableBodyRef = U, c.current.table = y.current, ae.current = void 0, c.current instanceof Rt) {
         const { rowHeight: a = 0, detail: l, expandField: i } = t;
         let { detailRowHeight: u = 0 } = t;
-        u = l && i ? u : a, Ae() ? (c.current.total = R.current.length, le.current = R.current.slice(
+        u = l && i ? u : a, Ge() ? (c.current.total = R.current.length, ae.current = R.current.slice(
           c.current.realSkip,
           c.current.realSkip + c.current.pageSize
         ), c.current.rowHeightService = new it(
@@ -116,15 +116,15 @@ const kt = r.forwardRef((t, xt) => {
         c.current.containerHeight = vt ? Math.min(yt, d) : d;
       }
     }
-  }, p = () => (we.current || (we.current = kn() || void 0), we.current), Ft = (e) => {
+  }, Ae = () => (ye.current || (ye.current = kn() || void 0), ye.current), Ft = (e) => {
     var l;
     if (e.target !== e.currentTarget)
       return;
-    clearTimeout(Ie.current), c.current && (c.current.table = y.current);
+    clearTimeout(Ee.current), c.current && (c.current.table = y.current);
     const n = e.currentTarget.scrollLeft, a = e.currentTarget.scrollTop;
-    t.columnVirtualization && (!((l = c.current) != null && l.scrollableVirtual) || a === Ee.current) && (Ie.current = window.setTimeout(() => {
-      ge();
-    }, 0)), O.current && O.current.setScrollLeft(n), W.current && W.current.setScrollLeft(n), c.current && a !== Ee.current && c.current.scrollHandler(e), xn(t.onScroll, e, w.current, void 0), Ee.current = a;
+    t.columnVirtualization && (!((l = c.current) != null && l.scrollableVirtual) || a === we.current) && (Ee.current = window.setTimeout(() => {
+      fe();
+    }, 0)), O.current && O.current.setScrollLeft(n), W.current && W.current.setScrollLeft(n), c.current && a !== we.current && c.current.scrollHandler(e), xn(t.onScroll, e, w.current, void 0), we.current = a;
   }, ze = (e) => {
     if (K.onKeyDown(e, {
       navigatable: t.navigatable || !1,
@@ -138,7 +138,7 @@ const kt = r.forwardRef((t, xt) => {
       navigationStateRef: D
     }), t.onKeyDown) {
       const { mode: n, cell: a } = ht(t.selectable), l = {
-        dataItems: re(),
+        dataItems: ne(),
         mode: n,
         cell: a,
         componentId: T(),
@@ -155,11 +155,11 @@ const kt = r.forwardRef((t, xt) => {
   }, Gt = (e) => {
     if (e.action === "moveToNextPage" && Lt(e.event), e.action === "moveToPrevPage" && Vt(e.event), e.focusElement && e.action === "reorderToRight") {
       const n = parseInt(e.focusElement.ariaColIndex, 10) - 1;
-      n < s.current.length - 1 && he(n, n + 1, e.event);
+      n < s.current.length - 1 && me(n, n + 1, e.event);
     }
     if (e.focusElement && e.action === "reorderToLeft") {
       const n = parseInt(e.focusElement.ariaColIndex, 10) - 1;
-      n > 0 && he(n, n - 1, e.event);
+      n > 0 && me(n, n - 1, e.event);
     }
     if (t.onNavigationAction) {
       const n = {
@@ -204,7 +204,7 @@ const kt = r.forwardRef((t, xt) => {
         endColIndex: i,
         startRowIndex: l,
         endRowIndex: l,
-        dataItems: re(),
+        dataItems: ne(),
         altKey: !1,
         ctrlKey: !1,
         shiftKey: !1,
@@ -223,7 +223,7 @@ const kt = r.forwardRef((t, xt) => {
       nativeEvent: e.syntheticEvent && e.syntheticEvent.nativeEvent,
       syntheticEvent: e.syntheticEvent,
       target: w.current,
-      dataItems: re(),
+      dataItems: ne(),
       selectedField: t.selectedField
     });
   }, Oe = (e) => {
@@ -233,7 +233,7 @@ const kt = r.forwardRef((t, xt) => {
         target: w.current,
         selectedField: t.selectedField || "",
         componentId: T(),
-        dataItems: re(),
+        dataItems: ne(),
         dataItem: null,
         startDataItem: n,
         endDataItem: a,
@@ -241,8 +241,8 @@ const kt = r.forwardRef((t, xt) => {
       };
       t.onSelectionChange.call(void 0, l);
     }
-  }, ee = (e, n, a) => {
-    ne(
+  }, p = (e, n, a) => {
+    te(
       t.onPageChange,
       { page: e },
       { skip: e.skip, take: e.take },
@@ -254,35 +254,35 @@ const kt = r.forwardRef((t, xt) => {
     return Array.isArray(t.data) ? e = e || t.data.length : t.data && (e = e || t.data.total), e;
   }, Lt = (e) => {
     const n = t.take || 0, a = (t.skip || 0) + n, l = Kt();
-    a < l && ee({ skip: a, take: n }, e);
+    a < l && p({ skip: a, take: n }, e);
   }, Vt = (e) => {
     const n = t.take || 0, a = (t.skip || 0) - n;
-    a >= 0 && ee({ skip: a, take: n }, e);
+    a >= 0 && p({ skip: a, take: n }, e);
   }, Bt = (e) => {
-    ee({ skip: e.skip, take: e.take }, e.syntheticEvent, e.targetEvent);
+    p({ skip: e.skip, take: e.take }, e.syntheticEvent, e.targetEvent);
   }, Wt = (e, n) => {
-    ne(
+    te(
       t.onSortChange,
       { sort: e },
       { sort: e, ...t.scrollable === "virtual" ? { skip: 0 } : {} },
       n
     );
   }, Pe = (e, n) => {
-    ne(
+    te(
       t.onFilterChange,
       { filter: e },
       { filter: e || void 0, skip: 0 },
       n
     );
-  }, te = (e, n) => {
+  }, ee = (e, n) => {
     const a = n.nativeEvent ? n : { nativeEvent: n.nativeEvent || n.originalEvent };
-    e.length === 0 && t.navigatable && (Ce.current = !0), ne(
+    e.length === 0 && t.navigatable && (Re.current = !0), te(
       t.onGroupChange,
       { group: e },
       { group: e, skip: 0 },
       a
     );
-  }, ne = (e, n, a, l, i) => {
+  }, te = (e, n, a, l, i) => {
     const u = t.onDataStateChange;
     if (e) {
       const d = { ...v(l), ...n, targetEvent: i };
@@ -296,7 +296,7 @@ const kt = r.forwardRef((t, xt) => {
           ...a
         }
       });
-  }, he = (e, n, a) => {
+  }, me = (e, n, a) => {
     const l = s.current[e], i = l.depth, u = (f) => {
       do
         f++;
@@ -305,9 +305,9 @@ const kt = r.forwardRef((t, xt) => {
     }, d = s.current.splice(e, u(e) - e);
     s.current.splice(e < n ? u(n - d.length) : n, 0, ...d), s.current.filter((f) => f.declarationIndex >= 0).forEach((f, P) => f.orderIndex = P);
     const h = s.current[e].locked && s.current[n].locked;
-    Fn(M.current, s.current, h || ce.current), Gn(M.current, s.current, h || ce.current), Re.current && (ce.current = !1, Re.current = !1);
+    Fn(M.current, s.current, h || oe.current), Gn(M.current, s.current, h || oe.current), be.current && (oe.current = !1, be.current = !1);
     const E = V();
-    if (ge(), t.onColumnReorder) {
+    if (fe(), t.onColumnReorder) {
       const f = {
         target: w.current,
         columns: E,
@@ -320,17 +320,17 @@ const kt = r.forwardRef((t, xt) => {
     if (t.group === void 0)
       return;
     const l = t.group.slice();
-    l.splice(n, 0, ...l.splice(e, 1)), te(l, a);
+    l.splice(n, 0, ...l.splice(e, 1)), ee(l, a);
   }, Ke = (e, n, a) => {
     const l = s.current[e].field;
     if (!l)
       return;
     const i = (t.group || []).slice();
-    i.splice(n, 0, { field: l }), te(i, a);
+    i.splice(n, 0, { field: l }), ee(i, a);
   }, Ut = (e, n) => {
     const a = g.current.getCurrentGroupsLength;
     Ke(e, a, n);
-  }, be = () => {
+  }, he = () => {
     let e = 0;
     if (!C.current.colGroupMain)
       return;
@@ -361,7 +361,7 @@ const kt = r.forwardRef((t, xt) => {
     const e = Hn(A()), n = e ? e.matches(".k-table-td") ? e : (i = A()) == null ? void 0 : i.body : (u = A()) == null ? void 0 : u.body, a = n.closest(".k-grid-container"), l = n && ((d = k.current) == null ? void 0 : d.contains(n));
     return !!(n && l && a);
   }, qt = (e, n, a, l, i, u) => {
-    be(), ce.current = !0, Re.current = !0, t.onColumnResize && t.onColumnResize.call(void 0, {
+    he(), oe.current = !0, be.current = !0, t.onColumnResize && t.onColumnResize.call(void 0, {
       columns: V(),
       nativeEvent: l,
       targetColumnId: u,
@@ -444,16 +444,16 @@ const kt = r.forwardRef((t, xt) => {
     nativeEvent: e && e.nativeEvent,
     syntheticEvent: e,
     target: w.current
-  }), re = () => R.current.filter((e) => e.rowType === "data").map((e) => e.dataItem), Le = () => (le.current || R.current).filter((e) => e.rowType === "data").map((e) => e.dataItem), tn = () => {
+  }), ne = () => R.current.filter((e) => e.rowType === "data").map((e) => e.dataItem), Le = () => (ae.current || R.current).filter((e) => e.rowType === "data").map((e) => e.dataItem), tn = () => {
     var e, n, a;
     if (U.current && ((e = U.current) == null ? void 0 : e.getElementsByClassName("k-grid-edit-row").length) > 0) {
-      ye.current = !1, (n = document.activeElement) != null && n.closest(".k-grid-edit-row") ? ve.current = document.activeElement : ve.current = void 0;
+      ve.current = !1, (n = document.activeElement) != null && n.closest(".k-grid-edit-row") ? Ce.current = document.activeElement : Ce.current = void 0;
       const l = Array.from((a = U.current) == null ? void 0 : a.getElementsByClassName("k-grid-edit-row"));
-      l.length > ke.current.length ? oe.current = l.filter(
-        (i) => !ke.current.includes(i)
-      )[0] : l.length === 1 && (oe.current = l[0], ye.current = !0), ke.current = l;
+      l.length > Se.current.length ? le.current = l.filter(
+        (i) => !Se.current.includes(i)
+      )[0] : l.length === 1 && (le.current = l[0], ve.current = !0), Se.current = l;
     }
-  }, g = r.useRef(), S = r.useRef(), D = r.useRef(), ae = r.useRef(), c = r.useRef(), C = r.useRef(), z = r.useRef(null), R = r.useRef([]), le = r.useRef(), s = r.useRef([]), M = r.useRef([[]]), Re = r.useRef(!1), Ce = r.useRef(!1), oe = r.useRef(), ve = r.useRef(), ye = r.useRef(!1), ce = r.useRef(!0), we = r.useRef(), Ee = r.useRef(0), Ie = r.useRef(), Se = r.useRef(), ke = r.useRef([]), W = r.useRef(null), O = r.useRef(null), Ve = r.useRef(null), k = r.useRef(null), y = r.useRef(null), _ = r.useRef(null), U = r.useRef(null), ie = r.useRef(null), nn = _n(), xe = vn(), m = xe && xe.uGrid ? xe.uGrid : yn, rn = wn(St), N = En(k);
+  }, g = r.useRef(), S = r.useRef(), D = r.useRef(), re = r.useRef(), c = r.useRef(), C = r.useRef(), z = r.useRef(null), R = r.useRef([]), ae = r.useRef(), s = r.useRef([]), M = r.useRef([[]]), be = r.useRef(!1), Re = r.useRef(!1), le = r.useRef(), Ce = r.useRef(), ve = r.useRef(!1), oe = r.useRef(!0), ye = r.useRef(), we = r.useRef(0), Ee = r.useRef(), Ie = r.useRef(), Se = r.useRef([]), W = r.useRef(null), O = r.useRef(null), Ve = r.useRef(null), k = r.useRef(null), y = r.useRef(null), _ = r.useRef(null), U = r.useRef(null), ce = r.useRef(null), nn = _n(), ke = vn(), m = ke && ke.uGrid ? ke.uGrid : yn, rn = wn(St), N = En(k);
   r.useMemo(() => {
     K.onConstructor({
       navigatable: !!t.navigatable,
@@ -466,39 +466,39 @@ const kt = r.forwardRef((t, xt) => {
     (a = c.current) == null || a.reset();
     const e = t.groupable === !0 || typeof t.groupable == "object" && t.groupable.enabled !== !1, n = Dt();
     c.current = new n(e || t.rowHeight === void 0 || t.rowHeight === 0);
-  }, [t.scrollable, t.total, t.filter, t.group, t.groupable, t.sort, t.rowHeight]), r.useEffect(() => (t.clipboard && (ae.current = new Tn($t), ae.current.addEventListeners(A())), () => {
-    ae.current && ae.current.removeEventListeners(A());
+  }, [t.scrollable, t.total, t.filter, t.group, t.groupable, t.sort, t.rowHeight]), r.useEffect(() => (t.clipboard && (re.current = new Tn($t), re.current.addEventListeners(A())), () => {
+    re.current && re.current.removeEventListeners(A());
   }), [t.onClipboard, t.clipboard]), r.useMemo(() => {
     C.current = new qn(qt);
   }, [t.onColumnResize]), r.useMemo(() => {
-    g.current = new Jn(he, _t, Ke);
-  }, [t.onColumnReorder, t.onGroupChange, t.group, t.groupable]), r.useEffect(() => (t.columnVirtualization && !window.navigator.userAgent.match(ir) && (ie.current && (ie.current.style.display = "block"), y.current && (y.current.style.display = "block")), be(), ct(p()), K.onComponentDidMount({
+    g.current = new Jn(me, _t, Ke);
+  }, [t.onColumnReorder, t.onGroupChange, t.group, t.groupable]), r.useEffect(() => (t.columnVirtualization && !window.navigator.userAgent.match(ir) && (ce.current && (ce.current.style.display = "block"), y.current && (y.current.style.display = "block")), he(), ct(Ae()), K.onComponentDidMount({
     scope: k.current || void 0,
     contextStateRef: S,
     navigationStateRef: D
   }), () => {
-    clearTimeout(Ie.current);
+    clearTimeout(Ee.current);
   }), []), r.useEffect(() => {
     var e;
-    be(), ct(p()), (e = c.current) != null && e.tableTransform && c.current.table && (c.current.table.style.transform = c.current.tableTransform, c.current.tableTransform = ""), tn(), K.onComponentDidUpdate({
+    he(), ct(Ae()), (e = c.current) != null && e.tableTransform && c.current.table && (c.current.table.style.transform = c.current.tableTransform, c.current.tableTransform = ""), tn(), K.onComponentDidUpdate({
       scope: k.current || void 0,
       contextStateRef: S,
       navigationStateRef: D,
-      focusFirst: Ce.current,
-      newEditableRow: oe.current,
-      singleEditRow: ye.current,
-      lastActiveElement: ve.current,
+      focusFirst: Re.current,
+      newEditableRow: le.current,
+      singleEditRow: ve.current,
+      lastActiveElement: Ce.current,
       navigatable: t.navigatable
-    }), Ce.current = !1, oe.current = void 0;
+    }), Re.current = !1, le.current = void 0;
   }), r.useEffect(() => {
     if (Q) {
       const e = {
         rootMargin: "0px",
         threshold: 0.9
       };
-      z.current = window.IntersectionObserver && new window.IntersectionObserver(Fe, e) || null;
+      z.current = window.IntersectionObserver && new window.IntersectionObserver(Ne, e) || null;
     }
-  }, [Fe]), r.useEffect(() => {
+  }, [Ne]), r.useEffect(() => {
     let e;
     return Q && window.ResizeObserver && (e = new window.ResizeObserver(Tt), e.observe(k.current)), () => {
       e == null || e.disconnect();
@@ -520,12 +520,12 @@ const kt = r.forwardRef((t, xt) => {
         if (!((l = c.current) != null && l.container) || t.scrollable === "none")
           return;
         const { rowIndex: n } = e;
-        Se.current = n;
+        Ie.current = n;
         const a = Z();
         if (z.current && a) {
           z.current.disconnect();
-          const i = a.querySelector(`[absolute-row-index="${Se.current}"]`);
-          i ? z.current.observe(i) : fe(e);
+          const i = a.querySelector(`[absolute-row-index="${Ie.current}"]`);
+          i ? z.current.observe(i) : se(e);
         }
       },
       fitColumns: (e) => {
@@ -535,10 +535,10 @@ const kt = r.forwardRef((t, xt) => {
   ), r.useImperativeHandle(xt, () => w.current);
   let F = t.total || 0;
   const $ = L.getIdPrefix(D), { size: x = "medium" } = t;
-  let He = [];
-  Array.isArray(t.data) ? (He = t.data, F = F || t.data.length) : t.data && (He = t.data.data, F = F || t.data.total);
+  let xe = [];
+  Array.isArray(t.data) ? (xe = t.data, F = F || t.data.length) : t.data && (xe = t.data.data, F = F || t.data.total);
   const an = typeof t.groupable == "object" && t.groupable.footer || "none", j = t.scrollable === "virtual", { resolvedGroupsCount: ln, flattedData: on } = Jt(
-    He,
+    xe,
     an,
     t.skip || 0,
     t.group,
@@ -557,14 +557,14 @@ const kt = r.forwardRef((t, xt) => {
     Bn,
     {
       group: t.group || [],
-      groupChange: te,
+      groupChange: ee,
       pressHandler: g.current.pressHandler,
       dragHandler: g.current.dragHandler,
       releaseHandler: g.current.releaseHandler,
       refCallback: g.current.refGroupPanelDiv,
       resolveTitle: pt,
       ariaControls: T(),
-      onContextMenu: me
+      onContextMenu: ge
     }
   ), $e = /* @__PURE__ */ r.createElement(
     Kn,
@@ -576,7 +576,6 @@ const kt = r.forwardRef((t, xt) => {
         var e;
         return ((e = c.current) == null ? void 0 : e.container) || null;
       },
-      hasScrollbarWidth: !!p(),
       draggable: t.reorderable || q,
       ref: O,
       elemRef: Ve,
@@ -589,7 +588,7 @@ const kt = r.forwardRef((t, xt) => {
           sortChange: Wt,
           group: t.group || [],
           groupable: q,
-          groupChange: te,
+          groupChange: ee,
           filter: t.filter,
           filterable: t.filterable,
           filterOperators: t.filterOperators || It,
@@ -628,7 +627,7 @@ const kt = r.forwardRef((t, xt) => {
           ariaRowIndex: M.current.length + 1
         }
       ) || void 0,
-      cols: H.map((e, n) => /* @__PURE__ */ r.createElement("col", { key: n.toString(), width: Ne(e) }))
+      cols: H.map((e, n) => /* @__PURE__ */ r.createElement("col", { key: n.toString(), width: De(e) }))
     }
   ), dn = c.current && c.current.container && c.current.container.scrollLeft || 0, un = parseFloat(((t.style || {}).width || "").toString()), { colSpans: sn, hiddenColumns: fn } = Dn({
     enabled: t.columnVirtualization,
@@ -648,17 +647,17 @@ const kt = r.forwardRef((t, xt) => {
           const I = wt(t.editField, e.dataItem);
           I && (I === !0 || I === d.field) && (i = !0, X = !0);
         }
-        const G = d.cell || X && Pn || er, De = t.expandField && t.detail && d.field === t.expandField;
+        const G = d.cell || X && Pn || er, Te = t.expandField && t.detail && d.field === t.expandField;
         return /* @__PURE__ */ r.createElement(
           G,
           {
-            onContextMenu: me,
+            onContextMenu: ge,
             key: E,
             locked: t.lockGroups,
             id: L.generateNavigatableId(
               `${n}-${String(h)}`,
               $,
-              De || e.rowType === "groupHeader" || e.rowType === "groupFooter" || d.field === "value" ? "nodata" : "cell"
+              Te || e.rowType === "groupHeader" || e.rowType === "groupFooter" || d.field === "value" ? "nodata" : "cell"
             ),
             colSpan: sn[h],
             dataItem: e.dataItem,
@@ -706,17 +705,17 @@ const kt = r.forwardRef((t, xt) => {
     }
   const qe = (e) => e >= R.current.length - je;
   let Je = ((nt = c.current) == null ? void 0 : nt.realSkip) || 0;
-  const de = [];
-  let Te = !1;
+  const ie = [];
+  let He = !1;
   const Xe = M.current.length + (t.filterable ? 1 : 0) + 1;
   let J = 0;
   if (R.current.length) {
     let e = -1, n = 0;
-    (le.current || R.current).forEach((a, l) => {
+    (ae.current || R.current).forEach((a, l) => {
       var P, X;
       a.rowType === "data" && (Je++, e++);
       const i = Je % 2 === 0, u = t.dataItemKey && In(t.dataItemKey)(a.dataItem), d = l + (((P = c.current) == null ? void 0 : P.realSkip) || 0), h = u || "ai" + d, E = h + "_1", f = gn(a, h, e, i);
-      if (J = d + Xe + n, de.push(
+      if (J = d + Xe + n, ie.push(
         /* @__PURE__ */ r.createElement(
           tr,
           {
@@ -740,7 +739,7 @@ const kt = r.forwardRef((t, xt) => {
         )
       ), t.detail && a.rowType === "data" && a.expanded) {
         const G = H.length - (t.expandField ? 1 : 0) - (t.group ? t.group.length : 0) || 1;
-        n++, J = d + Xe + n, de.push(
+        n++, J = d + Xe + n, ie.push(
           /* @__PURE__ */ r.createElement(
             "tr",
             {
@@ -753,7 +752,7 @@ const kt = r.forwardRef((t, xt) => {
               role: "row",
               "aria-rowindex": J
             },
-            t.group && t.group.map((De, I) => {
+            t.group && t.group.map((Te, I) => {
               var ot;
               const Y = (ot = f == null ? void 0 : f.row[I]) == null ? void 0 : ot.props.style, bn = Y ? N !== "rtl" ? { left: Y.left, right: Y.right } : { left: Y.right, right: Y.left } : {};
               return /* @__PURE__ */ r.createElement(
@@ -761,7 +760,7 @@ const kt = r.forwardRef((t, xt) => {
                 {
                   id: "",
                   dataIndex: a.dataIndex,
-                  field: De.field,
+                  field: Te.field,
                   dataItem: a.dataItem,
                   key: I,
                   style: bn,
@@ -782,7 +781,7 @@ const kt = r.forwardRef((t, xt) => {
             /* @__PURE__ */ r.createElement(
               or,
               {
-                onContextMenu: me,
+                onContextMenu: ge,
                 dataItem: a.dataItem,
                 dataIndex: a.dataIndex,
                 colSpan: G,
@@ -796,7 +795,7 @@ const kt = r.forwardRef((t, xt) => {
       }
     });
   } else
-    Te = !0;
+    He = !0;
   const mn = () => {
     const e = O.current;
     return e && e.table() && e.table().clientWidth;
@@ -816,7 +815,7 @@ const kt = r.forwardRef((t, xt) => {
     take: (t.take !== void 0 ? t.take : t.pageSize) || 10,
     messagesMap: Un,
     ...lr(t.pageable || {})
-  }, Ze = t.pager ? /* @__PURE__ */ r.createElement(t.pager, { ...Qe }) : /* @__PURE__ */ r.createElement(Nn, { className: b(m.pager({})), ...Qe }), hn = (e, n) => /* @__PURE__ */ r.createElement("col", { key: n.toString(), width: Ne(e) }), pe = (at = t.cells) != null && at.footerCell || s.current.some((e) => {
+  }, Ze = t.pager ? /* @__PURE__ */ r.createElement(t.pager, { ...Qe }) : /* @__PURE__ */ r.createElement(Nn, { className: b(m.pager({})), ...Qe }), hn = (e, n) => /* @__PURE__ */ r.createElement("col", { key: n.toString(), width: De(e) }), pe = (at = t.cells) != null && at.footerCell || s.current.some((e) => {
     var n;
     return !!(e.footerCell || (n = e.cells) != null && n.footerCell);
   }) ? /* @__PURE__ */ r.createElement(
@@ -825,7 +824,6 @@ const kt = r.forwardRef((t, xt) => {
       size: x,
       columnResize: C.current,
       staticHeaders: t.scrollable !== "none",
-      hasScrollbarWidth: !!p(),
       ref: W,
       row: /* @__PURE__ */ r.createElement(
         ar,
@@ -851,7 +849,7 @@ const kt = r.forwardRef((t, xt) => {
       {
         key: n.toString(),
         className: Ct(e.field, t.sort) ? b(m.sorted({})) : void 0,
-        width: Ne(e)
+        width: De(e)
       }
     ))
   ), tt = g.current.reorderable || g.current.groupable;
@@ -859,7 +857,7 @@ const kt = r.forwardRef((t, xt) => {
     return /* @__PURE__ */ r.createElement(dt.Provider, { value: S.current }, /* @__PURE__ */ r.createElement(
       "div",
       {
-        id: t.id || se,
+        id: t.id || ue,
         style: t.style,
         className: b(m.wrapper({ size: x }), t.className),
         ref: k,
@@ -876,28 +874,28 @@ const kt = r.forwardRef((t, xt) => {
           selectable: t.selectable,
           onRelease: Oe,
           childRef: (e) => {
-            y.current = e, ie.current = e;
+            y.current = e, ce.current = e;
           }
         },
-        /* @__PURE__ */ r.createElement("table", { ref: ie, className: b(m.table({ size: x })) }, et, $e, /* @__PURE__ */ r.createElement(
+        /* @__PURE__ */ r.createElement("table", { ref: ce, className: b(m.table({ size: x })) }, et, $e, /* @__PURE__ */ r.createElement(
           "tbody",
           {
             role: "rowgroup",
             className: b(m.tbody({})),
             ...ft
           },
-          de
+          ie
         ), pe)
       ),
-      Te && Ye(),
+      He && Ye(),
       tt && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(gt, { ref: g.current.refDropElementClue }), /* @__PURE__ */ r.createElement(mt, { ref: g.current.refDragElementClue }))
     ), _e, t.pageable && Ze);
-  let ue = t.style || {};
-  return j && (ue.height || (ue = Object.assign({}, ue, { height: "450px" }))), /* @__PURE__ */ r.createElement(dt.Provider, { value: S.current }, /* @__PURE__ */ r.createElement(
+  let de = t.style || {};
+  return j && (de.height || (de = Object.assign({}, de, { height: "450px" }))), /* @__PURE__ */ r.createElement(dt.Provider, { value: S.current }, /* @__PURE__ */ r.createElement(
     "div",
     {
-      id: t.id || se,
-      style: ue,
+      id: t.id || ue,
+      style: de,
       className: b(
         m.wrapper({
           size: x,
@@ -962,10 +960,10 @@ const kt = r.forwardRef((t, xt) => {
                 role: "rowgroup",
                 ...ft
               },
-              de
+              ie
             )
           )
-        ), Te && Ye()),
+        ), He && Ye()),
         j && /* @__PURE__ */ r.createElement("div", { className: b(m.heightContainer({})), role: "presentation" }, /* @__PURE__ */ r.createElement(
           "div",
           {