@svar-ui/react-grid
Version:
Fast, feature-rich React DataGrid with virtual scrolling, cell editing, sorting, filtering, and accessibility support.
1,543 lines • 57.7 kB
JavaScript
import { jsxs as q, jsx as s, Fragment as ge } from "react/jsx-runtime";
import Pt, { createContext as Ot, useContext as J, useMemo as S, useRef as H, useEffect as K, useCallback as P, useState as I, forwardRef as Wt, useImperativeHandle as Yt } from "react";
import { Text as _t, RichSelect as Ft, SuggestDropdown as gt, Dropdown as Xt, Calendar as jt, context as pt, Locale as Bt, Material as lt, Willow as st, WillowDark as it } from "@svar-ui/react-core";
import { en as wt } from "@svar-ui/grid-locales";
import { EventBusRouter as Gt } from "@svar-ui/lib-state";
import { getRenderValue as Ue, getValue as Ut, isCommunity as xt, getPrintFilterValue as qt, getPrintCellStyle as mt, getHeaderFooterPrintColumns as ct, getPrintColumns as Qt, hotkeys as Zt, scrollTo as Jt, DataStore as en, defaultMenuOptions as tn } from "@svar-ui/grid-store";
import { defaultMenuOptions as co, getEditorConfig as ao } from "@svar-ui/grid-store";
import { useWritableProp as nn, useStore as F, styleObject as yt, useStoreWithCounter as on, delegateClick as rn, writable as ln, useStoreLater as sn } from "@svar-ui/lib-react";
import { locate as Be, id as vt, clickOutside as bt, locateAttr as at, locale as cn, setEnv as an } from "@svar-ui/lib-dom";
import { registerMenuItem as dn, ContextMenu as Ct } from "@svar-ui/react-menu";
import { env as un } from "@svar-ui/lib-svelte";
const te = Ot(null);
function fn(n, e) {
const t = new ResizeObserver((r) => {
requestAnimationFrame(() => e(r[0].contentRect));
});
return t.observe(n.parentNode), {
destroy() {
t.disconnect();
}
};
}
const dt = 5, hn = 700;
function gn(n) {
return vt(n.getAttribute("data-id"));
}
function Ie(n) {
const e = n.getBoundingClientRect(), t = document.body, r = e.top + t.scrollTop - t.clientTop || 0, c = e.left + t.scrollLeft - t.clientLeft || 0;
return {
y: Math.round(r),
x: Math.round(c),
width: n.offsetWidth,
height: n.offsetHeight
};
}
function Ge(n, e) {
const t = Ie(e);
return { x: n.clientX - t.x, y: n.clientY - t.y };
}
function pn(n, e) {
const t = e.current;
let r = null, c, p, d = !1, w = !1;
const a = document.createElement("DIV");
a.className = "wx-drag-zone", a.setAttribute("tabindex", -1);
function g() {
clearTimeout(c), c = null;
}
function i(b) {
const W = Be(b);
W && (r = {
container: a,
sourceNode: b.target,
from: gn(W),
pos: Ge(b, n)
}, p = r.pos, u(b));
}
function u(b) {
if (!r) return;
const W = r.pos = Ge(b, n);
if (!d) {
if (!w && !b?.target?.getAttribute("draggable-data") && Math.abs(p.x - W.x) < dt && Math.abs(p.y - W.y) < dt)
return;
if (L(b) === !1) return A();
}
if (w) {
const Q = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft, B = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
r.targetNode = document.elementFromPoint(
b.pageX - Q,
b.pageY - B
);
} else r.targetNode = b.target;
t.move && t.move(b, r), a.style.left = -(r.offset ? r.offset.x : 0) + "px", a.style.top = r.pos.y + (r.offset ? r.offset.y : 0) + "px";
}
function x(b) {
a.parentNode && a.parentNode.removeChild(a), a.innerHTML = "", d && t.end && t.end(b, r), r = p = null, A();
}
function N(b) {
t.getReorder && !t.getReorder() || b.button === 0 && (D(b), window.addEventListener("mousemove", C), window.addEventListener("mouseup", l), i(b));
}
function C(b) {
u(b);
}
function l(b) {
x(b);
}
function y(b) {
if (t.getReorder && !t.getReorder()) return;
c = setTimeout(() => {
w = !0, i(b.touches[0]);
}, hn), D(b);
function W() {
c && g(), b.target.removeEventListener("touchmove", f), b.target.removeEventListener("touchend", W), x(b);
}
b.target.addEventListener("touchmove", f), b.target.addEventListener("touchend", W), n.addEventListener("contextmenu", v);
}
function f(b) {
d ? (b.preventDefault(), u(b.touches[0])) : c && g();
}
function v(b) {
if (d || c)
return b.preventDefault(), !1;
}
function m(b) {
b.preventDefault();
}
function D(b) {
if (!t.getDraggableInfo) return;
const { hasDraggable: W } = t.getDraggableInfo();
(!W || b.target.getAttribute("draggable-data")) && (document.body.style.userSelect = "none", document.body.style.webkitUserSelect = "none");
}
function L(b) {
if (d = !0, t.start) {
if (t.start(b, r) === !1) return !1;
n.appendChild(a), document.body.style.cursor = "move";
}
}
function A(b) {
d = w = !1, document.body.style.cursor = "", document.body.style.userSelect = "", document.body.style.webkitUserSelect = "", window.removeEventListener("mousemove", C), window.removeEventListener("mouseup", l), b && (n.removeEventListener("mousedown", N), n.removeEventListener("touchstart", y), n.removeEventListener("dragstart", m));
}
return n.addEventListener("mousedown", N), n.addEventListener("touchstart", y), n.addEventListener("dragstart", m), {
destroy() {
A(!0);
}
};
}
const wn = 4e-3;
function xn() {
return {
dirX: 0,
dirY: 0,
scrollSpeedFactor: 1
};
}
function mn(n, e, t, r) {
const { node: c, left: p, top: d, bottom: w, sense: a, xScroll: g, yScroll: i } = r, u = Ge(n, c);
t.scrollState || (t.scrollState = xn());
let x = 0, N = 0;
u.x < p + a ? x = -1 : u.x > e.width - a && (x = 1), u.y < d + Math.round(a / 2) ? N = -1 : u.y > e.height - w - Math.round(a / 2) && (N = 1), (t.scrollState.dirX !== x || t.scrollState.dirY !== N) && (St(t), t.scrollState.dirX = x, t.scrollState.dirY = N), (g && t.scrollState.dirX !== 0 || i && t.scrollState.dirY !== 0) && yn(t, r, {
x: t.scrollState.dirX,
y: t.scrollState.dirY
});
}
function yn(n, e, t) {
n.autoScrollTimer || (n.autoScrollTimer = setTimeout(() => {
n.activeAutoScroll = setInterval(
vn,
15,
n,
e,
t
);
}, 250));
}
function St(n) {
n.scrollSpeedFactor = 1, n.autoScrollTimer && (n.autoScrollTimer = clearTimeout(n.autoScrollTimer), n.activeAutoScroll = clearInterval(n.activeAutoScroll));
}
function vn(n, e, t) {
const { x: r, y: c } = t;
n.scrollSpeedFactor += wn, r !== 0 && Cn(n, e, r), c !== 0 && bn(n, e, c);
}
function bn(n, e, t) {
const r = e.node.scrollTop;
Rt(
r + Math.round(e.sense / 3) * n.scrollSpeedFactor * t,
"scrollTop",
e
);
}
function Cn(n, e, t) {
const r = e.node.scrollLeft;
Rt(
r + Math.round(e.sense / 3) * n.scrollSpeedFactor * t,
"scrollLeft",
e
);
}
function Rt(n, e, t) {
t.node[e] = n;
}
function Sn(n) {
return {
tab: !0,
"shift+tab": !0,
arrowup: !0,
arrowdown: !0,
arrowright: !0,
arrowleft: !0,
enter: !0,
escape: !0,
f2: !0,
home: !0,
end: !0,
"ctrl+home": !0,
"ctrl+end": !0,
"ctrl+z": n.undo,
"ctrl+y": n.undo
};
}
function Ve(n, e, t, r, c, p) {
const d = {};
return n && (d.width = `${n}px`, d.minWidth = `${n}px`), e && (d.flexGrow = e), p && (d.height = `${p}px`), t && (d.position = "sticky", t.left && (d.left = `${r}px`), t.right && (d.right = `${c}px`)), d;
}
function Nt(n, e, t) {
let r = "";
if (n.fixed)
for (const c in n.fixed)
r += n.fixed[c] === -1 ? "wx-shadow " : "wx-fixed ";
return r += e.rowspan > 1 ? "wx-rowspan " : "", r += e.colspan > 1 ? "wx-colspan " : "", r += e.vertical ? "wx-vertical " : "", r += t ? t(n) + " " : "", r;
}
function Rn(n) {
const {
row: e,
column: t,
cellStyle: r = null,
columnStyle: c = null,
children: p,
reorder: d
} = n, [w, a] = nn(n.focusable), g = J(te), i = F(g, "focusCell"), u = S(
() => Ve(
t.width,
t.flexgrow,
t.fixed,
t.left,
t.right
),
[t.width, t.flexgrow, t.fixed, t.left, t.right]
);
function x(m, D) {
let L = "wx-cell";
return L += t.fixed ? " " + (t.fixed === -1 ? "wx-shadow" : "wx-fixed") : "", L += m ? " " + m(t) : "", L += D ? " " + D(e, t) : "", L += t.treetoggle ? " wx-tree-cell" : "", L;
}
const N = S(
() => x(c, r),
[c, r, t, e]
), C = S(() => typeof t.draggable == "function" ? t.draggable(e, t) !== !1 : t.draggable, [t, e]), l = H(null);
K(() => {
const m = i?.row === e.id && i?.column === t.id;
l.current && w && m && l.current.focus();
}, [i, w, e.id, t.id]);
const y = P(() => {
w && !i && g.exec("focus-cell", {
row: e.id,
column: t.id,
eventSource: "focus"
});
}, [g, w, i, e.id, t.id]);
K(() => () => {
w && i && (g.exec("focus-cell", { eventSource: "destroy" }), a(!1));
}, [g, a]);
const f = S(() => {
const m = t.fixed && t.fixed.left === -1 || t.fixed.right === -1, D = t.fixed && t.fixed.right;
return [
N,
m ? "wx-shadow" : "",
D ? "wx-fixed-right" : ""
].filter(Boolean).join(" ");
}, [N, t]), v = t.cell;
return /* @__PURE__ */ q(
"div",
{
className: "wx-TSCaXsGV " + f,
ref: l,
onFocus: y,
style: u,
"data-row-id": e.id,
"data-col-id": t.id,
tabIndex: w ? "0" : "-1",
role: "gridcell",
"aria-colindex": t._colindex,
"aria-readonly": t.editor ? void 0 : !0,
children: [
d && t.draggable ? C ? /* @__PURE__ */ s(
"i",
{
"draggable-data": "true",
className: "wx-TSCaXsGV wx-draggable wxi-drag"
}
) : /* @__PURE__ */ s("i", { className: "wx-TSCaXsGV wx-draggable-stub" }) : null,
t.treetoggle ? /* @__PURE__ */ q(ge, { children: [
/* @__PURE__ */ s("span", { style: { marginLeft: `${e.$level * 28}px` } }),
e.$count ? /* @__PURE__ */ s(
"i",
{
"data-action": "toggle-row",
className: `wx-TSCaXsGV wx-table-tree-toggle wxi-menu-${e.open !== !1 ? "down" : "right"}`
}
) : null
] }) : null,
v ? /* @__PURE__ */ s(
v,
{
api: g,
row: e,
column: t,
onAction: ({ action: m, data: D }) => g.exec(m, D)
}
) : p ? p() : Ue(e, t)
]
}
);
}
function ut(n, e) {
let t, r;
function c(w) {
t = w.clientX, n.style.opacity = 1, document.body.style.cursor = "ew-resize", document.body.style.userSelect = "none", window.addEventListener("mousemove", p), window.addEventListener("mouseup", d), e && e.down && e.down(n);
}
function p(w) {
r = w.clientX - t, e && e.move && e.move(r);
}
function d() {
n.style.opacity = "", document.body.style.cursor = "", document.body.style.userSelect = "", e && e.up && e.up(r), window.removeEventListener("mousemove", p), window.removeEventListener("mouseup", d);
}
return n.addEventListener("mousedown", c), {
destroy() {
n.removeEventListener("mousedown", c);
}
};
}
function Nn({ filter: n, column: e, action: t, filterValue: r }) {
function c({ value: p }) {
t({ value: p, key: e.id });
}
return /* @__PURE__ */ s(
_t,
{
...n.config ?? {},
value: r,
onChange: c
}
);
}
function Dn({ filter: n, column: e, action: t, filterValue: r }) {
const c = J(te), p = F(c, "flatData"), d = S(
() => n?.config?.options || e?.options || a(),
[n, e, p]
), w = S(() => n?.config?.template, [n]);
function a() {
const u = [];
return p.forEach((x) => {
const N = Ut(x, e);
u.includes(N) || u.push(N);
}), u.map((x) => ({ id: x, label: x }));
}
function g({ value: u }) {
t({ value: u, key: e.id });
}
function i(u) {
u.key !== "Tab" && u.preventDefault();
}
return /* @__PURE__ */ s("div", { style: { width: "100%" }, onKeyDown: i, children: /* @__PURE__ */ s(
Ft,
{
placeholder: "",
clear: !0,
...n?.config ?? {},
options: d,
value: r,
onChange: g,
children: (u) => w ? w(u) : u.label
}
) });
}
const Ln = {
text: Nn,
richselect: Dn
};
function En({ filter: n, column: e }) {
const t = J(te), r = F(t, "filterValues");
function c(d) {
t.exec("filter-rows", d);
}
const p = S(() => Ln[n.type], [n.type]);
return /* @__PURE__ */ s(
p,
{
filter: n,
column: e,
action: c,
filterValue: r[e.id]
}
);
}
function Tn(n) {
const {
cell: e,
column: t,
row: r,
lastRow: c,
sortRow: p,
columnStyle: d,
bodyHeight: w,
hasSplit: a
} = n, g = J(te), i = F(g, "sortMarks"), u = S(() => i ? i[t.id] : void 0, [i, t.id]), x = H(), N = P(
(T) => {
x.current = e.flexgrow ? T.parentNode.clientWidth : e.width;
},
[e.flexgrow, e.width]
), C = P(
(T, ee) => {
g.exec("resize-column", {
id: e.id,
width: Math.max(1, (x.current || 0) + T),
inProgress: ee
});
},
[g, e.id]
), l = P((T) => C(T, !0), [C]), y = P((T) => C(T, !1), [C]), f = P(
(T) => {
!t.sort || e.filter || g.exec("sort-rows", { key: e.id, add: T.ctrlKey });
},
[g, e.id, e.filter, t.sort]
), v = P(
(T) => {
T && T.stopPropagation(), g.exec("collapse-column", { id: e.id, row: r });
},
[g, e.id, r]
), m = P(
(T) => {
T.key === "Enter" && v();
},
[v]
), D = P(
(T) => {
T.key === "Enter" && !e.filter && f(T);
},
[f, e.filter]
), L = S(
() => e.collapsed && t.collapsed,
[e.collapsed, t.collapsed]
), A = S(
() => L && !a && e.collapsible !== "header",
[L, a, e.collapsible]
), b = S(
() => A ? { top: -w / 2, position: "absolute" } : {},
[A, w]
), W = S(
() => Ve(
e.width,
e.flexgrow,
t.fixed,
t.left,
e.right ?? t.right,
e.height + (L && A ? w : 0)
),
[
e.width,
e.flexgrow,
t.fixed,
t.left,
e.right,
t.right,
e.height,
L,
A,
w
]
), Q = S(
() => Nt(t, e, d),
[t, e, d]
), B = P(() => Object.fromEntries(
Object.entries(e).filter(([T]) => T !== "cell")
), [e]), M = `wx-cell ${Q} ${e.css || ""} wx-collapsed`, G = [
"wx-cell",
Q,
e.css || "",
e.filter ? "wx-filter" : "",
t.fixed && t.fixed.right ? "wx-fixed-right" : ""
].filter(Boolean).join(" "), z = H(null);
return K(() => {
const T = z.current;
if (!T) return;
const ee = ut(T, { down: N, move: l, up: y });
return () => {
typeof ee == "function" && ee();
};
}, [N, l, y, ut]), L ? /* @__PURE__ */ s(
"div",
{
className: "wx-RsQD74qC " + M,
style: W,
role: "button",
"aria-label": `Expand column ${e.text || ""}`,
"aria-expanded": !e.collapsed,
tabIndex: 0,
onKeyDown: m,
onClick: v,
"data-header-id": t.id,
children: /* @__PURE__ */ s("div", { className: "wx-RsQD74qC wx-text", style: b, children: e.text || "" })
}
) : /* @__PURE__ */ q(
"div",
{
className: "wx-RsQD74qC " + G,
style: W,
onClick: f,
"data-header-id": t.id,
tabIndex: !e._hidden && t.sort && !e.filter ? 0 : void 0,
role: "columnheader",
"aria-colindex": e._colindex,
"aria-colspan": e.colspan > 1 ? e.colspan : void 0,
"aria-rowspan": e.rowspan > 1 ? e.rowspan : void 0,
"aria-sort": !u?.order || e.filter ? "none" : u?.order === "asc" ? "ascending" : "descending",
onKeyDown: D,
children: [
e.collapsible ? /* @__PURE__ */ s(
"div",
{
className: "wx-RsQD74qC wx-collapse",
role: "button",
"aria-label": e.collapsed ? "Expand column" : "Collapse column",
"aria-expanded": !e.collapsed,
tabIndex: 0,
onKeyDown: m,
onClick: v,
children: /* @__PURE__ */ s(
"i",
{
className: `wx-RsQD74qC wxi-angle-${e.collapsed ? "down" : "right"}`
}
)
}
) : null,
e.cell ? (() => {
const T = e.cell;
return /* @__PURE__ */ s(
T,
{
api: g,
cell: B(),
column: t,
row: r,
onAction: ({ action: ee, data: Re }) => g.exec(ee, Re)
}
);
})() : e.filter ? /* @__PURE__ */ s(En, { filter: e.filter, column: t }) : /* @__PURE__ */ s("div", { className: "wx-RsQD74qC wx-text", children: e.text || "" }),
t.resize && c && !e._hidden ? /* @__PURE__ */ s(
"div",
{
className: "wx-RsQD74qC wx-grip",
role: "presentation",
"aria-label": "Resize column",
ref: z,
onClick: (T) => T.stopPropagation(),
children: /* @__PURE__ */ s("div", {})
}
) : null,
p ? /* @__PURE__ */ s("div", { className: "wx-RsQD74qC wx-sort", children: u ? /* @__PURE__ */ q(ge, { children: [
typeof u.index < "u" ? /* @__PURE__ */ s("div", { className: "wx-RsQD74qC wx-order", children: u.index + 1 }) : null,
/* @__PURE__ */ s(
"i",
{
className: `wx-RsQD74qC wxi-arrow-${u.order === "asc" ? "up" : "down"}`
}
)
] }) : null }) : null
]
}
);
}
function $n({ cell: n, column: e, row: t, columnStyle: r }) {
const c = J(te), p = S(
() => Ve(
n?.width,
n?.flexgrow,
e?.fixed,
e?.left,
n?.right ?? e?.right,
n?.height
),
[
n?.width,
n?.flexgrow,
e?.fixed,
e?.left,
n?.right,
e?.right,
n?.height
]
), d = S(
() => Nt(e, n, r),
[e, n, r]
), w = P(() => Object.fromEntries(
Object.entries(n || {}).filter(([g]) => g !== "cell")
), [n]), a = `wx-6Sdi3Dfd wx-cell ${d || ""} ${n?.css || ""}` + (e?.fixed && e?.fixed.right ? " wx-fixed-right" : "");
return /* @__PURE__ */ s("div", { className: a, style: p, children: !e?.collapsed && !n?.collapsed ? n?.cell ? Pt.createElement(n.cell, {
api: c,
cell: w(),
column: e,
row: t,
onAction: ({ action: g, data: i }) => c.exec(g, i)
}) : /* @__PURE__ */ s("div", { className: "wx-6Sdi3Dfd wx-text", children: n?.text || "" }) : null });
}
function ft({
deltaLeft: n,
contentWidth: e,
columns: t,
type: r = "header",
columnStyle: c,
bodyHeight: p
}) {
const d = J(te), w = F(d, "_sizes"), a = F(d, "split"), g = S(() => w?.[`${r}RowHeights`], [w, r]), i = S(() => {
let l = [];
if (t && t.length) {
const y = t[0][r].length;
for (let f = 0; f < y; f++) {
let v = 0;
l.push([]), t.forEach((m, D) => {
const L = { ...m[r][f] };
if (v || l[f].push(L), L.colspan > 1) {
if (v = L.colspan - 1, !xt() && m.right) {
let A = m.right;
for (let b = 1; b < L.colspan; b++)
A -= t[D + b].width;
L.right = A;
}
} else v && v--;
});
}
}
return l;
}, [t, r]), u = S(() => a?.left || a?.right, [a]);
function x(l) {
return t.find((y) => y.id === l);
}
function N(l, y) {
let f = y;
return l.rowspan && (f += l.rowspan - 1), f === i.length - 1;
}
function C(l, y, f) {
if (!f.sort) return !1;
for (let v = i.length - 1; v >= 0; v--) {
const m = f.header[v];
if (!m.filter && !m._hidden) return y === v;
}
return N(l, y);
}
return /* @__PURE__ */ s(
"div",
{
className: `wx-sAsPVaUK wx-${r}`,
style: { paddingLeft: `${n}px`, width: `${e}px` },
role: "rowgroup",
children: i.map((l, y) => /* @__PURE__ */ s(
"div",
{
className: r === "header" ? "wx-sAsPVaUK wx-h-row" : "wx-sAsPVaUK wx-f-row",
style: { height: `${g?.[y]}px`, display: "flex" },
role: "row",
children: l.map((f) => {
const v = x(f.id);
return r === "header" ? /* @__PURE__ */ s(
Tn,
{
cell: f,
columnStyle: c,
column: v,
row: y,
lastRow: N(f, y),
bodyHeight: p,
sortRow: C(f, y, v),
hasSplit: u
},
f.id
) : /* @__PURE__ */ s(
$n,
{
cell: f,
columnStyle: c,
column: x(f.id),
row: y
},
f.id
);
})
},
y
))
}
);
}
function kn({ overlay: n }) {
const e = J(te);
function t(c) {
return typeof c == "function";
}
const r = n;
return /* @__PURE__ */ s("div", { className: "wx-1ty666CQ wx-overlay", children: t(n) ? /* @__PURE__ */ s(r, { onAction: ({ action: c, data: p }) => e.exec(c, p) }) : n });
}
function Hn(n) {
const { actions: e, editor: t } = n, [r, c] = I(t?.value || ""), p = H(null);
K(() => {
p.current && p.current.focus();
}, []);
function d() {
p.current && (c(p.current.value), e.updateValue(p.current.value));
}
function w({ key: a }) {
a === "Enter" && e.save();
}
return /* @__PURE__ */ s(
"input",
{
className: "wx-e7Ao5ejY wx-text",
onInput: d,
onKeyDown: w,
ref: p,
type: "text",
value: r
}
);
}
function Mn({ actions: n, editor: e, onAction: t }) {
const [r, c] = I(e?.value), [p, d] = I(e?.renderedValue), [w, a] = I(e?.options || []), g = S(() => e?.config?.template, [e]), i = S(() => e?.config?.cell, [e]), u = S(() => (w || []).findIndex((v) => v.id === r), [w, r]), x = H(null), N = H(null), C = P(
(v) => {
x.current = v.navigate, N.current = v.keydown, x.current(u);
},
[u, x]
), l = P(
(v) => {
const m = v?.target?.value ?? "";
d(m);
const D = m ? (e?.options || []).filter(
(L) => (L.label || "").toLowerCase().includes(m.toLowerCase())
) : e?.options || [];
a(D), D.length ? x.current(-1 / 0) : x.current(null);
},
[e]
), y = H(null);
K(() => {
y.current && y.current.focus();
}, []), K(() => {
c(e?.value), d(e?.renderedValue), a(e?.options || []);
}, [e]);
const f = P(
({ id: v }) => {
n.updateValue(v), n.save();
},
[n]
);
return /* @__PURE__ */ q(ge, { children: [
/* @__PURE__ */ s(
"input",
{
className: "wx-0UYfSd1x wx-input",
ref: y,
value: p ?? "",
onChange: l,
onKeyDown: (v) => N.current ? N.current(v, u) : void 0
}
),
/* @__PURE__ */ s(
gt,
{
items: w,
onReady: C,
onSelect: f,
children: ({ option: v }) => g ? g(v) : i ? /* @__PURE__ */ s(i, { data: v, onAction: t }) : v.label
}
)
] });
}
function An({ actions: n, editor: e, onAction: t }) {
const [r] = I(() => e.value || /* @__PURE__ */ new Date()), [c] = I(() => e.config?.template), [p] = I(() => e.config?.cell);
function d({ value: a }) {
n.updateValue(a), n.save();
}
const w = H(null);
return K(() => {
w.current && w.current.focus(), typeof window < "u" && window.getSelection && window.getSelection().removeAllRanges();
}, []), /* @__PURE__ */ q(ge, { children: [
/* @__PURE__ */ s(
"div",
{
className: "wx-lNWNYUb6 wx-value",
ref: w,
tabIndex: 0,
onClick: () => n.cancel(),
onKeyDown: (a) => a.preventDefault(),
children: c ? c(r) : p ? /* @__PURE__ */ s(p, { data: e.value, onAction: t }) : /* @__PURE__ */ s("span", { className: "wx-lNWNYUb6 wx-text", children: e.renderedValue })
}
),
/* @__PURE__ */ s(Xt, { width: "auto", children: /* @__PURE__ */ s(
jt,
{
value: r,
onChange: d,
buttons: e.config?.buttons
}
) })
] });
}
function In(n) {
const { actions: e, editor: t } = n, r = n.onAction ?? n.onaction, c = t.config || {}, [p] = I(
t.options.find((l) => l.id === t.value)
), [d] = I(t.value), [w] = I(t.options), a = S(
() => w.findIndex((l) => l.id === d),
[w, d]
);
function g({ id: l }) {
e.updateValue(l), e.save();
}
let i;
const [u, x] = I();
function N(l) {
i = l.navigate, x(() => l.keydown), i(a);
}
const C = H(null);
return K(() => {
C.current && C.current.focus(), typeof window < "u" && window.getSelection && window.getSelection().removeAllRanges();
}, []), /* @__PURE__ */ q(ge, { children: [
/* @__PURE__ */ s(
"div",
{
ref: C,
className: "wx-ywGRk611 wx-value",
tabIndex: 0,
onClick: () => e.cancel(),
onKeyDown: (l) => {
u(l, a), l.preventDefault();
},
children: c.template ? c.template(p) : c.cell ? (() => {
const l = c.cell;
return /* @__PURE__ */ s(l, { data: p, onAction: r });
})() : /* @__PURE__ */ s("span", { className: "wx-ywGRk611 wx-text", children: t.renderedValue })
}
),
/* @__PURE__ */ s(gt, { items: w, onReady: N, onSelect: g, children: ({ option: l }) => c.template ? c.template(l) : c.cell ? (() => {
const y = c.cell;
return /* @__PURE__ */ s(y, { data: l, onAction: r });
})() : l.label })
] });
}
const Vn = {
text: Hn,
combo: Mn,
datepicker: An,
richselect: In
};
function zn({ column: n, row: e }) {
const t = J(te), r = F(t, "editor"), c = P(
(C, l) => {
t.exec("close-editor", { ignore: C }), l && t.exec("focus-cell", {
...l,
eventSource: "click"
});
},
[t]
), p = P(
(C) => {
const l = C ? null : { row: r?.id, column: r?.column };
c(!1, l);
},
[r, c]
), d = P(() => {
c(!0, { row: r?.id, column: r?.column });
}, [r, c]), w = P(
(C) => {
t.exec("editor", { value: C });
},
[t]
), a = P(
(C) => {
C.key === "Enter" && r && d();
},
[r, d]
), g = S(
() => Ve(
n.width,
n.flexgrow,
n.fixed,
n.left,
n.right
),
[n.width, n.flexgrow, n.fixed, n.left, n.right]
), i = S(() => {
let C = n.editor;
typeof C == "function" && (C = C(e, n));
let l = typeof C == "string" ? C : C.type;
return Vn[l];
}, [n, e]), u = H(null);
K(() => {
if (!u.current) return;
const C = bt(u.current, () => p(!0));
return () => {
typeof C == "function" && C();
};
}, [p]), K(() => {
u.current && typeof g == "string" && u.current.setAttribute("style", g);
}, [g]);
const x = typeof e.$parent < "u" ? "gridcell" : "cell", N = typeof e.$parent < "u" ? !n.editor : void 0;
return /* @__PURE__ */ s(
"div",
{
className: "wx-8l724t2g wx-cell wx-editor",
ref: u,
style: typeof g == "object" && g !== null ? g : void 0,
role: x,
"aria-readonly": N,
tabIndex: -1,
onClick: (C) => C.stopPropagation(),
onDoubleClick: (C) => C.stopPropagation(),
onKeyDown: a,
children: i ? /* @__PURE__ */ s(
i,
{
editor: r,
actions: { save: p, cancel: d, updateValue: w },
onAction: ({ action: C, data: l }) => t.exec(C, l)
}
) : null
}
);
}
function ht(n) {
const { columns: e, type: t, columnStyle: r } = n, c = J(te), { filterValues: p, _columns: d, _sizes: w } = c.getState();
function a(g) {
return r ? " " + r(g) : "";
}
return /* @__PURE__ */ s(ge, { children: e.map((g, i) => /* @__PURE__ */ s("tr", { children: g.map((u) => {
const x = d.find((l) => l.id == u.id), N = `wx-print-cell-${t}${a(x)}${u.filter ? " wx-print-cell-filter" : ""}${u.vertical ? " wx-vertical" : ""}`, C = u.cell;
return /* @__PURE__ */ s(
"th",
{
style: yt(mt(u, w.columnWidth)),
className: "wx-Gy81xq2u " + N,
rowSpan: u.rowspan,
colSpan: u.colspan,
children: C ? /* @__PURE__ */ s(
C,
{
api: c,
cell: Object.fromEntries(
Object.entries(u).filter(([l]) => l !== "cell")
),
column: x,
row: i
}
) : u.filter ? /* @__PURE__ */ s("div", { className: "wx-Gy81xq2u wx-print-filter", children: qt(p, d, u) }) : /* @__PURE__ */ s("div", { className: "wx-Gy81xq2u wx-text", children: u.text ?? "" })
},
u.id
);
}) }, i)) });
}
function Kn(n) {
const { columns: e, rowStyle: t, columnStyle: r, cellStyle: c, header: p, footer: d, reorder: w } = n, a = J(te), { flatData: g, _sizes: i } = a.getState(), u = p && ct(e, "header", i.headerRowHeights), x = d && ct(e, "footer", i.footerRowHeights);
function N(l, y) {
let f = "";
return f += r ? " " + r(y) : "", f += c ? " " + c(l, y) : "", f;
}
function C(l, y) {
return typeof y.draggable == "function" ? y.draggable(l, y) !== !1 : y.draggable;
}
return /* @__PURE__ */ q(
"table",
{
className: `wx-8NTMLH0z wx-print-grid ${e.some((l) => l.flexgrow) ? "wx-flex-columns" : ""}`,
children: [
p ? /* @__PURE__ */ s("thead", { children: /* @__PURE__ */ s(
ht,
{
columns: u,
type: "header",
columnStyle: r
}
) }) : null,
/* @__PURE__ */ s("tbody", { children: g.map((l, y) => /* @__PURE__ */ s(
"tr",
{
className: "wx-8NTMLH0z wx-row" + (t ? " " + t(l) : ""),
children: e.map(
(f) => f.collapsed ? null : /* @__PURE__ */ q(
"td",
{
className: `wx-8NTMLH0z wx-print-cell wx-cell ${N(l, f)}`,
style: yt(
mt(f, i.columnWidth)
),
children: [
w && f.draggable ? /* @__PURE__ */ s("span", { className: "wx-8NTMLH0z wx-print-draggable", children: C(l, f) ? /* @__PURE__ */ s("i", { className: "wx-8NTMLH0z wxi-drag" }) : null }) : null,
f.treetoggle ? /* @__PURE__ */ q(ge, { children: [
/* @__PURE__ */ s(
"span",
{
style: { marginLeft: l.$level * 28 + "px" }
}
),
l.$count ? /* @__PURE__ */ s(
"i",
{
className: `wx-8NTMLH0z wx-print-grid-tree-toggle wxi-menu-${l.open !== !1 ? "down" : "right"}`
}
) : null
] }) : null,
f.cell ? (() => {
const v = f.cell;
return /* @__PURE__ */ s(v, { api: a, row: l, column: f });
})() : /* @__PURE__ */ s("span", { children: Ue(l, f) })
]
},
f.id
)
)
},
y
)) }),
d ? /* @__PURE__ */ s("tfoot", { children: /* @__PURE__ */ s(
ht,
{
columns: x,
type: "footer",
columnStyle: r
}
) }) : null
]
}
);
}
function Pn(n) {
const { config: e, ...t } = n, r = J(te), { _skin: c, _columns: p } = r.getState(), d = S(() => Qt(p, e), []), w = H(null);
return K(() => {
const a = document.body;
a.classList.add("wx-print");
const g = w.current;
if (!g) return;
const i = g.cloneNode(!0);
a.appendChild(i);
const u = `@media print { @page { size: ${e.paper} ${e.mode}; }`, x = document.createElement("style");
x.setAttribute("type", "text/css"), x.setAttribute("media", "print"), document.getElementsByTagName("head")[0].appendChild(x), x.appendChild(document.createTextNode(u)), window.print(), x.remove(), a.classList.remove("wx-print"), i.remove();
}, []), /* @__PURE__ */ s(
"div",
{
className: `wx-4zwCKA7C wx-${c}-theme wx-print-container`,
ref: w,
children: d.map((a, g) => /* @__PURE__ */ s("div", { className: "wx-4zwCKA7C wx-print-grid-wrapper", children: /* @__PURE__ */ s(Kn, { columns: a, ...t }) }, g))
}
);
}
function On(n) {
const {
header: e,
footer: t,
overlay: r,
multiselect: c,
reorder: p,
onreorder: d,
rowStyle: w,
columnStyle: a,
cellStyle: g,
autoRowHeight: i,
resize: u,
clientWidth: x,
clientHeight: N,
responsiveLevel: C
} = n, l = J(te), y = F(l, "dynamic"), f = F(l, "_columns"), v = F(l, "flatData"), m = F(l, "split"), D = F(l, "_sizes"), [L, A] = on(l, "selectedRows"), b = F(l, "select"), W = F(l, "editor"), Q = F(l, "tree"), B = F(l, "focusCell"), M = F(l, "_print"), G = F(l, "undo"), [z, T] = I(0);
K(() => {
T(At());
}, []);
const [ee, Re] = I(0), [pe, ze] = I(0), re = S(() => (f || []).some((o) => !o.hidden && o.flexgrow), [f]), Z = S(() => D?.rowHeight || 0, [D]), _ = H(null), [Ke, ye] = I(null), [ie, Ee] = I(null), le = S(() => {
let o = [], h = 0;
return m && m.left && (o = (f || []).slice(0, m.left).filter((R) => !R.hidden).map((R) => ({ ...R })), o.forEach((R) => {
R.fixed = { left: 1 }, R.left = h, h += R.width;
}), o.length && (o[o.length - 1].fixed = { left: -1 })), { columns: o, width: h };
}, [m, f]), se = S(() => {
let o = [], h = 0;
if (m && m.right) {
o = (f || []).slice(m.right * -1).filter((R) => !R.hidden).map((R) => ({ ...R }));
for (let R = o.length - 1; R >= 0; R--) {
const k = o[R];
k.fixed = { right: 1 }, k.right = h, h += k.width;
}
o.length && (o[0].fixed = { right: -1 });
}
return { columns: o, width: h };
}, [m, f]), X = S(() => {
const o = (f || []).slice(m?.left || 0, (f || []).length - (m?.right ?? 0)).filter((h) => !h.hidden);
return o.forEach((h) => {
h.fixed = 0;
}), o;
}, [f, m]), $ = S(() => (f || []).reduce((o, h) => (h.hidden || (o += h.width), o), 0), [f]), we = 1;
function U(o, h, R) {
let k = h, O = o;
if (X.length) {
let V = X.length;
for (let E = o; E >= 0; E--)
X[E][R].forEach((oe) => {
oe.colspan > 1 && E > o - oe.colspan && E < V && (V = E);
});
if (V !== X.length && V < o) {
for (let E = V; E < o; E++)
k -= X[E].width;
O = V;
}
}
return { index: O, delta: k };
}
const Y = S(() => {
let o, h, R;
const k = ee, O = ee + (x || 0);
let V = 0, E = 0, j = 0, oe = 0;
X.forEach((fe, Se) => {
k > j && (V = Se, oe = j), j = j + fe.width, O > j && (E = Se + we);
});
const ue = { header: 0, footer: 0 };
for (let fe = E; fe >= V; fe--)
["header", "footer"].forEach((Se) => {
X[fe] && X[fe][Se].forEach((Kt) => {
const je = Kt.colspan;
if (je && je > 1) {
const rt = je - (E - fe + 1);
rt > 0 && (ue[Se] = Math.max(ue[Se], rt));
}
});
});
const De = U(V, oe, "header"), Ce = U(V, oe, "footer"), Xe = De.delta, Le = De.index, Me = Ce.delta, Ae = Ce.index;
return re && $ > (x || 0) ? o = h = R = [...le.columns, ...X, ...se.columns] : (o = [
...le.columns,
...X.slice(V, E + 1),
...se.columns
], h = [
...le.columns,
...X.slice(Le, E + ue.header + 1),
...se.columns
], R = [
...le.columns,
...X.slice(Ae, E + ue.footer + 1),
...se.columns
]), {
data: o || [],
header: h || [],
footer: R || [],
d: oe,
df: Me,
dh: Xe
};
}, [
X,
le,
se,
ee,
x,
re,
$
]), ce = S(
() => e && D?.headerHeight || 0,
[e, D]
), xe = S(
() => t && D?.footerHeight || 0,
[t, D]
), he = S(() => x && N ? $ >= x : !1, [x, N, $]), Te = S(() => (N || 0) - ce - xe - (he ? z : 0), [N, ce, xe, he, z]), qe = S(() => Math.ceil((Te || 0) / (Z || 1)) + 1, [Te, Z]), Pe = H([]), [Qe, Dt] = I(0), [Ze, Lt] = I(void 0), ne = S(() => {
let o = 0, h = 0;
if (i) {
let O = pe;
for (; O > 0; )
O -= Pe.current[o] || Z, o++;
h = pe - O;
for (let V = Math.max(0, o - 2 - 1); V < o; V++)
h -= Pe.current[o - V] || Z;
o = Math.max(0, o - 2);
} else
o = Math.floor(pe / (Z || 1)), o = Math.max(0, o - 2), h = o * (Z || 0);
const R = y ? y.rowCount : (v || []).length, k = Math.min(R, o + (qe || 0) + 2);
return { d: h, start: o, end: k };
}, [i, pe, Z, y, v, qe]), Oe = S(() => {
const o = y ? y.rowCount : (v || []).length, h = o * (Z || 0);
return i ? Qe + ne.d + (o - (Ze || 0)) * (Z || 0) : h;
}, [
y,
v,
Z,
i,
Qe,
ne.d,
Ze
]), ae = S(() => x && N ? Oe + ce + xe >= N - ($ >= (x || 0) ? z : 0) : !1, [
x,
N,
Oe,
ce,
xe,
$,
z
]), me = S(() => re && $ <= (x || 0) ? (x || 0) - 0 - (ae ? z : 0) : $, [re, $, x, ae, z, he]), We = S(() => re && $ <= (x || 0) ? x || 0 : me < (x || 0) ? $ + (ae ? z : 0) : -1, [re, $, x, me, ae, z]), Ye = H({});
K(() => {
if (y && (Ye.current.start !== ne.start || Ye.current.end !== ne.end)) {
const { start: o, end: h } = ne;
Ye.current = { start: o, end: h }, l && l.exec && l.exec("request-data", { row: { start: o, end: h } });
}
}, [y, ne, l]);
const de = S(() => y ? v || [] : (v || []).slice(ne.start, ne.end), [y, v, ne]), Ne = S(() => (L || []).filter(
(o) => (de || []).some((h) => h.id === o)
), [A, de]), _e = S(() => ne.start, [ne.start]), Et = P((o) => {
ze(o.target.scrollTop), Re(o.target.scrollLeft);
}, []), Tt = P((o) => {
o.shiftKey && o.preventDefault(), _.current && _.current.focus && _.current.focus();
}, []), Je = P(() => !!(f || []).find((o) => !!o.draggable), [f]), Fe = H(null), ve = H(null), $t = H({
dblclick: (o, h) => {
const R = { id: o, column: at(h, "data-col-id") };
l.exec("open-editor", R);
},
click: (o, h) => {
if (Fe.current) return;
const R = at(h, "data-col-id"), k = l.getState().focusCell;
if ((!k || k.row !== o || k.column !== R) && l.exec("focus-cell", { row: o, column: R, eventSource: "click" }), b === !1) return;
const O = c && h.ctrlKey, V = c && h.shiftKey, E = l.getState().selectedRows;
(E.length !== 1 || E[0] !== o) && b && l.exec("select-row", { id: o, toggle: O, range: V });
},
"toggle-row": (o) => {
const h = l.getRow(o);
l.exec(h.open !== !1 ? "close-row" : "open-row", { id: o });
},
"ignore-click": () => !1
}), $e = S(() => ({
top: ce,
bottom: xe,
left: le.width,
xScroll: he,
yScroll: ae,
sense: i && ie ? ie.offsetHeight : Math.max(D?.rowHeight || 0, 40),
node: _.current && _.current.firstElementChild
}), [
ce,
xe,
le.width,
he,
ae,
i,
ie,
D
]);
function kt(o, h) {
const { container: R, sourceNode: k, from: O } = h;
if (Je() && !k.getAttribute("draggable-data"))
return !1;
ye(O), l.getRow(O).open && l.exec("close-row", { id: O, nested: !0 });
const E = Be(k, "data-id"), j = E.cloneNode(!0);
j.classList.remove("wx-selected"), j.querySelectorAll("[tabindex]").forEach((Ce) => Ce.setAttribute("tabindex", "-1")), R.appendChild(j), Ee(j);
const oe = ee - Y.d, ue = ae ? z : 0;
R.style.width = Math.min(
(x || 0) - ue,
re && $ <= (x || 0) ? me : me - ue
) + oe + "px";
const De = Ie(E);
h.offset = {
x: oe,
y: -Math.round(De.height / 2)
}, ve.current || (ve.current = o.clientY);
}
function Ht(o, h) {
const { from: R } = h, k = h.pos, O = Ie(_.current);
k.x = O.x;
const V = $e.top;
if (k.y < V) k.y = V;
else {
const E = O.height - (he && z > 0 ? z : Math.round($e.sense / 2)) - $e.bottom;
k.y > E && (k.y = E);
}
if (_.current.contains(h.targetNode)) {
const E = Be(h.targetNode, "data-id"), j = vt(E?.getAttribute("data-id"));
if (j && j !== R) {
h.to = j;
const oe = i ? ie?.offsetHeight : D?.rowHeight;
if (pe === 0 || k.y > V + oe - 1) {
const ue = E.getBoundingClientRect(), Ce = Ie(ie).y, Xe = ue.y, Le = Ce > Xe ? -1 : 1, Me = Le === 1 ? "after" : "before", Ae = Math.abs(l.getRowIndex(R) - l.getRowIndex(j)), fe = Ae !== 1 ? Me === "before" ? "after" : "before" : Me;
if (Ae === 1 && (Le === -1 && o.clientY > ve.current || Le === 1 && o.clientY < ve.current))
return;
ve.current = o.clientY, l.exec("move-item", {
id: R,
target: j,
mode: fe,
inProgress: !0
});
}
}
d && d({ event: o, context: h });
}
mn(o, O, h, $e);
}
function Mt(o, h) {
const { from: R, to: k } = h;
l.exec("move-item", {
id: R,
target: k,
inProgress: !1
}), Fe.current = setTimeout(() => {
Fe.current = 0;
}, 1), ye(null), Ee(null), ve.current = null, St(h);
}
function At() {
const o = document.createElement("div");
o.style.cssText = "position:absolute;left:-1000px;width:100px;padding:0px;margin:0px;min-height:100px;overflow-y:scroll;", document.body.appendChild(o);
const h = o.offsetWidth - o.clientWidth;
return document.body.removeChild(o), h;
}
const It = S(() => We > 0 ? { width: `${We}px` } : void 0, [We]), et = H(null);
function Vt() {
Promise.resolve().then(() => {
let o = 0, h = _e;
const R = et.current;
R && (Array.from(R.children).forEach((k, O) => {
Pe.current[_e + O] = k.offsetHeight, o += k.offsetHeight, h++;
}), Dt(o), Lt(h));
});
}
K(() => {
de && i && Vt();
}, [de, i, _e]);
let [be, ke] = I();
K(() => {
if (B && (!b || !Ne.length || Ne.includes(B.row)))
ke({ ...B });
else if (de.length && Y.data.length) {
if (!be || Ne.length && !Ne.includes(be.row) || de.findIndex((o) => o.id == be.row) === -1 || Y.data.findIndex(
(o) => o.id == be.column && !o.collapsed
) === -1) {
const o = Ne[0] || de[0].id, h = Y.data.findIndex((R) => !R.collapsed);
ke(h !== -1 ? { row: o, column: Y.data[h].id } : null);
}
} else ke(null);
}, [B]);
const tt = H(null);
K(() => {
const o = _.current;
if (!o) return;
const h = fn(o, u);
return () => {
typeof h == "function" && h();
};
}, [u]);
const nt = H({});
Object.assign(nt.current, {
start: kt,
move: Ht,
end: Mt,
getReorder: () => p,
getDraggableInfo: () => ({ hasDraggable: Je() })
}), K(() => {
const o = _.current;
return o ? pn(o, nt).destroy : void 0;
}, [p, _.current]), K(() => {
const o = _.current;
return o ? Zt(o, {
keys: Sn({ undo: G }),
exec: (R) => l.exec("hotkey", R)
}).destroy : void 0;
}, [l, G]);
const He = H({
scroll: l.getReactiveState().scroll
});
He.current.getWidth = () => (x || 0) - (ae ? z : 0), He.current.getHeight = () => Te, He.current.getScrollMargin = () => le.width + se.width, K(() => {
Jt(tt.current, He.current);
}, []);
const ot = H(null);
K(() => {
const o = ot.current;
if (!o) return;
const h = [];
return h.push(
bt(o, () => l.exec("focus-cell", { eventSource: "click" })).destroy
), h.push(rn(o, $t.current)), () => h.forEach((R) => R());
}, []);
const zt = `wx-grid ${C ? `wx-responsive-${C}` : ""}`;
return /* @__PURE__ */ q(ge, { children: [
/* @__PURE__ */ s(
"div",
{
className: "wx-4VuBwK2D " + zt,
style: {
"--header-height": `${ce}px`,
"--footer-height": `${xe}px`,
"--split-left-width": `${le.width}px`,
"--split-right-width": `${se.width}px`
},
children: /* @__PURE__ */ s(
"div",
{
ref: _,
className: "wx-4VuBwK2D wx-table-box",
style: It,
role: Q ? "treegrid" : "grid",
"aria-colcount": Y.data.length,
"aria-rowcount": de.length,
"aria-multiselectable": Q && c ? !0 : void 0,
tabIndex: -1,
children: /* @__PURE__ */ q(
"div",
{
ref: tt,
className: "wx-4VuBwK2D wx-scroll",
style: {
overflowX: he ? "scroll" : "hidden",
overflowY: ae ? "scroll" : "hidden"
},
onScroll: Et,
children: [
e ? /* @__PURE__ */ s("div", { className: "wx-4VuBwK2D wx-header-wrapper", children: /* @__PURE__ */ s(
ft,
{
contentWidth: me,
deltaLeft: Y.dh,
columns: Y.header,
columnStyle: a,
bodyHeight: Te - +t
}
) }) : null,
/* @__PURE__ */ q(
"div",
{
ref: ot,
className: "wx-4VuBwK2D wx-body",
style: { width: `${me}px`, height: `${Oe}px` },
onMouseDown: (o) => Tt(o),
children: [
r ? /* @__PURE__ */ s(kn, { overlay: r }) : null,
/* @__PURE__ */ s(
"div",
{
ref: et,
className: "wx-4VuBwK2D wx-data",
style: {
paddingTop: `${ne.d}px`,
paddingLeft: `${Y.d}px`
},
children: de.map((o, h) => {
const R = L.indexOf(o.id) !== -1, k = Ke === o.id, O = "wx-row" + (i ? " wx-autoheight" : "") + (w ? " " + w(o) : "") + (R ? " wx-selected" : "") + (k ? " wx-inactive" : ""), V = i ? { minHeight: `${Z}px` } : { height: `${Z}px` };
return /* @__PURE__ */ s(
"div",
{
className: "wx-4VuBwK2D " + O,
"data-id": o.id,
"data-context-id": o.id,
style: V,
role: "row",
"aria-rowindex": h,
"aria-expanded": o.open,
"aria-level": Q ? o.$level + 1 : void 0,
"aria-selected": Q ? R : void 0,
tabIndex: -1,
children: Y.data.map((E) => E.collapsed ? /* @__PURE__ */ s(
"div",
{
className: "wx-4VuBwK2D wx-cell wx-collapsed"
},
E.id
) : W?.id === o.id && W.column == E.id ? /* @__PURE__ */ s(zn, { row: o, column: E }, E.id) : /* @__PURE__ */ s(
Rn,
{
row: o,
column: E,
columnStyle: a,
cellStyle: g,
reorder: p,
focusable: be?.row === o.id && be?.column == E.id
},
E.id
))
},
o.id
);
})
}
)
]
}
),
t && (v || []).length ? /* @__PURE__ */ s(
ft,
{
type: "footer",
contentWidth: me,
deltaLeft: Y.df,
columns: Y.footer,
columnStyle: a
}
) : null
]
}
)
}
)
}
),
M ? /* @__PURE__ */ s(
Pn,
{
config: M,
rowStyle: w,
columnStyle: a,
cellStyle: g,
header: e,
footer: t,
reorder: p
}
) : null
] });
}
const Wn = (n) => n.split("-").map((e) => e ? e.charAt(0).toUpperCase() + e.slice(1) : "").join(""), Jn = Wt(function({
data: e = [],
columns: t = [],
rowStyle: r = null,
columnStyle: c = null,
cellStyle: p = null,
selectedRows: d,
select: w = !0,
multiselect: a = !1,
header: g = !0,
footer: i = !1,
dynamic: u = null,
overlay: x = null,
reorder: N = !1,
onReorder: C = null,
autoRowHeight: l = !1,
sizes: y,
split: f,
tree: v = !1,
autoConfig: m = !1,
init: D = null,
responsive: L = null,
sortMarks: A,
undo: b = !1,
...W
}, Q) {
const B = H();
B.current = W;
const M = S(() => new en(ln), []), G = S(() => M.in, [M]), z = H(null);
z.current === null && (z.current = new Gt(($, we) => {
const U = "on" + Wn($);
B.current && B.current[U] && B.current[U](we);
}), G.setNext(z.current));
const T = S(
() => ({
getState: M.getState.bind(M),
getReactiveState: M.getReactive.bind(M),
getStores: () => ({ data: M }),
exec: G.exec,
setNext: ($) => (z.current = z.current.setNext($), z.current),
intercept: G.intercept.bind(G),
on: G.on.bind(G),
detach: G.detach.bind(G),
getRow: M.getRow.bind(M),
getRowIndex: M.getRowIndex.bind(M),
getColumn: M.getColumn.bind(M)
}),
[M, G]