@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
865 lines (864 loc) • 32.7 kB
JavaScript
/**
* @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 i from "react";
import { canUseDOM as Z, getActiveElement as At, useDir as Ht, setScrollbarWidth as Ae, cloneArray as Ft, getter as p, RowHeightService as He } from "@progress/kendo-react-common";
import { getSelectionOptions as ee, populateClipboardData as Lt, ClipboardActionType as he, getEditableOptions as Gt, tableKeyboardNavigation as T, ClipboardService as zt, TableKeyboardNavigationContext as Nt, editReducer as Ot, EDIT_ACTION as Bt, getDetailExpandableOptions as Ut, detailExpandReducer as Fe, getGroupExpandableOptions as Vt, groupExpandReducer as _t, DETAIL_EXPAND_ACTION as Wt, getSelectedState as Le, getSelectedStateFromKeyDown as jt, closestTagName as Ge, getColumnIndex as qt, getRowIndex as Xt, updateLeft as $t, updateRight as Jt } from "@progress/kendo-react-data-tools";
import { ColumnResize as Yt } from "./drag/ColumnResize.mjs";
import { CommonDragLogic as Qt } from "./drag/CommonDragLogic.mjs";
import { SAFARI_REGEX as Zt } from "./constants/index.mjs";
import { getDefaultHeadContextMenuItems as pt, getDefaultBodyContextMenuItems as en, isRowReorderEnabled as tn, sanitizeColumns as nn, getDataAsArray as rn, getFlatColumnsState as an, firefox as ze, firefoxMaxHeight as Ne } from "./utils/index.mjs";
import { VirtualScrollFixed as Oe } from "./VirtualScrollFixed.mjs";
import { VirtualScroll as on } from "./VirtualScroll.mjs";
import { GridContextMenu as dn } from "./contextMenu/GridContextMenu.mjs";
import { GridContextMenuAnchorPart as Be } from "./contextMenu/enums.mjs";
import { normalizeSortable as cn, firstLevelSortSeqMap as ln } from "./sortCommon.mjs";
const sn = i.createContext(void 0), wn = (t) => {
var Te, Me;
const w = t.gridProps.isClient, [I, be] = i.useState({}), Ue = (e) => {
e.event.preventDefault(), be({
...I,
show: !0,
offset: {
left: e.event.pageX,
top: e.event.pageY
},
dataItem: e.dataItem,
field: e.field
});
}, Ie = () => {
be({});
}, m = i.useMemo(() => t.columnsRef.find((e) => e.field === I.field), [t.columnsRef, I]), Re = i.useMemo(() => {
const e = t.gridProps.sortable && (m == null ? void 0 : m.sortable);
return pt({
sortable: !!e,
selectable: ee(t.gridProps.selectable).enabled,
clipboard: !!t.gridProps.clipboard
});
}, [m, t.gridProps.sortable, t.gridProps.selectable, t.gridProps.clipboard]), Ce = i.useMemo(() => {
const e = t.gridProps.sortable && (m == null ? void 0 : m.sortable);
return en({
sortable: !!e,
selectable: ee(t.gridProps.selectable).enabled,
clipboard: !!t.gridProps.clipboard,
rowReorderable: tn(t.gridProps.rowReorderable)
});
}, [m, t.gridProps.sortable, t.gridProps.selectable, t.gridProps.clipboard]), Ve = i.useMemo(() => {
const e = (m == null ? void 0 : m.contextMenu) || t.gridProps.contextMenu, n = typeof e == "function" ? e(I) : e;
if (n && I.offset) {
const r = I.dataItem ? Be.body : Be.head, a = n[r], o = I.dataItem ? Ce : Re;
return a === !1 ? void 0 : a === !0 || a === void 0 ? o : a;
}
}, [t.gridProps.contextMenu, I, Ce, Re, m]), _e = (e) => {
var l, u, g, f, C, Q, b, N, O;
const n = e.event.item, r = {
target: R.current,
syntheticEvent: e.event.syntheticEvent,
nativeEvent: e.event.nativeEvent,
menuItem: n,
...e
};
t.gridProps.onContextMenuItemClick && s(t.gridProps.onContextMenuItemClick, r);
const a = j(), o = {
selectedField: t.gridProps.selectedField || "",
componentId: t.id,
dataItems: a,
dataItem: e.dataItem,
startRowIndex: -1,
endRowIndex: -1,
startColIndex: -1,
endColIndex: -1,
ctrlKey: !1,
altKey: !1,
metaKey: !1,
shiftKey: !1,
isDrag: !1,
...ee(t.gridProps.selectable),
...r
}, d = a.findIndex((B) => B === e.dataItem);
switch ((l = n.data) == null ? void 0 : l.action) {
case "SortCommand":
if (m) {
const B = (u = n.name) == null ? void 0 : u.toLowerCase().includes("asc"), Kt = ((g = n.name) == null ? void 0 : g.toLowerCase().includes("desc")) ? "desc" : void 0, Tt = B ? "asc" : Kt, Mt = n.name ? Tt : void 0;
ve(e.event.syntheticEvent, m, Mt);
}
break;
case "SelectRowCommand":
it(o);
break;
case "SelectAllRowsCommand":
ot(o);
break;
case "ClearSelectionCommand":
dt(o);
break;
case "ReorderRowCommand":
z.current = e.dataItem, (f = n.name) != null && f.toLowerCase().includes("rowup") && d > 0 && A(e.event.syntheticEvent, d - 1, "before"), (C = n.name) != null && C.toLowerCase().includes("rowdown") && d < a.length - 1 && A(e.event.syntheticEvent, d + 1, "after"), (Q = n.name) != null && Q.toLowerCase().includes("rowtop") && A(e.event.syntheticEvent, 0, "before"), (b = n.name) != null && b.toLowerCase().includes("rowbottom") && A(e.event.syntheticEvent, a.length - 1, "after");
break;
case "CopySelectionCommand":
W(
he.copy,
e.event.nativeEvent,
{
copyHeaders: !((N = n.name) != null && N.toLowerCase().includes("noheaders"))
},
e.dataItem,
e.field
);
break;
case "PasteCommand":
W(
he.paste,
e.event.nativeEvent,
{
copyHeaders: !((O = n.name) != null && O.toLowerCase().includes("noheaders"))
},
e.dataItem,
e.field
);
break;
}
Ie();
}, U = () => {
const e = t.columnsRef.filter((n) => n.declarationIndex >= 0 && n.parentIndex === -1);
return nn(e);
}, We = (e, n, r) => {
if (t.gridProps.onContextMenu && w) {
const a = {
target: R.current,
syntheticEvent: e,
nativeEvent: e.nativeEvent,
dataItem: n,
field: r
};
s(t.gridProps.onContextMenu, a);
}
t.gridProps.contextMenu && Ue({
event: e,
dataItem: n,
field: r
});
}, je = (e) => {
if (e.target !== e.currentTarget)
return;
clearTimeout(fe.current), c.current && (c.current.table = x.current);
const n = e.currentTarget.scrollLeft, r = e.currentTarget.scrollTop, a = t.gridProps.scrollable === "virtual";
t.gridProps.columnVirtualization && (!a || r === ge.current) && (fe.current = window.setTimeout(() => {
ie();
}, 0)), t.gridProps.scrollLeftRef && (t.gridProps.scrollLeftRef.current = n), G.current && G.current.setScrollLeft(n), L.current && L.current.setScrollLeft(n), c.current && r !== ge.current && c.current.scrollHandler(e), t.gridProps.onScroll && w && s(t.gridProps.onScroll, {
...P(e)
}), ge.current = r;
}, qe = (e) => {
T.onKeyDown(e, {
navigatable: t.gridProps.navigatable || !1,
contextStateRef: y,
navigationStateRef: k,
onNavigationAction: $e,
columns: U()
}), T.onGetSnapshotBeforeUpdate({
document: v(),
contextStateRef: y,
navigationStateRef: k
});
const n = {
dataItems: H(),
mode: h.mode,
cell: h.cell,
componentId: t.id,
selectedField: t.gridProps.selectedField,
...P(e)
};
t.gridProps.onKeyDown && w && s(t.gridProps.onKeyDown, n);
}, Xe = (e) => {
T.onFocus(e, {
navigatable: !!t.gridProps.navigatable,
contextStateRef: y
});
}, $e = (e) => {
if (e.action === "moveToNextPage" && lt(e.event), e.action === "moveToPrevPage" && st(e.event), e.focusElement && e.action === "reorderToRight") {
const n = parseInt(e.focusElement.ariaColIndex, 10) - 1;
n < t.columnsRef.length - 1 && re(n, n + 1, e.event);
}
if (e.focusElement && e.action === "reorderToLeft") {
const n = parseInt(e.focusElement.ariaColIndex, 10) - 1;
n > 0 && re(n, n - 1, e.event);
}
if (e.action === "select" && nt(e.event), t.gridProps.onNavigationAction && w) {
const n = {
focusElement: e.focusElement,
...P(e.event)
};
s(t.gridProps.onNavigationAction, n);
}
}, Je = (e, n) => {
t.gridProps.onRowClick && e.target.nodeName === "TD" && s(t.gridProps.onRowClick, {
dataItem: n,
...P(e)
});
}, Ye = (e, n) => {
t.gridProps.onRowDoubleClick && e.target.nodeName === "TD" && s(t.gridProps.onRowDoubleClick, {
dataItem: n,
...P(e)
});
}, Qe = (e, n, r) => {
if (De.enabled && De.mode === "incell" && t.gridProps.dataItemKey) {
const a = Ot(t.gridProps.edit, {
type: Bt.ENTER_FIELD_EDIT,
payload: { id: n[t.gridProps.dataItemKey], field: r }
});
t.gridProps.onEditChange && s(t.gridProps.onEditChange, {
edit: a,
...P(e)
});
}
}, Ze = (e, n) => {
var a;
if (Ut(t.detailExpandable).enabled) {
const o = Fe((a = t.gridProps.detailExpand) != null ? a : {}, e);
t.gridProps.onDetailExpandChange && s(t.gridProps.onDetailExpandChange, {
...P(n),
detailExpand: o
});
}
}, pe = (e, n) => {
var a;
const r = Vt(
typeof t.gridProps.groupable == "object" ? t.gridProps.groupable.expandable !== !1 : t.gridProps.groupable
);
if (r.enabled) {
const o = _t((a = t.gridProps.groupExpand) != null ? a : [], e, r);
t.gridProps.onGroupExpandChange && s(t.gridProps.onGroupExpandChange, {
...P(n),
groupExpand: o
});
}
}, ve = (e, n, r) => {
const { allowUnsort: a, mode: o } = cn(
t.gridProps.sortable || !1,
n.sortable || !1
), d = (t.gridProps.sort || []).filter((g) => g.field === n.field)[0], l = r || ln[a][d && d.dir || ""], u = o === "single" ? [] : (t.gridProps.sort || []).filter((g) => g.field !== n.field);
l !== "" && n.field && u.push({ field: n.field, dir: l }), Ee(u, e);
}, et = (e) => {
var n;
if (e.field === t.gridProps.expandField || e._expand || t.gridProps.group && e.field === void 0) {
if (t.gridProps.onExpandChange) {
const r = t.gridProps.dataItemKey ? Fe((n = t.gridProps.detailExpand) != null ? n : {}, {
type: Wt.SET,
id: e.dataItem[t.gridProps.dataItemKey],
payload: e.value
}) : t.gridProps.detailExpand;
s(t.gridProps.onExpandChange, {
...P(e.syntheticEvent),
expand: r,
dataItem: e.dataItem,
dataIndex: e.dataIndex,
value: e.value
});
}
return;
}
t.gridProps.onItemChange && s(t.gridProps.onItemChange, {
...P(e.syntheticEvent),
dataItem: e.dataItem,
dataIndex: e.dataIndex,
field: e.field,
value: e.value
});
}, tt = (e) => {
var n;
if (t.gridProps.onSelectionChange && h.enabled) {
const { event: r, dataItem: a, dataIndex: o, columnIndex: d } = e, l = {
...P(r.syntheticEvent),
dataItem: a,
startColIndex: d,
endColIndex: d,
startRowIndex: o,
endRowIndex: o,
dataItems: H(),
altKey: !1,
ctrlKey: !1,
shiftKey: !1,
metaKey: !1,
mode: h.mode,
cell: h.cell,
isDrag: !1,
componentId: t.id,
selectedField: t.gridProps.selectedField || ""
};
s(t.gridProps.onSelectionChange, {
...l,
select: t.gridProps.dataItemKey ? Le({
event: l,
selectedState: (n = t.gridProps.select) != null ? n : {},
dataItemKey: t.gridProps.dataItemKey
}) : {}
});
}
}, nt = (e) => {
var g, f;
if (t.gridProps.selectedField || !h.enabled || !t.gridProps.dataItemKey)
return;
const n = {
dataItems: H(),
mode: h.mode,
cell: h.cell,
componentId: t.id,
selectedField: t.gridProps.selectedField,
...P(e)
}, r = jt({
event: n,
selectedState: (g = t.gridProps.select) != null ? g : {},
dataItemKey: t.gridProps.dataItemKey
});
if (r === t.gridProps.select)
return;
const a = e.target, o = Ge(a, "TD"), d = Ge(a, "TR"), l = qt(o), u = Xt(d);
if (l !== void 0 && u !== void 0) {
const C = (f = rn(t.gridProps.data)) == null ? void 0 : f[u];
t.gridProps.onSelectionChange && s(t.gridProps.onSelectionChange, {
...n,
select: r,
dataItem: C,
startRowIndex: u,
startColIndex: l,
startDataItem: C,
endDataItem: C,
endRowIndex: u,
endColIndex: l,
ctrlKey: e.ctrlKey,
altKey: e.altKey,
metaKey: e.metaKey,
shiftKey: e.shiftKey,
isDrag: !1
});
}
}, rt = (e) => {
var n;
if (t.gridProps.onHeaderSelectionChange && h.enabled) {
const r = H();
s(t.gridProps.onHeaderSelectionChange, {
select: e.syntheticEvent.target.checked ? r.reduce((a, o) => (t.gridProps.dataItemKey && p(t.gridProps.dataItemKey)(o) !== void 0 && (a[p(t.gridProps.dataItemKey)(o)] = !0), a), {}) : {},
field: e.field,
nativeEvent: e.syntheticEvent && e.syntheticEvent.nativeEvent,
syntheticEvent: e.syntheticEvent,
target: R.current,
dataItems: r,
selectedField: (n = t.gridProps.selectedField) != null ? n : ""
});
}
}, V = (e, n) => {
t.gridProps.onSelectionChange && h.enabled && s(t.gridProps.onSelectionChange, {
...e,
select: n
});
}, at = (e) => {
var n;
if (t.gridProps.onSelectionChange && h.enabled) {
const r = j()[e.startRowIndex], a = j()[e.endRowIndex], o = {
syntheticEvent: void 0,
target: R.current,
selectedField: t.gridProps.selectedField || "",
componentId: t.id,
dataItems: H(),
dataItem: null,
startDataItem: r,
endDataItem: a,
...e
}, d = Le({
event: o,
selectedState: (n = t.gridProps.select) != null ? n : {},
// Thats kinda strange, even through the `dataItemKey` is required by the `getSelectedState`
// it does work correctly even without it
dataItemKey: t.gridProps.dataItemKey
});
V(o, d);
}
}, ot = (e) => {
if (t.gridProps.onSelectionChange && h.enabled) {
const n = e.dataItems[0], r = e.dataItems[e.dataItems.length - 1], a = {}, o = {
...e,
startDataItem: n,
endDataItem: r,
startRowIndex: 0,
endRowIndex: e.dataItems.length - 1,
startColIndex: 0,
endColIndex: t.columnsRef.length - 1
};
e.dataItems.forEach((d) => {
const u = p(t.gridProps.dataItemKey)(d);
a[u] = e.cell ? [...Array(t.columnsRef.length).keys()] : !0;
}), V(o, a);
}
}, it = (e) => {
if (t.gridProps.onSelectionChange && h.enabled) {
const r = p(t.gridProps.dataItemKey)(e.dataItem), a = 0, o = t.columnsRef.length - 1, d = e.dataItems.findIndex(
(C) => C[t.gridProps.dataItemKey] === e.dataItem[t.gridProps.dataItemKey]
), g = {
...e,
startDataItem: d,
endDataItem: d,
startRowIndex: d,
endRowIndex: d,
startColIndex: a,
endColIndex: o
}, f = e.mode === "multiple" ? t.gridProps.select || {} : {};
f[r] === !0 || Array.isArray(f[r]) && f[r].length === t.columnsRef.length ? delete f[r] : f[r] = e.cell ? [...Array(t.columnsRef.length).keys()] : !0, V(g, f);
}
}, dt = (e) => {
t.gridProps.onSelectionChange && h.enabled && V(e, {});
}, M = (e, n, r, a, o) => {
const d = t.gridProps.onDataStateChange;
if (e) {
const l = { ...P(a), ...n, targetEvent: o };
s(e, l);
} else d && s(d, {
...P(a),
targetEvent: o || {},
dataState: {
...It(),
...r
}
});
}, _ = (e, n, r) => {
M(
t.gridProps.onPageChange,
{ page: e },
{ skip: e.skip, take: e.take },
n,
r
);
}, ct = () => {
let e = t.gridProps.total || 0;
return Array.isArray(t.gridProps.data) ? e = e || t.gridProps.data.length : t.gridProps.data && (e = e || t.gridProps.data.total), e;
}, lt = (e) => {
var o, d;
const n = (d = (o = t.gridProps.take) != null ? o : t.gridProps.pageSize) != null ? d : 0, r = (t.gridProps.skip || 0) + n, a = ct();
r < a && _({ skip: r, take: n }, e);
}, st = (e) => {
var a, o;
const n = (o = (a = t.gridProps.take) != null ? a : t.gridProps.pageSize) != null ? o : 0, r = (t.gridProps.skip || 0) - n;
r >= 0 && _({ skip: r, take: n }, e);
}, ut = (e) => {
_({ skip: e.skip, take: e.take }, e.syntheticEvent, e.targetEvent);
}, Ee = (e, n) => {
M(
t.gridProps.onSortChange,
{ sort: e },
{ sort: e, ...t.gridProps.scrollable === "virtual" ? { skip: 0 } : {} },
n
);
}, gt = (e, n) => {
M(
t.gridProps.onFilterChange,
{ filter: e },
{ filter: e || void 0, skip: 0 },
n
);
}, ft = (e) => {
const n = t.gridProps.searchFields || t.columnsRef.map((o) => o.field) || [], r = e.nativeEvent.target.value, a = {
logic: "or",
filters: n.filter((o) => o !== void 0).map((o) => {
var d;
return typeof o == "string" ? { field: o, value: r, operator: "contains" } : {
value: r,
operator: (d = o.operator) != null ? d : "contains",
field: o.field,
ignoreCase: o.ignoreCase
};
})
};
M(
t.gridProps.onSearchChange,
{
search: a
},
{},
e.syntheticEvent
);
}, te = (e, n) => {
const r = n.nativeEvent ? n : { nativeEvent: n.nativeEvent || n.originalEvent };
e.length === 0 && t.gridProps.navigatable && (le.current = !0), M(
t.gridProps.onGroupChange,
{ group: e },
{ group: e, skip: 0 },
r
);
}, ne = (e) => {
if (t.gridProps.onColumnsStateChange) {
const n = {
target: R.current,
columnsState: e
};
s(t.gridProps.onColumnsStateChange, n);
}
}, re = (e, n, r) => {
const { columnsRef: a, columnsState: o } = t, d = a[e], l = an(o), u = d.depth, g = (b) => {
do
b++;
while (b < a.length && a[b].depth > u);
return b;
}, f = a.splice(e, g(e) - e);
a.splice(e < n ? g(n - f.length) : n, 0, ...f), a.filter((b) => b.declarationIndex >= 0).forEach((b, N) => {
b.orderIndex = N;
const O = l.find((B) => B.id === b.id);
O && (O.orderIndex = N);
});
const C = a[e].locked && a[n].locked;
$t(t.columnsMapRef, a, C || Y.current), Jt(t.columnsMapRef, a, C || Y.current), ce.current && (Y.current = !1, ce.current = !1);
const Q = U();
if (ie(), t.gridProps.onColumnReorder) {
const b = {
target: R.current,
columns: Q,
columnId: d.id,
nativeEvent: r
};
s(t.gridProps.onColumnReorder, b);
}
ne(o);
}, A = (e, n, r) => {
const a = typeof t.gridProps.rowReorderable == "object" ? t.gridProps.rowReorderable.enabled : t.gridProps.rowReorderable;
if (r === "forbidden" || !a || !z.current)
return;
const { slicedData: o, dataRef: d } = t, l = (o || d)[n];
t.gridProps.onRowReorder && s(t.gridProps.onRowReorder, {
draggedDataItems: [z.current],
droppedDataItem: l == null ? void 0 : l.dataItem,
dropPosition: r,
nativeEvent: e.originalEvent,
dragEvent: e,
target: R.current
}), z.current = null;
}, mt = (e, n, r) => {
if (t.gridProps.group === void 0)
return;
const a = t.gridProps.group.slice();
a.splice(n, 0, ...a.splice(e, 1)), te(a, r);
}, we = (e, n, r) => {
const a = t.columnsRef[e].field;
if (!a)
return;
const o = (t.gridProps.group || []).slice();
o.splice(n, 0, { field: a }), te(o, r);
}, Pt = (e, n) => {
const r = S.current.getCurrentGroupsLength;
we(e, r, n);
}, ae = () => {
let e = 0;
if (!E.current.colGroupMain)
return;
const n = E.current.colGroupMain.children;
for (let r = 0; r < n.length; r++) {
const a = n[r].width;
if (!a) {
e = 0;
break;
}
e += parseFloat(a.toString());
}
e = Math.round(e), G.current && G.current.setWidth(e), L.current && L.current.setWidth(e), x.current && (x.current.style.width = e ? e + "px" : "");
}, W = i.useCallback(
(e, n, r, a, o) => {
var g;
if (!ht() && !r || !e)
return;
const d = {
type: e,
nativeEvent: n,
columns: t.columnsRef,
dataItemKey: t.gridProps.dataItemKey || "",
dataItem: a,
field: o,
...typeof t.gridProps.clipboard != "boolean" ? t.gridProps.clipboard : {},
...r
}, l = j(), u = Lt({
event: d,
data: l,
selectedState: (g = t.gridProps.select) != null ? g : {},
previousCopiedItems: Se.current
});
e !== he.paste && (Se.current = u.copiedItems), t.gridProps.onClipboard && w && s(t.gridProps.onClipboard, {
...d,
...u
});
},
[
t.gridProps.select,
t.gridProps.dataItemKey,
t.gridProps.data,
t.gridProps.clipboard,
t.gridProps.onClipboard
]
), ht = () => {
var o, d, l;
if (!Z)
return !1;
const e = At(v()), n = e ? e.matches(".k-table-td") ? e : (o = v()) == null ? void 0 : o.body : (d = v()) == null ? void 0 : d.body, r = n.closest(".k-grid-container"), a = n && ((l = K.current) == null ? void 0 : l.contains(n));
return !!(n && a && r);
}, bt = (e, n, r, a, o, d, l) => {
ae(), Y.current = !0, ce.current = !0, t.gridProps.onColumnResize && w && s(t.gridProps.onColumnResize, {
columns: U(),
nativeEvent: a,
targetColumnId: l,
index: e,
newWidth: n,
oldWidth: r,
end: o,
target: R.current
}), o && ne(d);
}, It = () => {
var e;
return {
filter: t.gridProps.filter,
sort: t.gridProps.sort,
skip: t.gridProps.skip,
take: (e = t.gridProps.take) != null ? e : t.gridProps.pageSize,
group: t.gridProps.group
};
}, P = (e) => ({
nativeEvent: e && e.nativeEvent,
syntheticEvent: e,
target: R.current
}), Rt = (e) => ({
...e,
nativeEvent: void 0,
syntheticEvent: void 0,
target: void 0,
targetEvent: void 0,
focusElement: void 0
}), s = (e, n) => {
if (t.gridProps.isClient) {
e(n);
return;
}
e(Rt(n));
}, Ct = () => {
var e, n, r;
if (F.current && ((e = F.current) == null ? void 0 : e.getElementsByClassName("k-grid-edit-row").length) > 0) {
ue.current = !1, (n = document.activeElement) != null && n.closest(".k-grid-edit-row") ? se.current = document.activeElement : se.current = void 0;
const a = Array.from((r = F.current) == null ? void 0 : r.getElementsByClassName("k-grid-edit-row"));
a.length > Pe.current.length ? J.current = a.filter(
(o) => !Pe.current.includes(o)
)[0] : a.length === 1 && (J.current = a[0], ue.current = !0), Pe.current = a;
}
}, H = () => t.dataRef.filter((e) => e.rowType === "data").map((e) => e.dataItem), j = () => (t.slicedData || t.dataRef).filter((e) => e.rowType === "data").map((e) => e.dataItem), v = () => {
var e;
if (Z)
return ((e = q()) == null ? void 0 : e.ownerDocument) || document;
}, q = () => K.current, oe = i.useCallback(
(e) => {
var a;
if (!c.current || !((a = c.current) != null && a.container) || t.gridProps.scrollable === "none")
return;
D.current && D.current.disconnect();
const { rowIndex: n } = e, r = q();
if (t.gridProps.scrollable === "virtual")
c.current.askedSkip = n, c.current.container.scroll(
0,
Math.round(c.current.askedSkip / c.current.total * c.current.container.scrollHeight)
);
else if (r) {
const o = n < 1 ? r.querySelector("tbody > tr:nth-child(1)") : r.querySelector(`tbody > tr:nth-child(${n + 1})`);
o && $.current && ($.current.scrollTop = o.offsetTop);
}
},
[t.gridProps.scrollable]
), ye = (e) => JSON.stringify(e.map((n) => ({ id: n.id, field: n.field, title: n.title, children: n.children }))), vt = () => ye(Dt) === ye(t.columnsRef), Et = () => {
vt() || ie();
}, wt = (e, n) => {
var r, a;
if (c.current) {
if (c.current.fixedScroll = t.gridProps.fixedScroll || !1, c.current.PageChange = _, c.current.realSkip = t.gridProps.skip || 0, c.current.pageSize = (a = (r = t.gridProps.take) != null ? r : t.gridProps.pageSize) != null ? a : 0, c.current.scrollableVirtual = t.gridProps.scrollable === "virtual", c.current.total = e, c.current.propsSkip = (t.gridProps.skip || 0) + (t.gridProps.scrollable === "virtual" ? c.current.topCacheCount + (c.current.attendedSkip - (t.gridProps.skip || 0)) : 0), t.gridProps.rowHeight !== void 0 && t.gridProps.rowHeight > 0 && !n) {
const o = t.gridProps.rowHeight * e;
c.current.containerHeight = ze ? Math.min(Ne, o) : o;
} else
c.current.containerHeight = 1533915;
if (c.current.containerRef = $, c.current.tableBodyRef = F, c.current.table = x.current, c.current instanceof Oe) {
const { rowHeight: o = 0, detail: d, expandField: l } = t.gridProps;
let { detailRowHeight: u = 0 } = t.gridProps;
u = d && l ? u : o, t.isAllData ? (c.current.total = t.dataRef.length, c.current.rowHeightService = new He(
t.dataRef.length,
o,
u,
t.dataRef
)) : c.current.rowHeightService = new He(e, o, u);
const g = c.current.rowHeightService.totalHeight();
c.current.containerHeight = ze ? Math.min(Ne, g) : g;
}
}
}, xe = i.useCallback(
(e) => {
const n = { rowIndex: me.current };
e.forEach((r) => {
r.isIntersecting || oe(n);
});
},
[oe]
), ie = () => {
t.gridProps.forceUpdate && t.gridProps.forceUpdate();
}, yt = (e) => e.left !== void 0 ? ke !== "rtl" ? { left: e.left, right: e.right } : { left: e.right, right: e.left } : {}, R = i.useRef(null), c = i.useRef(), E = i.useRef(), S = i.useRef(), y = i.useRef(), k = i.useRef(), X = i.useRef(), D = i.useRef(null), F = i.useRef(null), xt = i.useRef(null), $ = i.useRef(null), x = i.useRef(null), de = i.useRef(null), K = i.useRef(null), L = i.useRef(null), G = i.useRef(null), ce = i.useRef(!1), le = i.useRef(!1), J = i.useRef(), se = i.useRef(), ue = i.useRef(!1), Y = i.useRef(!0), ge = i.useRef(0), fe = i.useRef(), me = i.useRef(), Pe = i.useRef([]), Se = i.useRef([]), z = i.useRef(null), St = i.useRef(null), kt = i.useRef(null), ke = Ht(K), Dt = i.useMemo(() => i.Children.toArray(t.gridProps.children), [t.gridProps.children]), h = ee((Te = t.gridProps.selectable) != null ? Te : !!t.gridProps.selectedField), De = Gt((Me = t.gridProps.editable) != null ? Me : !!t.gridProps.editField);
i.useMemo(() => {
T.onConstructor({
navigatable: !!t.gridProps.navigatable,
contextStateRef: y,
navigationStateRef: k,
idPrefix: t.id
});
}, []), i.useMemo(() => {
var r;
(r = c.current) == null || r.reset();
const e = t.gridProps.groupable === !0 || typeof t.gridProps.groupable == "object" && t.gridProps.groupable.enabled !== !1, n = t.isFixedVirtualScroll ? Oe : on;
c.current = new n(e || t.gridProps.rowHeight === void 0 || t.gridProps.rowHeight === 0);
}, [
t.gridProps.scrollable,
t.gridProps.total,
t.gridProps.filter,
t.gridProps.group,
t.gridProps.groupable,
t.gridProps.sort,
t.gridProps.rowHeight
]), i.useEffect(() => (t.gridProps.clipboard && (X.current = new zt(W), X.current.addEventListeners(v())), () => {
X.current && X.current.removeEventListeners(v());
}), [t.gridProps.onClipboard, t.gridProps.clipboard, W, v]), i.useEffect(() => (t.gridProps.columnVirtualization && !window.navigator.userAgent.match(Zt) && (de.current && (de.current.style.display = "block"), x.current && (x.current.style.display = "block")), ae(), Ae(), T.onComponentDidMount({
scope: K.current || void 0,
contextStateRef: y,
navigationStateRef: k
}), () => {
clearTimeout(fe.current);
}), []), i.useEffect(() => {
var e;
ae(), Ae(), (e = c.current) != null && e.tableTransform && c.current.table && (c.current.table.style.transform = c.current.tableTransform, c.current.tableTransform = ""), Ct(), T.onComponentDidUpdate({
scope: K.current || void 0,
contextStateRef: y,
navigationStateRef: k,
focusFirst: le.current,
newEditableRow: J.current,
singleEditRow: ue.current,
lastActiveElement: se.current,
navigatable: t.gridProps.navigatable
}), le.current = !1, J.current = void 0;
}), i.useEffect(() => {
if (Z) {
const e = {
rootMargin: "0px",
threshold: 0.9
};
D.current = window.IntersectionObserver && new window.IntersectionObserver(xe, e) || null;
}
}, [xe]), i.useEffect(() => {
var n;
let e;
return Z && window.ResizeObserver && (e = new window.ResizeObserver(Et), e.observe((n = v()) == null ? void 0 : n.body)), () => {
e == null || e.disconnect();
};
}, []), i.useImperativeHandle(
R,
() => ({
get element() {
return q();
},
props: t.gridProps,
get columns() {
return U();
},
scrollIntoView: (e) => {
var a;
if (!((a = c.current) != null && a.container) || t.gridProps.scrollable === "none")
return;
const { rowIndex: n } = e;
me.current = n;
const r = q();
if (D.current && r) {
D.current.disconnect();
const o = r.querySelector(`[absolute-row-index="${me.current}"]`);
o ? D.current.observe(o) : oe(e);
}
},
fitColumns: (e) => {
E.current.dblClickHandler(null, e);
}
})
), i.useImperativeHandle(t.gridRef, () => R.current), i.useMemo(() => {
E.current = new Yt(bt);
}, [t.gridProps.onColumnResize, t.columnsRef]), i.useMemo(() => {
S.current = new Qt(re, mt, we);
}, [
t.gridProps.onColumnReorder,
t.gridProps.onGroupChange,
t.gridProps.group,
t.columnsRef,
t.gridProps.groupable
]), E.current.resizable = t.gridProps.resizable || !1, E.current.columns = t.columnsRef, E.current.columnsState = Ft(t.columnsState);
const Ke = t.gridProps.groupable === !0 || typeof t.gridProps.groupable == "object" && t.gridProps.groupable.enabled !== !1;
return S.current.reorderable = t.gridProps.reorderable || !1, S.current.groupable = Ke, S.current.columns = t.columnsRef, wt(t.total, Ke), /* @__PURE__ */ i.createElement(
sn.Provider,
{
value: {
isClient: w,
rowReorder: A,
activeDragRowDataItemRef: z,
reorderRowDragTargetRef: St,
reorderRowDropTargetRef: kt,
dir: ke,
getCellPositionStyle: yt,
dataItemKey: t.gridProps.dataItemKey,
columnsState: t.columnsState,
onColumnsStateChange: ne,
groupChange: te,
selectionRelease: at,
pagerPageChange: ut,
onContextMenu: We,
rowClick: Je,
rowDblClick: Ye,
cellClick: Qe,
headerCellClick: ve,
itemChange: et,
sortChange: Ee,
filterChange: gt,
searchChange: ft,
onHeaderSelectionChange: rt,
columnGroupChange: Pt,
onKeyDown: qe,
onFocus: Xe,
scrollHandler: je,
selectionChange: tt,
dispatchDetailExpand: Ze,
dispatchGroupExpand: pe,
columnResizeRef: E,
dragLogicRef: S,
navigationStateRef: k,
tableElementRef: x,
tableBodyElementRef: F,
headerElementRef: xt,
containerElementRef: $,
headTableElementRef: de,
elementRef: K,
footerRef: L,
headerRef: G,
vsRef: c
}
},
/* @__PURE__ */ i.createElement(Nt.Provider, { value: y.current }, t.children),
/* @__PURE__ */ i.createElement(
dn,
{
show: I.show,
dataItem: I.dataItem,
field: I.field,
items: Ve,
offset: I.offset,
onClose: Ie,
onSelect: _e
}
)
);
};
export {
wn as GridClientWrapper,
sn as GridContext
};