hightable
Version:
A dynamic windowed scrolling table component for react
1,512 lines (1,511 loc) • 63.7 kB
JavaScript
import { jsx as R, jsxs as z, Fragment as et } from "react/jsx-runtime";
import { createContext as Z, useContext as Y, useEffect as X, useCallback as v, useState as M, useMemo as A, useRef as Q, forwardRef as Nt, useImperativeHandle as Ft, useId as tt } from "react";
import { createPortal as Vt, flushSync as jt } from "react-dom";
function nt(e) {
if (e === void 0)
return {};
const t = `${e}px`;
return { minWidth: t, maxWidth: t };
}
function rt(e) {
return e.offsetWidth;
}
function Ht(e) {
return e.clientWidth;
}
const de = {
cellPosition: {
colIndex: 1,
// the cursor cell is initially the top-left cell
rowIndex: 1
//
},
shouldFocus: !1,
shouldScroll: !1
}, We = Z(de);
function Lt({ colCount: e, rowCount: t, rowPadding: n, children: s }) {
const [o, r] = M(de.cellPosition.colIndex), [i, a] = M(de.cellPosition.rowIndex), [l, c] = M(!1), [d, f] = M(!1), h = v((p) => {
const { key: b, altKey: y, ctrlKey: D, metaKey: E, shiftKey: S } = p;
if (!(y || E || S)) {
if (b === "ArrowRight")
r(D ? e : (x) => x < e ? x + 1 : x);
else if (b === "ArrowLeft")
r(D ? 1 : (x) => x > 1 ? x - 1 : x);
else if (b === "ArrowDown")
a(D ? t : (x) => x < t ? x + 1 : x);
else if (b === "ArrowUp")
a(D ? 1 : (x) => x > 1 ? x - 1 : x);
else if (b === "Home")
D && a(1), r(1);
else if (b === "End")
D && a(t), r(e);
else if (b === "PageDown")
a((x) => x + n <= t ? x + n : t);
else if (b === "PageUp")
a((x) => x - n >= 1 ? x - n : 1);
else if (b !== " ")
return;
p.stopPropagation(), p.preventDefault(), f(!0), c(!0);
}
}, [e, t, n]), w = v((p) => {
const { key: b } = p;
(b === "Tab" && !p.shiftKey || b === "Enter" || b === " ") && (p.stopPropagation(), p.preventDefault(), f(!0), c(!0));
}, []), u = v(() => {
r(de.cellPosition.colIndex), a(de.cellPosition.rowIndex), f(!0), c(!0);
}, []), g = A(() => ({
colIndex: o,
rowIndex: i
}), [o, i]), m = A(() => ({
cellPosition: g,
onTableKeyDown: h,
onScrollKeyDown: w,
setColIndex: r,
setRowIndex: a,
shouldFocus: l,
setShouldFocus: c,
shouldScroll: d,
setShouldScroll: f,
focusFirstCell: u
}), [g, h, w, l, d, u]);
return /* @__PURE__ */ R(We.Provider, { value: m, children: s });
}
function xe({ ref: e, ariaColIndex: t, ariaRowIndex: n }) {
const { cellPosition: { colIndex: s, rowIndex: o }, setColIndex: r, setRowIndex: i, shouldFocus: a, setShouldFocus: l } = Y(We), c = t === s && n === o, d = n === 1 || t === 1;
X(() => {
e.current && c && a && (d || e.current.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" }), e.current.focus(), l?.(!1));
}, [e, c, d, a, l]);
const f = c ? 0 : -1, h = v(() => {
r?.(t), i?.(n), l?.(!0);
}, [r, i, l, t, n]);
return {
tabIndex: f,
navigateToCell: h
};
}
function ot() {
return Y(We);
}
const it = Z([]);
function _t({ columnConfiguration: e, data: t, children: n }) {
const s = A(() => {
const { columnDescriptors: o } = t, r = new Set(o.map((a) => a.name)), i = o.map(({ name: a, sortable: l }, c) => ({
name: a,
index: c,
sortable: l ?? !1,
// Default to false if not specified
...e?.[a] ?? {}
}));
if (e)
for (const a of Object.keys(e))
r.has(a) || console.warn(
`[HighTable] columnConfiguration has unknown key “${a}”. It will be ignored.`
);
return i;
}, [t, e]);
return /* @__PURE__ */ R(it.Provider, { value: s, children: n });
}
function st() {
return Y(it);
}
function Ut() {
const e = st();
return A(() => e.map((n) => n.minWidth), [e]);
}
function Bt({ key: e, parse: t }) {
const n = localStorage.getItem(e);
return n ? (t ?? JSON.parse)(n) : void 0;
}
function Gt({ key: e, value: t, stringify: n }) {
e !== void 0 && (t === void 0 ? localStorage.removeItem(e) : localStorage.setItem(e, (n ?? JSON.stringify)(t)));
}
function ct({ key: e, parse: t, stringify: n } = {}) {
const [s, o] = M(void 0), [r, i] = M(void 0);
return e !== r && (e !== void 0 && o(Bt({ key: e, parse: t })), i(e)), X(() => {
Gt({ key: e, value: s, stringify: n });
}, [s, e, n]), [s, o];
}
const Jt = 50, zt = 3, Xt = 150, qt = 3, at = Z({});
function Qt({ children: e, localStorageKey: t, numColumns: n, minWidth: s }) {
if (!Number.isInteger(n) || n < 0)
throw new Error(`Invalid numColumns: ${n}. It must be a positive integer.`);
const o = v((C) => C !== void 0 && Number.isInteger(C) && C >= 0 && C < n, [n]);
if (s ??= Jt, !le(s))
throw new Error(`Invalid minWidth: ${s}. It must be a positive number.`);
const r = Ut(), i = v((C) => (o(C) ? r[C] : void 0) ?? s, [o, r, s]), a = v((C) => {
if (!C)
return C;
function O(K, F) {
return K !== void 0 && (!le(K) || K < i(F));
}
return C.some((K, F) => O(K, F)) ? C.map((K, F) => {
if (!O(K, F))
return K;
}) : C;
}, [i]), [l, c] = M(void 0), d = v((C) => {
le(C) && c(C);
}, []), [f, h] = ct({ key: t, parse: w, stringify: JSON.stringify });
function w(C) {
const O = JSON.parse(C);
return Array.isArray(O) ? O.map((T) => typeof T == "number" ? T : void 0) : [];
}
const u = Q(f), g = v((C) => {
h((O) => {
const T = C(O);
return u.current = T ?? [], T;
});
}, [h]), m = v((C, O) => {
if (!le(O) || !o(C))
return;
const T = Math.max(O, i(C));
g((K) => {
const F = [...K ?? []];
return F[C] = T, F;
});
}, [o, i, g]), p = v(() => {
g((C) => a(C));
}, [g, a]), b = v((C) => {
if (o(C) && f?.[C] !== void 0)
return !0;
}, [f, o]), [y, D] = M(), E = v((C, O) => {
if (!le(O) || !o(C))
return;
const T = Math.max(O + 1, i(C));
D((K) => {
const F = [...K ?? []];
return F[C] = T, F;
});
}, [o, i, D]), S = v(() => {
D((C) => a(C));
}, [D, a]), x = v((C) => {
o(C) && (g((O) => {
const T = [...O ?? []];
return T[C] = void 0, T;
}), D((O) => {
const T = [...O ?? []];
return T[C] = void 0, T;
}));
}, [o, g, D]), [$, I] = M();
X(() => {
p(), S(), I(Yt({ fixedWidths: u.current, measuredWidths: y, maxTotalWidth: l, numColumns: n, getMinWidth: i }));
}, [n, y, l, i, p, S]);
const k = v((C) => {
if (o(C))
return f?.[C] ?? $?.[C] ?? y?.[C];
}, [o, f, y, $]), H = v((C) => nt(k(C)), [k]), q = A(() => ({
getWidth: k,
getStyle: H,
getDataFixedWidth: b,
releaseWidth: x,
setAvailableWidth: d,
setFixedWidth: m,
setMeasuredWidth: E
}), [k, H, b, x, d, m, E]);
return /* @__PURE__ */ R(at.Provider, { value: q, children: e });
}
function $e() {
return Y(at);
}
function Yt({
fixedWidths: e,
measuredWidths: t,
maxTotalWidth: n,
getMinWidth: s,
numColumns: o
}) {
if (n === void 0)
return [];
if (!t || t.every((f) => f === void 0))
return [];
const r = new Array(o).fill(void 0);
let i = 0;
for (const f of r.keys()) {
const h = e?.[f] ?? t[f] ?? s(f);
i += h;
}
let a = i - Math.max(0, n - qt);
if (a <= 0)
return [];
const l = /* @__PURE__ */ new Map();
for (const [f, h] of t.entries())
if (h !== void 0) {
const w = Math.max(
s(f),
Math.floor(h / zt),
Xt
);
if (h < w)
continue;
const u = l.get(h);
u ? u.push({ index: f, minWidth: w }) : l.set(h, [{ index: f, minWidth: w }]);
}
const c = [...l.entries()].map(
([f, h]) => ({ width: f, columns: h })
).sort((f, h) => f.width - h.width);
let d = 0;
for (; c.length > 0 && d < 100 && a > 0; ) {
d++;
const f = c.pop();
if (f === void 0)
break;
const { width: h, columns: w } = f;
if (w.length === 0)
throw new Error(`Incoherent width group with no columns: ${h}`);
const u = c.pop(), g = Math.max(...w.map((y) => y.minWidth)), m = u === void 0 ? g : Math.max(g, u.width), p = Math.ceil(h - a / w.length);
if (p >= m) {
for (const y of w)
r[y.index] = p;
a -= (h - p) * w.length;
break;
}
for (const y of w)
r[y.index] = m;
a -= (h - m) * w.length;
const b = w.filter((y) => y.minWidth < m);
u?.width === m ? c.push({ width: m, columns: [...u.columns, ...b] }) : (u !== void 0 && c.push(u), b.length > 0 && c.push({ width: m, columns: b }));
}
if (a < 0 && a > -10) {
const f = r.map((w, u) => {
const g = e?.[u], m = t[u];
return {
index: u,
fixed: g !== void 0,
width: w ?? m
};
}).filter(
// tell typescript that width is defined
(w) => !w.fixed && w.width !== void 0
), h = f.length;
if (h > 0) {
const w = Math.floor(-a / h), u = -a % h;
for (const { index: g, width: m } of f.slice(0, u))
r[g] = m + w + 1;
for (const { index: g, width: m } of f.slice(u))
r[g] = m + w;
}
}
return r;
}
function le(e) {
return typeof e == "number" && Number.isFinite(e) && !isNaN(e) && e >= 0;
}
const lt = Z({});
function Zt({ children: e, localStorageKey: t, numColumns: n, onColumnsVisibilityChange: s }) {
if (!Number.isInteger(n) || n < 0)
throw new Error(`Invalid numColumns: ${n}. It must be a positive integer.`);
const [o, r] = ct({ key: t, parse: a, stringify: i });
function i(m) {
return JSON.stringify(m);
}
function a(m) {
const p = JSON.parse(m);
return Array.isArray(p) ? p.map((b) => {
if (b != null && !(typeof b != "object" || !("hidden" in b) || b.hidden !== !0))
return { hidden: !0 };
}) : [];
}
const l = v((m) => Number.isInteger(m) && m >= 0 && m < n, [n]), c = v((m) => o?.[m]?.hidden === !0, [o]), { numberOfHiddenColumns: d, numberOfVisibleColumns: f } = A(() => {
let m = 0;
for (let p = 0; p < n; p++)
c(p) && m++;
return { numberOfHiddenColumns: m, numberOfVisibleColumns: n - m };
}, [n, c]), h = v((m) => !c(m) && f > 1, [c, f]), w = v((m) => {
if (!(!l(m) || !h(m)))
return () => {
r((p) => {
const b = [...p ?? []];
return b[m] = { hidden: !0 }, s?.(b), b;
});
};
}, [h, l, r, s]), u = A(() => {
if (d !== 0)
return () => {
r(void 0), s?.([]);
};
}, [d, r, s]), g = A(() => ({
getHideColumn: w,
showAllColumns: u,
isHiddenColumn: c
}), [w, u, c]);
return /* @__PURE__ */ R(lt.Provider, { value: g, children: e });
}
function ut() {
return Y(lt);
}
function he(e) {
return JSON.stringify(e);
}
function ft({ sortableColumns: e, orderBy: t, exclusiveSort: n }) {
if (!t) return;
const s = t.map(({ column: o }) => o).filter((o) => !e?.has(o));
if (s.length > 0)
throw new Error(`Unsortable columns in orderBy field: ${s.join(", ")}`);
if (n && t.length > 1)
throw new Error("DataFrame is exclusiveSort, but orderBy contains multiple columns");
}
function dt(e, t) {
const n = [];
let s;
const o = [];
for (const r of e)
s ? o.push(r) : r.column === t ? s = r : n.push(r);
return { prefix: n, item: s, suffix: o };
}
function en(e, t) {
const { prefix: n, item: s, suffix: o } = dt(t, e);
return s && n.length === 0 ? s.direction === "ascending" ? [{ column: e, direction: "descending" }, ...o] : [...o] : [{ column: e, direction: "ascending" }, ...n, ...o];
}
function tn(e, t) {
const { item: n } = dt(t, e);
return n ? n.direction === "ascending" ? [{ column: e, direction: "descending" }] : [] : [{ column: e, direction: "ascending" }];
}
function nn(e) {
const t = e.map((i, a) => ({ value: i, index: a })), n = Array.from(t).sort(({ value: i }, { value: a }) => i < a ? -1 : i > a ? 1 : 0), s = Array(n.length).fill(-1);
let o = 0, r;
for (const [i, { value: a, index: l }] of n.entries())
a === r ? s[l] = o : (s[l] = i, o = i, r = a);
return s;
}
function qn({ numRows: e }) {
return ({ row: t, orderBy: n }) => {
if (ee({ row: t, data: { numRows: e } }), n && n.length > 0)
throw new Error("orderBy is not supported in this getRowNumber implementation.");
return { value: t };
};
}
function Me({ row: e, orderBy: t, data: n }) {
ee({ row: e, data: { numRows: n.numRows } }), Ke({ orderBy: t, data: { columnDescriptors: n.columnDescriptors } });
}
function Oe({ row: e, column: t, orderBy: n, data: s }) {
ee({ row: e, data: { numRows: s.numRows } }), be({ column: t, data: { columnDescriptors: s.columnDescriptors } }), Ke({ orderBy: n, data: { columnDescriptors: s.columnDescriptors } });
}
function Te({ rowStart: e, rowEnd: t, columns: n, orderBy: s, data: o }) {
if (e < 0 || t > o.numRows || !Number.isInteger(e) || !Number.isInteger(t) || e > t)
throw new Error(`Invalid row range: ${e} - ${t}, numRows: ${o.numRows}`);
const r = o.columnDescriptors.map((i) => i.name);
if (n?.some((i) => !r.includes(i)))
throw new Error(`Invalid columns: ${n.join(", ")}. Available columns: ${r.join(", ")}`);
Ke({ orderBy: s, data: o });
}
function ee({ row: e, data: { numRows: t } }) {
if (e < 0 || e >= t || !Number.isInteger(e))
throw new Error(`Invalid row index: ${e}, numRows: ${t}`);
}
function be({ column: e, data: { columnDescriptors: t } }) {
const n = t.map((s) => s.name);
if (!n.includes(e))
throw new Error(`Invalid column: ${e}. Available columns: ${n.join(", ")}`);
}
function Ke({ orderBy: e, data: { columnDescriptors: t, exclusiveSort: n } }) {
const s = new Set(t.filter((o) => o.sortable).map((o) => o.name));
ft({ orderBy: e, sortableColumns: s, exclusiveSort: n });
}
function te(e) {
if (e?.aborted)
throw new DOMException("The operation was aborted.", "AbortError");
}
function ht(e) {
const t = [];
let n;
for (const s of e)
n === void 0 ? n = { rowStart: s, rowEnd: s + 1 } : s === n.rowEnd ? n.rowEnd += 1 : (t.push(n), n = { rowStart: s, rowEnd: s + 1 });
return n && t.push(n), t;
}
function rn(e, t, { metadata: n, columnsMetadata: s } = {}) {
const o = 0 in e ? Object.keys(e[0]) : [];
if (s && s.length !== o.length)
throw new Error(`Columns metadata length (${s.length}) does not match the number of columns in the array (${o.length})`);
const r = o.map((c, d) => ({ name: c, metadata: s?.[d] })), i = e.length;
if (t && t.length !== i)
throw new Error(`Row numbers length (${t.length}) does not match the number of rows in the array (${i})`);
if (t?.some((c) => c < 0 || !Number.isInteger(c)))
throw new Error(`Row numbers must be non-negative integers, but got: ${t.join(", ")}`);
function a({ row: c, orderBy: d }) {
if (Me({ row: c, orderBy: d, data: { numRows: i, columnDescriptors: r } }), !t)
return { value: c };
if (t[c] === void 0)
throw new Error(`Row number not found for row ${c}, but row numbers are provided.`);
return { value: t[c] };
}
function l({ row: c, column: d, orderBy: f }) {
Oe({ column: d, row: c, orderBy: f, data: { numRows: i, columnDescriptors: r } });
const h = e[c];
if (!h)
throw new Error(`Row ${c} not found in data`);
if (!(d in h))
throw new Error(`Column "${d}" not found in row ${c}`);
return { value: h[d] };
}
return { metadata: n, numRows: i, columnDescriptors: r, getRowNumber: a, getCell: l };
}
function Ne() {
return new EventTarget();
}
function Qn({ data: e, filter: t }) {
const n = Array.from({ length: e.numRows }, (f, h) => h).filter((f) => t({ row: f })), s = n.length, o = e.columnDescriptors.map(({ name: f, metadata: h }) => ({
name: f,
sortable: !1,
metadata: structuredClone(h)
// Create a deep copy of the column metadata to avoid mutating the original
})), r = structuredClone(e.metadata);
function i({ row: f }) {
ee({ row: f, data: { numRows: s } });
const h = n[f];
if (h === void 0)
throw new Error(`Upstream row not found for row ${f}.`);
return h;
}
function a({ row: f, orderBy: h }) {
Me({ row: f, orderBy: h, data: { numRows: s, columnDescriptors: o } });
const w = i({ row: f });
return e.getRowNumber({ row: w });
}
function l({ row: f, column: h, orderBy: w }) {
Oe({ column: h, row: f, orderBy: w, data: { numRows: s, columnDescriptors: o } });
const u = i({ row: f });
return e.getCell({ row: u, column: h });
}
const { fetch: c } = e, d = {
metadata: r,
columnDescriptors: o,
numRows: s,
getRowNumber: a,
getCell: l
};
if (c !== void 0) {
const f = Ne(), h = async function({ rowStart: w, rowEnd: u, columns: g, orderBy: m, signal: p }) {
Te({ rowStart: w, rowEnd: u, columns: g, orderBy: m, data: { numRows: s, columnDescriptors: o } }), te(p);
function b() {
f.dispatchEvent(new CustomEvent("resolve"));
}
try {
e.eventTarget?.addEventListener("resolve", b);
const D = ht(n.slice(w, u)).map((E) => c({ ...E, columns: g, signal: p }).then(() => {
te(p), f.dispatchEvent(new CustomEvent("resolve"));
}));
await Promise.all(D);
} finally {
e.eventTarget?.removeEventListener("resolve", b);
}
};
d.eventTarget = f, d.fetch = h;
}
return d;
}
function Yn(e) {
const t = on(e);
return e.sortable ? sn(t) : t;
}
function on(e) {
const t = e.header.map((c) => ({ name: c })), { numRows: n } = e, s = Ne(), o = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
function i({ row: c, orderBy: d }) {
return Me({ row: c, orderBy: d, data: { numRows: n, columnDescriptors: t } }), o.get(c);
}
function a({ row: c, column: d, orderBy: f }) {
return Oe({ column: d, row: c, orderBy: f, data: { numRows: n, columnDescriptors: t } }), r.get(d)?.get(c);
}
async function l({ rowStart: c, rowEnd: d, columns: f, orderBy: h, signal: w }) {
Te({ rowStart: c, rowEnd: d, columns: f, orderBy: h, data: { numRows: n, columnDescriptors: t } }), te(w);
const u = Array.from({ length: d - c }, (p, b) => c + b).filter(
(p) => !i({ row: p }) || f?.some((b) => !a({ row: p, column: b }))
);
if (u.length === 0)
return;
const g = ht(u), m = [];
for (const p of g) {
const { rowStart: b, rowEnd: y } = p, D = e.rows({ start: b, end: y });
for (const [E, S] of D.entries()) {
const x = b + E, { index: $, cells: I } = S;
m.push($.then((k) => {
te(w), o.get(x)?.value !== k && (o.set(x, { value: k }), s.dispatchEvent(new CustomEvent("resolve")));
}));
for (const k of t.map((H) => H.name)) {
if (I[k] === void 0)
continue;
const H = I[k];
m.push(H.then((q) => {
te(w), r.has(k) || r.set(k, /* @__PURE__ */ new Map());
const C = r.get(k)?.get(x);
(!C || C.value !== q) && (r.get(k)?.set(x, { value: q }), s.dispatchEvent(new CustomEvent("resolve")));
}));
}
}
}
await Promise.all(m);
}
return {
columnDescriptors: t,
numRows: n,
getRowNumber: i,
getCell: a,
fetch: l,
eventTarget: s
};
}
function sn(e, t) {
const n = t?.sortableColumns ?? new Set(e.columnDescriptors.map((u) => u.name)), s = t?.exclusiveSort ?? e.exclusiveSort;
for (const u of n)
be({ column: u, data: { columnDescriptors: e.columnDescriptors } });
if (e.columnDescriptors.every(({ name: u, sortable: g }) => n.has(u) ? g === !0 : g === !1 || g === void 0))
return t && "exclusiveSort" in t && e.exclusiveSort !== t.exclusiveSort ? { ...e, exclusiveSort: t.exclusiveSort } : e;
const { numRows: o } = e, r = e.columnDescriptors.map(({ name: u, metadata: g }) => ({
name: u,
sortable: n.has(u),
metadata: structuredClone(g)
// Create a deep copy of the column metadata to avoid mutating the original
})), i = structuredClone(e.metadata), a = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map(), c = Ne(), d = function({ row: u, orderBy: g }) {
if (ee({ row: u, data: { numRows: o } }), ft({ orderBy: g, sortableColumns: n, exclusiveSort: s }), !g || g.length === 0)
return { value: u };
const m = he(g), b = l.get(m)?.[u];
if (b !== void 0)
return { value: b };
};
return { metadata: i, numRows: o, columnDescriptors: r, getRowNumber: function({ row: u, orderBy: g }) {
ee({ row: u, data: { numRows: o } });
const m = d({ row: u, orderBy: g });
if (m)
return e.getRowNumber({ row: m.value });
}, getCell: function({ row: u, column: g, orderBy: m }) {
be({ column: g, data: { columnDescriptors: r } }), ee({ row: u, data: { numRows: o } });
const p = d({ row: u, orderBy: m });
if (p)
return e.getCell({ row: p.value, column: g });
}, fetch: async function({ rowStart: u, rowEnd: g, columns: m, orderBy: p, signal: b }) {
Te({ rowStart: u, rowEnd: g, columns: m, orderBy: p, data: { numRows: o, columnDescriptors: r } });
function y() {
c.dispatchEvent(new CustomEvent("resolve"));
}
e.eventTarget?.addEventListener("resolve", y);
try {
if (!p || p.length === 0) {
await e.fetch?.({ rowStart: u, rowEnd: g, columns: m, signal: b });
return;
}
if (u === g)
return;
const D = await an({
orderBy: p,
signal: b,
ranksByColumn: a,
indexes: l.get(he(p)),
setIndexes: ({ orderBy: E, indexes: S }) => {
l.set(he(E), S), c.dispatchEvent(new CustomEvent("resolve"));
},
data: e
});
m && m.length > 0 && e.fetch && await cn({ columns: m, signal: b, indexes: D.slice(u, g), fetch: e.fetch });
} finally {
e.eventTarget?.removeEventListener("resolve", y);
}
}, eventTarget: c, exclusiveSort: s };
}
async function cn({ columns: e, indexes: t, signal: n, fetch: s }) {
const o = t.sort(), r = [];
let i;
for (const a of o)
i === void 0 ? i = [a, a + 1] : i[1] === a ? i[1] = a + 1 : (r.push(s({ rowStart: i[0], rowEnd: i[1], columns: e, signal: n })), i = [a, a + 1]);
i && r.push(s({ rowStart: i[0], rowEnd: i[1], columns: e, signal: n })), await Promise.all(r);
}
async function an({ orderBy: e, signal: t, ranksByColumn: n, setRanks: s, indexes: o, setIndexes: r, data: i }) {
if (!o) {
const a = await ln({ orderBy: e, signal: t, ranksByColumn: n, setRanks: s, data: i });
o = un(a), r?.({ orderBy: e, indexes: o });
}
return o;
}
async function ln({ orderBy: e, signal: t, ranksByColumn: n, setRanks: s, data: o }) {
const r = [], i = [];
for (const [a, { column: l, direction: c }] of e.entries()) {
be({ column: l, data: { columnDescriptors: o.columnDescriptors } });
const d = n?.get(l);
d ? r[a] = { direction: c, ranks: d } : i.push(
(o.fetch ? o.fetch({ rowStart: 0, rowEnd: o.numRows, columns: [l], signal: t }) : Promise.resolve()).then(() => {
te(t);
const f = Array.from({ length: o.numRows }, (w, u) => {
const g = o.getCell({ row: u, column: l });
if (!g)
throw new Error(`Cell not found for row ${u} and column ${l}`);
return g.value;
}), h = nn(f);
s?.({ column: l, ranks: h }), r[a] = { direction: c, ranks: h };
})
);
}
return await Promise.all(i), r;
}
function un(e) {
if (!(0 in e))
throw new Error("orderByWithRanks should have at least one element");
const t = e[0].ranks.length;
return Array.from({ length: t }, (o, r) => r).sort((o, r) => {
for (const { direction: i, ranks: a } of e) {
const l = a[o], c = a[r];
if (l === void 0 || c === void 0)
throw new Error("Invalid ranks");
const d = i === "ascending" ? 1 : -1;
if (l < c) return -d;
if (l > c) return d;
}
return o - r;
});
}
function fn() {
return {
data: rn([]),
key: "default",
version: 0
};
}
const mt = Z(fn());
function Ge() {
return crypto.randomUUID();
}
function dn({ children: e, data: t }) {
const [n, s] = M(Ge()), [o, r] = M(t), [i, a] = M(0);
return X(() => {
function l() {
a((c) => c + 1);
}
return t.eventTarget?.addEventListener("resolve", l), () => {
t.eventTarget?.removeEventListener("resolve", l);
};
}, [t]), t !== o && (s(Ge()), r(t), a(0)), /* @__PURE__ */ R(mt.Provider, { value: {
data: t,
key: n,
version: i
}, children: e });
}
function Fe() {
return Y(mt);
}
function gt({ value: e, onChange: t, defaultValue: n, disabled: s }) {
const [o] = M(e), [r] = M(e !== void 0), [i] = M(s ?? !1), [a, l] = M(n), c = v((d) => {
t?.(d), l(d);
}, [t]);
return i ? {} : r ? (e === void 0 && console.warn("The value is controlled (it has no local state) because the property was initially defined. It cannot be set to undefined now (it is set back to the initial value)."), {
value: e ?? o,
// read-only if onChange is undefined
onChange: t
}) : (e !== void 0 && console.warn("The value is uncontrolled (it only has a local state) because the property was initially undefined. It cannot be set to a value now and is ignored."), { value: a, onChange: c });
}
const wt = Z({});
function hn({ children: e, orderBy: t, onOrderByChange: n }) {
const s = gt({
value: t,
onChange: n,
defaultValue: []
});
return /* @__PURE__ */ R(wt.Provider, { value: {
orderBy: s.value,
onOrderByChange: s.onChange
}, children: e });
}
function pt() {
return Y(wt);
}
const vt = Z({
containerRef: { current: null }
});
function mn({
children: e
}) {
const t = Q(null);
return /* @__PURE__ */ R(vt.Provider, { value: { containerRef: t }, children: e });
}
function bt() {
return Y(vt);
}
function Je() {
return { ranges: [], anchor: void 0 };
}
function ye(e) {
return Number.isInteger(e) && e >= 0;
}
function Ve(e) {
return ye(e.start) && ye(e.end) && e.end > e.start;
}
function je(e) {
if (e.length === 0)
return !0;
if (e.some((t) => !Ve(t)))
return !1;
for (let t = 0; t < e.length - 1; t++) {
const n = e[t], s = e[t + 1];
if (!n || !s || n.end >= s.start)
return !1;
}
return !0;
}
function Re({ ranges: e, index: t }) {
if (!ye(t))
throw new Error("Invalid index");
if (!je(e))
throw new Error("Invalid ranges");
return e.some((n) => n.start <= t && t < n.end);
}
function yt({ ranges: e, range: t }) {
if (!je(e))
throw new Error("Invalid ranges");
if (!Ve(t))
throw new Error("Invalid range");
const n = [], { start: s, end: o } = t;
let r = 0;
for (; r < e.length; ) {
const i = e[r];
if (!i)
throw new Error("Invalid range");
if (i.end >= s)
break;
n.push({ ...i }), r++;
}
for (; r < e.length; ) {
const i = e[r];
if (!i)
throw new Error("Invalid range");
if (i.start > o)
break;
t.start = Math.min(t.start, i.start), t.end = Math.max(t.end, i.end), r++;
}
for (n.push(t); r < e.length; ) {
const i = e[r];
if (!i)
throw new Error("Invalid range");
n.push({ ...i }), r++;
}
return n;
}
function xt({ ranges: e, index: t }) {
return yt({ ranges: e, range: { start: t, end: t + 1 } });
}
function Rt({ ranges: e, index: t }) {
return Ct({ ranges: e, range: { start: t, end: t + 1 } });
}
function Ct({ ranges: e, range: t }) {
if (!je(e))
throw new Error("Invalid ranges");
if (!Ve(t))
throw new Error("Invalid range");
const n = [], { start: s, end: o } = t;
let r = 0;
for (; r < e.length; ) {
const i = e[r];
if (!i)
throw new Error("Invalid range");
if (i.end >= s)
break;
n.push({ ...i }), r++;
}
for (; r < e.length; ) {
const i = e[r];
if (!i)
throw new Error("Invalid range");
if (i.start >= o)
break;
i.start < s && n.push({ start: i.start, end: s }), i.end > o && n.push({ start: o, end: i.end }), r++;
}
for (; r < e.length; ) {
const i = e[r];
if (!i)
throw new Error("Invalid range");
n.push({ ...i }), r++;
}
return n;
}
function Et({ ranges: e, index: t }) {
if (!ye(t))
throw new Error("Invalid index");
const n = { start: t, end: t + 1 };
return Re({ ranges: e, index: t }) ? Ct({ ranges: e, range: n }) : yt({ ranges: e, range: n });
}
function Ae({ selection: e, index: t }) {
return { ranges: Et({ ranges: e.ranges, index: t }), anchor: t };
}
function gn({ selection: e }) {
return e.ranges.reduce((t, n) => t + (n.end - n.start), 0);
}
const St = Z({});
function wn({ children: e, data: t, onError: n, selection: s, onSelectionChange: o }) {
const { value: r, onChange: i } = gt({
value: s,
onChange: o,
defaultValue: Je(),
disabled: s === void 0 && o === void 0
}), [a] = M(() => /* @__PURE__ */ new Map()), [l, c] = M(Dt({ data: t, selection: r })), { orderBy: d } = pt(), [f, h] = M(void 0), w = v(({ gesture: E }) => {
E.controller.abort(), h((S) => {
if (S !== E)
return S;
});
}, [h]), u = v(() => {
const E = { controller: new AbortController() };
return h((S) => (S && S.controller.abort(), E)), E;
}, []), g = A(() => r !== void 0, [r]), m = A(() => {
if (r)
return ({ rowNumber: E }) => {
if (E !== void 0)
return Re({ ranges: r.ranges, index: E });
};
}, [r]), p = A(() => {
if (!(!r || !i))
return ({ rowNumber: E }) => {
const S = u();
try {
i(Ae({ selection: r, index: E }));
} finally {
w({ gesture: S });
}
};
}, [i, r, u, w]), b = A(() => {
if (!(!r || !i))
return ({ row: E, rowNumber: S }) => {
const x = u(), { signal: $ } = x.controller;
bn({ data: t, row: E, rowNumber: S, selection: r, orderBy: d, signal: $, rowByRowNumberAndOrderBy: a }).finally(() => {
w({ gesture: x });
}).then((I) => {
i(I);
}).catch((I) => {
I instanceof Error && I.name === "AbortError" || n?.(I);
});
};
}, [i, r, a, t, d, u, w, n]), y = A(() => {
if (!(!r || !i))
return () => {
const E = u(), { signal: S } = E.controller;
ze({ data: t, selection: r, signal: S }).finally(() => {
w({ gesture: E });
}).then((x) => {
i(x);
}).catch((x) => {
x instanceof Error && x.name === "AbortError" || n?.(x);
});
};
}, [i, t, r, u, w, n]), D = v((E) => {
const { key: S, shiftKey: x } = E;
if (S === "Escape") {
const $ = u();
try {
i?.(Je());
} finally {
w({ gesture: $ });
}
} else if (S === "a" && (E.ctrlKey || E.metaKey)) {
const $ = u(), { signal: I } = $.controller;
E.preventDefault(), r && i && ze({ data: t, selection: r, signal: I }).finally(() => {
w({ gesture: $ });
}).then((k) => {
i(k);
}).catch((k) => {
k instanceof Error && k.name === "AbortError" || n?.(k);
});
} else if (S === " " && x) {
const { target: $ } = E;
if (!r || !i || !($ instanceof HTMLTableCellElement))
return;
const I = Number($.getAttribute("data-rownumber"));
if (!($.getAttribute("role") === "cell") || isNaN(I) || !Number.isInteger(I) || I < 0 || I >= t.numRows)
return;
E.preventDefault();
const H = u();
try {
i({ ranges: Et({ ranges: r.ranges, index: I }), anchor: I });
} finally {
w({ gesture: H });
}
}
}, [r, i, u, w, t, n]);
return X(() => {
if (!r) return;
const E = u(), { signal: S } = E.controller;
kt({ data: t, selection: r, signal: S }).finally(() => {
w({ gesture: E });
}).then((x) => {
c(x);
}).catch((x) => {
x instanceof Error && x.name === "AbortError" || n?.(x);
});
}, [r, t, u, w, n]), /* @__PURE__ */ R(St.Provider, { value: {
selectable: g,
pendingSelectionGesture: f !== void 0,
isRowSelected: m,
toggleRowNumber: p,
toggleRangeToRowNumber: b,
onTableKeyDown: D,
toggleAllRows: y,
allRowsSelected: l
}, children: e });
}
function pn() {
return Y(St);
}
async function He({ data: e, rowStart: t, rowEnd: n, orderBy: s, signal: o }) {
return await e.fetch?.({ rowStart: t, rowEnd: n, orderBy: s, signal: o }), Array.from({ length: n - t }, (i, a) => {
const l = a + t, c = e.getRowNumber({ row: l, orderBy: s })?.value;
if (c === void 0)
throw new Error(`Row number is undefined for row ${l} with orderBy ${JSON.stringify(s ?? [])}`);
return c;
});
}
async function vn({ data: e, rowNumber: t, orderBy: n, signal: s, rowByRowNumberAndOrderBy: o }) {
te(s);
const { numRows: r } = e, i = he(n ?? []), a = o?.get(i);
if (a)
return a.get(t);
const l = /* @__PURE__ */ new Map();
await e.fetch?.({ rowStart: 0, rowEnd: r, orderBy: n, signal: s });
for (let c = 0; c < r; c++) {
const d = e.getRowNumber({ row: c, orderBy: n })?.value;
if (d === void 0)
throw new Error(`Row number is undefined for row ${c} with orderBy ${i}`);
l.set(d, c);
}
return o?.set(i, l), l.get(t);
}
async function bn({ data: e, row: t, rowNumber: n, selection: s, orderBy: o, signal: r, rowByRowNumberAndOrderBy: i }) {
const { anchor: a } = s;
if (a === void 0 || a === n)
return Ae({ selection: s, index: n });
const l = await vn({ data: e, rowNumber: a, orderBy: o, signal: r, rowByRowNumberAndOrderBy: i });
if (l === void 0 || l === t)
return Ae({ selection: s, index: n });
const [c, d] = l < t ? [l + 1, t + 1] : [t, l], f = await He({ data: e, rowStart: c, rowEnd: d, orderBy: o, signal: r });
let { ranges: h } = s;
const w = e.getRowNumber({ row: t, orderBy: o })?.value;
if (w === void 0)
throw new Error(`Row number for row ${t} not found in orderBy ${he(o ?? [])}`);
const u = Re({ ranges: h, index: a });
for (const g of f)
h = u ? xt({ ranges: h, index: g }) : Rt({ ranges: h, index: g });
return { ranges: h, anchor: w };
}
async function ze({ data: e, selection: t, signal: n }) {
const s = await kt({ data: e, selection: t, signal: n }), o = await He({ data: e, rowStart: 0, rowEnd: e.numRows, signal: n });
let { ranges: r } = t;
for (const i of o)
r = s ? Rt({ ranges: r, index: i }) : xt({ ranges: r, index: i });
return { ranges: r };
}
function Dt({ data: e, selection: t }) {
if (!t || e.numRows === 0 || gn({ selection: t }) < e.numRows)
return !1;
}
async function kt({ data: e, selection: t, signal: n }) {
const s = Dt({ data: e, selection: t });
if (s !== void 0)
return s;
const o = await He({ data: e, rowStart: 0, rowEnd: e.numRows, signal: n });
return o.length > 0 && o.every((r) => Re({ ranges: t.ranges, index: r }));
}
function Ie(e) {
return typeof e == "string" ? e : typeof e == "number" || typeof e == "bigint" ? e.toLocaleString("en-US") : typeof e == "boolean" ? e.toString() : Array.isArray(e) ? `[
${e.map((t) => Xe(Ie(t), 2)).join(`,
`)}
]` : e == null ? JSON.stringify(e) : e instanceof Date ? e.toISOString() : typeof e == "object" ? `{
${Object.entries(e).filter((t) => t[1] !== void 0).map(([t, n]) => Xe(`${t}: ${Ie(n)}`, 2)).join(`,
`)}
}` : JSON.stringify(e);
}
function Xe(e, t) {
return e?.split(`
`).map((n) => " ".repeat(t) + n).join(`
`);
}
function Le(e) {
return v((t) => {
e === void 0 || !document.getSelection()?.isCollapsed || (t.preventDefault(), navigator.clipboard.writeText(e).catch((n) => {
console.debug("Failed to write to clipboard: ", n);
}));
}, [e]);
}
function yn({ cell: e, onDoubleClickCell: t, onMouseDownCell: n, onKeyDownCell: s, stringify: o, columnIndex: r, className: i, ariaColIndex: a, ariaRowIndex: l, rowNumber: c, renderCellContent: d }) {
const f = Q(null), { tabIndex: h, navigateToCell: w } = xe({ ref: f, ariaColIndex: a, ariaRowIndex: l }), u = $e().getStyle?.(r), g = A(() => o(e?.value), [o, e]), m = A(() => {
if (g !== void 0) {
if (g.length > 400)
return `${g.slice(0, 397)}…`;
if (g.length > 100)
return g;
}
}, [g]), p = A(() => d?.({ cell: e, stringify: o, col: r, row: c }) ?? g, [e, o, r, c, d, g]), b = v((S) => {
w(), n && c !== void 0 && n(S, r, c);
}, [w, n, c, r]), y = v((S) => {
w(), t && c !== void 0 && t(S, r, c);
}, [w, t, c, r]), D = v((S) => {
s && c !== void 0 && s(S, r, c);
}, [s, c, r]), E = Le(g);
return /* @__PURE__ */ R(
"td",
{
ref: f,
role: "cell",
"aria-busy": e === void 0,
"aria-rowindex": l,
"aria-colindex": a,
"data-rownumber": c,
tabIndex: h,
onCopy: E,
onDoubleClick: y,
onMouseDown: b,
onKeyDown: D,
style: u,
className: i,
title: m,
children: p
}
);
}
function pe({
children: e,
ariaRowIndex: t,
selected: n,
rowNumber: s,
title: o
}) {
return /* @__PURE__ */ R(
"tr",
{
role: "row",
"aria-rowindex": t,
title: o,
"aria-selected": n,
"data-rownumber": s,
children: e
}
);
}
function xn(e) {
return e === void 0 ? "" : (e + 1).toLocaleString("en-US");
}
function ke({ onCheckboxPress: e, pendingSelectionGesture: t, style: n, ariaColIndex: s, ariaRowIndex: o, selected: r, rowNumber: i }) {
const a = Q(null), { tabIndex: l, navigateToCell: c } = xe({ ref: a, ariaColIndex: s, ariaRowIndex: o }), d = v((m) => {
c(), e?.({ shiftKey: m.shiftKey });
}, [e, c]), f = v((m) => {
(m.key === "Enter" || m.key === " ") && (m.preventDefault(), m.stopPropagation(), e?.({ shiftKey: m.shiftKey }));
}, [e]), h = e === void 0, w = v((m) => {
m.preventDefault();
}, []), u = A(() => xn(i), [i]), g = Le(u);
return /* @__PURE__ */ z(
"th",
{
ref: a,
scope: "row",
role: "rowheader",
style: n,
onClick: d,
onCopy: g,
onKeyDown: f,
"aria-busy": i === void 0,
"aria-checked": r,
"aria-rowindex": o,
"aria-colindex": s,
"aria-disabled": h,
tabIndex: l,
"data-rownumber": i,
children: [
/* @__PURE__ */ R("span", { children: u }),
r !== void 0 && /* @__PURE__ */ R(
"input",
{
type: "checkbox",
onChange: w,
readOnly: h,
disabled: h,
"aria-busy": t,
checked: r,
role: "presentation",
tabIndex: -1
}
)
]
}
);
}
function Rn({ children: e, checked: t, onCheckboxPress: n, pendingSelectionGesture: s, style: o, ariaColIndex: r, ariaRowIndex: i }, a) {
const l = Q(null);
Ft(a, () => ({
get offsetWidth() {
return l.current?.offsetWidth ?? 0;
}
}), []);
const { tabIndex: c, navigateToCell: d } = xe({ ref: l, ariaColIndex: r, ariaRowIndex: i }), f = v(() => {
d(), n?.();
}, [n, d]), h = v((m) => {
(m.key === "Enter" || m.key === " ") && (m.preventDefault(), m.stopPropagation(), n?.());
}, [n]), w = t !== void 0, u = n === void 0, g = v((m) => {
m.preventDefault();
}, []);
return /* @__PURE__ */ R(
"td",
{
ref: l,
style: o,
onClick: f,
onKeyDown: h,
"aria-checked": t,
"aria-rowindex": i,
"aria-colindex": r,
"aria-disabled": u,
tabIndex: c,
children: w ? /* @__PURE__ */ R(
"input",
{
type: "checkbox",
onChange: g,
readOnly: u,
disabled: u,
"aria-busy": s,
checked: t,
role: "presentation",
tabIndex: -1
}
) : /* @__PURE__ */ R("span", { children: e })
}
);
}
const Pt = Nt(Rn);
Pt.displayName = "TableCorner";
function Cn(e, t) {
const [n, s] = M({ left: 0, top: 0 }), [o, r] = M(!1), i = tt(), a = v(() => {
r(!1);
}, []), l = v(
(c) => {
c.stopPropagation();
const d = e.current?.getBoundingClientRect(), f = c.currentTarget.getBoundingClientRect();
s({
left: f.left,
top: d?.bottom ?? 0
}), t(), r((h) => !h);
},
[e, t]
);
return {
isOpen: o,
position: n,
menuId: i,
close: a,
handleMenuClick: l
};
}
const En = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
function Sn(e, t) {
const n = Q(null), s = v(() => [...t.current?.querySelectorAll(En) ?? []].filter((r) => r instanceof HTMLElement), [t]);
X(() => {
if (e) {
const { activeElement: r } = document;
r instanceof HTMLElement && (n.current = document.activeElement);
const i = s().at(0);
i && requestAnimationFrame(() => {
i.focus();
});
} else n.current && (n.current.focus(), n.current = null);
}, [e, s]);
const o = v((r) => {
const i = s();
if (!i.length)
return;
const { activeElement: a } = document;
if (!a || !(a instanceof HTMLElement))
return;
const l = Array.from(i).indexOf(a);
let c;
switch (r) {
case "first":
c = 0;
break;
case "last":
c = i.length - 1;
break;
case "next":
c = l >= i.length - 1 ? 0 : l + 1;
break;
case "previous":
c = l <= 0 ? i.length - 1 : l - 1;
break;
}
i[c]?.focus();
}, [s]);
return { getFocusableElements: s, navigateFocus: o };
}
function Dn(e) {
switch (e) {
case "ascending":
return "Ascending";
case "descending":
return "Descending";
default:
return "No sort";
}
}
function qe({ title: e, children: t }) {
return /* @__PURE__ */ z(et, { children: [
/* @__PURE__ */ R("div", { role: "separator", children: e }),
t
] });
}
function Pe({ onClick: e, label: t }) {
const n = v((o) => {
o.preventDefault(), o.stopPropagation(), e?.();
}, [e]), s = v((o) => {
(o.key === "Enter" || o.key === " ") && (o.stopPropagation(), o.preventDefault(), e?.());
}, [e]);
return /* @__PURE__ */ R(
"button",
{
role: "menuitem",
onClick: n,
onKeyDown: s,
tabIndex: 0,
type: "button",
children: t
}
);
}
function kn({ onClick: e }) {
return /* @__PURE__ */ R("div", { role: "presentation", onClick: e });
}
function Pn({
columnName: e,
isOpen: t,
position: n,
direction: s,
sortable: o,
toggleOrderBy: r,
hideColumn: i,
showAllColumns: a,
close: l,
id: c
}) {
const { containerRef: d } = bt(), [f, h] = M(void 0);
X(() => {
f || !d.current || h(d.current);
}, [f, d]);
const { top: w, left: u } = n, g = Q(null), m = tt(), { navigateFocus: p } = Sn(t, g), { focusFirstCell: b } = ot(), y = v((k) => {
switch (k.preventDefault(), k.stopPropagation(), k.key) {
case "Escape":
l();
break;
case "Enter":
case " ":
break;
case "ArrowUp":
case "ArrowLeft":
p("previous");
break;
case "ArrowDown":
case "ArrowRight":
p("next");
break;
case "Home":
p("first");
break;
case "End":
p("last");
break;
case "Tab":
p(k.shiftKey ? "previous" : "next");
break;
}
}, [p, l]), D = v(
(k) => {
k.preventDefault(), k.stopPropagation(), l();
},
[l]
), E = v((k) => {
k.preventDefault(), k.stopPropagation();
}, []), S = A(() => {
if (i)
return () => {
i(), b?.(), l();
};
}, [i, l, b]), x = A(() => {
if (a)
return () => {
a(), l();
};
}, [a, l]);
if (!t)
return null;
const $ = Dn(s), I = !(!S && !x);
return f ? Vt(
/* @__PURE__ */ z(et, { children: [
/* @__PURE__ */ R(kn, { onClick: D }),
/* @__PURE__ */ z(
"div",
{
id: c,
role: "menu",
style: { top: w, left: u },
ref: g,
tabIndex: -1,
"aria-labelledby": m,
"aria-orientation": "vertical",
onKeyDown: y,
onClick: E,
children: [
/* @__PURE__ */ R("div", { role: "presentation", id: m, "aria-hidden": "true", children: e }),
o && /* @__PURE__ */ R(qe, { title: "Sort order", children: /* @__PURE__ */ R(
Pe,
{
onClick: r,
label: $
}
) }),
I && /* @__PURE__ */ z(qe, { title: "Visibility", children: [
S && /* @__PURE__ */ R(
Pe,
{
onClick: S,
label: "Hide column"
}
),
x && /* @__PURE__ */ R(
Pe,
{
onClick: x,
label: "Show all columns"
}
)
] })
]
}
)
] }),
f
) : null;
}
function An({
onClick: e,
onEscape: t,
tabIndex: n = 0,
isExpanded: s = !1,
menuId: o,
disabled: r = !1,
"aria-label": i = "Column menu",
icon: a = /* @__PURE__ */ R("span", { "aria-hidden": "true", children: "⋮" })
}) {
const l = v((d) => {
d.key === "Enter" || d.key === " " ? (d.preventDefault(), d.stopPropagation(), e?.(d)) : d.key === "Escape" && (d.preventDefault(), d.stopPropagation(), t?.(d));
}, [e, t]), c = v((d) => {
e?.(d);
}, [e]);
return /* @__PURE__ */ R(
"button",
{
type: "button",
onClick: r ? void 0 : c,
onKeyDown: r ? void 0 : l,
"aria-label": i,
"aria-haspopup": "menu",
"aria-expanded": s,
"aria-controls": o,
disabled: r,
tabIndex: r ? -1 : n,
children: a
}
);
}
const Qe = 10, Ye = 100;
function In({ autoResize: e, resizeTo: t, width: n, tabIndex: s, navigateToCell: o }) {
const [r, i] = M(void 0), [a, l] = M(!1), c = v(() => {
r || e?.(), o?.();
}, [e, o, r]), d = v((y) => {
y.stopPropagation();
}, []), f = v((y) => {
if (y.button !== 0 || y.ctrlKey || y.metaKey || (o?.(), y.stopPropagation(), n === void 0))
return;
const { clientX: D, currentTarget: E, pointerId: S } = y;
i({ clientX: D, pointerId: S, width: n }), "setPointerCapture" in E && E.setPointerCapture(S);
}, [o, n]), h = v((y) => {
!r || y.pointerId !== r.pointerId || t?.(r.width - r.clientX + y.clientX);
}, [t, r]), w = v((y) => {
y.stopPropagation(), i((D) => {
if (!(D && y.pointerId === D.pointerId))
return D;
});
}, []), u = v(() => {
l(!0);
}, []), g = v(() => {
l(!1);
}, []), m = v((y) => {
if (a && ([" ", "ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End"].includes(y.key) && y.preventDefault(), y.stopPropagation(), !r)) {
if (y.key === "Escape") {
l(!1), o?.();
return;
}
if (y.key === "Enter" || y.key === " ") {
c();
return;
}
n !== void 0 && (y.key === "ArrowRight" || y.key === "ArrowUp" ? t?.(n + Qe) : y.key === "ArrowLeft" || y.key === "ArrowDown" ? t?.(n - Qe) : y.key === "PageUp" ? t?.(n + Ye) : y.key === "PageDown" ? t?.(n - Ye) : y.key === "Home" && t?.(0));
}
}, [c, r, t, n, a, o]), p = r !== void 0 || a, b = A(() => n === void 0 ? "No width set." : `Width set to ${n} pixels.`, [n]);
return /* @__PURE__ */ R(
"span",
{
role: "spinbutton",
"aria-orientation": "vertical",
"aria-busy": p,
"aria-valuemin": 0,
"aria-valuenow": n,
"aria-valuetext": b,
"aria-label": "Resize column",
"aria-description": 'Press "Enter" or "Space" to autoresize the column (press again to unset the width). Press "Escape" to cancel resizing. Press "ArrowRight/ArrowUp" or "ArrowLeft/ArrowDown" to resize the column by 10 pixels. Press PageUp/PageDown to resize the column by 100 pixels.',
onDoubleClick: c,
onPointerDown: f,
onPointerMove: h,
onPointerUp: w,
onClick: d,
onFocus: u,
onBlur: g,
onKeyDown: m,
tabIndex: s
}
);
}
function Wn({ columnIndex: e, columnName: t, columnConfig: n, canMeasureWidth: s, direction: o, toggleOrderBy: r, orderByIndex: i, orderBySize: a, ariaColIndex: l, ariaRowIndex: c, className: d, children: f }) {
const h = Q(null), { tabIndex: w, navigateToCell: u } = xe({ ref: h, ariaColIndex: l, ariaRowIndex: c }), { sortable: g, headerComponent: m } = n, { isOpen: p, position: b, menuId: y, close: D, handleMenuClick: E } = Cn(h, u), { getHideColumn: S, showAllColumns: x } = ut(), $ = v(() => {
u(), g && r?.();
}, [r, u, g]), I = A(() => S?.(e), [S, e]), k = A(() => !(!g && !I && !x), [g, I, x]), { getStyle: H, getDataFixedWidth: q, getWidth: C, setMeasuredWidth: O, setFixedWidth: T, releaseWidth: K } = $e(), F = H?.(e), me = q?.(e), J = C?.(e), Ce = v((V) => {
T?.(e, V);
}, [T, e]), _ = v(() => {
const V = h.current;
if (s && V && J === void 0 && O) {
const U = rt(V);
if (isNaN(U))
return;
O(e, U);
}
}, [s, O, J, e]);
X(() => {
_();
}, [_]);
const Ee = v(() => {
K && (jt(() => {
K(e);
}), _());
}, [_, K, e]), ge = A(() => g ? i !== void 0 && i > 0 ? `Press to sort by ${t} in ascending order` : o === "ascending" ? `Press to sort by ${t} in descending order` : o === "descending" ? `Press to stop sorting by ${t}` : `Press to sort by ${t} in ascending order` : `The column ${t} cannot be sorted`, [g, t, o, i]), ne = v((V) => {
V.target === h.current && (V.key === "Enter" || V.key === " ") && (V.preventDefault(), V.stopPropagation(), r?.());
}, [r]), Se = Le(t);
return /* @__PURE__ */ z(
"th",
{
ref: h,
scope: "col",
role: "columnheader",
"aria-sort": o ?? (g ? "none" : void 0),
"data-order-by-index": a !== void 0 ? i : void 0,
"data-order-by-size": a,
"aria-label": t,
"aria-description": ge,
"aria-rowindex": c,
"aria-colindex": l,
tabIndex: w,
title: ge,
onClick: $,
onCopy: Se,
onKeyDown: ne,
style: F,
className: d,
"data-fixed-width": me,
children: [
m ?? f,
k && /* @__PURE__ */ R(
An,
{
onClick: E,