hightable
Version:
A dynamic windowed scrolling table component for react
1,524 lines (1,523 loc) • 63.5 kB
JavaScript
import { jsx as R, jsxs as G, Fragment as et } from "react/jsx-runtime";
import { createContext as ee, useContext as Y, useEffect as X, useCallback as b, useState as M, useMemo as I, useRef as q, forwardRef as Ft, useImperativeHandle as jt, useId as tt } from "react";
import { createPortal as Vt, flushSync as Ht } 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 Lt(e) {
return e.clientWidth;
}
const he = {
cellPosition: {
colIndex: 1,
// the cursor cell is initially the top-left cell
rowIndex: 1
//
},
shouldFocus: !1,
enterCellsNavigation: !1,
onTableKeyDown: void 0,
onScrollKeyDown: void 0,
setColIndex: void 0,
setRowIndex: void 0,
setShouldFocus: void 0,
setEnterCellsNavigation: void 0
}, $e = ee(he);
function _t({ colCount: e, rowCount: t, rowPadding: n, children: s }) {
const [o, r] = M(he.cellPosition.colIndex), [i, a] = M(he.cellPosition.rowIndex), [u, c] = M(!1), [d, f] = M(!1), h = b((m) => {
const { key: p, altKey: x, ctrlKey: v, metaKey: D, shiftKey: E } = m;
if (!(x || D || E)) {
if (p === "ArrowRight")
r(v ? e : (y) => y < e ? y + 1 : y);
else if (p === "ArrowLeft")
r(v ? 1 : (y) => y > 1 ? y - 1 : y);
else if (p === "ArrowDown")
a(v ? t : (y) => y < t ? y + 1 : y);
else if (p === "ArrowUp")
a(v ? 1 : (y) => y > 1 ? y - 1 : y);
else if (p === "Home")
v && a(1), r(1);
else if (p === "End")
v && a(t), r(e);
else if (p === "PageDown")
a((y) => y + n <= t ? y + n : t);
else if (p === "PageUp")
a((y) => y - n >= 1 ? y - n : 1);
else if (p !== " ")
return;
m.stopPropagation(), m.preventDefault(), c(!0);
}
}, [e, t, n]), g = b((m) => {
const { key: p } = m;
(p === "Tab" && !m.shiftKey || p === "Enter" || p === " ") && (m.stopPropagation(), m.preventDefault(), f(!0), c(!0));
}, []), l = b(() => {
r(he.cellPosition.colIndex), a(he.cellPosition.rowIndex), f(!0), c(!0);
}, []), w = I(() => ({
cellPosition: {
colIndex: o,
rowIndex: i
},
onTableKeyDown: h,
onScrollKeyDown: g,
setColIndex: r,
setRowIndex: a,
shouldFocus: u,
setShouldFocus: c,
enterCellsNavigation: d,
setEnterCellsNavigation: f,
focusFirstCell: l
}), [
o,
i,
h,
g,
u,
d,
f,
l
]);
return /* @__PURE__ */ R($e.Provider, { value: w, children: s });
}
function xe({ ref: e, ariaColIndex: t, ariaRowIndex: n }) {
const { cellPosition: { colIndex: s, rowIndex: o }, setColIndex: r, setRowIndex: i, shouldFocus: a, setShouldFocus: u } = Y($e), 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(), u?.(!1));
}, [e, c, d, a, u]);
const f = c ? 0 : -1, h = b(() => {
r?.(t), i?.(n), u?.(!0);
}, [r, i, u, t, n]);
return {
tabIndex: f,
navigateToCell: h
};
}
function ot() {
return Y($e);
}
const it = ee([]);
function Ut({ columnConfiguration: e, data: t, children: n }) {
const s = I(() => {
const { columnDescriptors: o } = t, r = new Set(o.map((a) => a.name)), i = o.map(({ name: a, sortable: u }, c) => ({
name: a,
index: c,
sortable: u ?? !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 Bt() {
const e = st();
return I(() => e.map((n) => n.minWidth), [e]);
}
function Gt({ key: e, parse: t }) {
const n = localStorage.getItem(e);
return n ? (t ?? JSON.parse)(n) : void 0;
}
function Jt({ 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(Gt({ key: e, parse: t })), i(e)), X(() => {
Jt({ key: e, value: s, stringify: n });
}, [s, e, n]), [s, o];
}
const zt = 50, Xt = 3, qt = 150, at = ee({});
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 = b((C) => C !== void 0 && Number.isInteger(C) && C >= 0 && C < n, [n]);
if (s ??= zt, !ue(s))
throw new Error(`Invalid minWidth: ${s}. It must be a positive number.`);
const r = Bt(), i = b((C) => (o(C) ? r[C] : void 0) ?? s, [o, r, s]), a = b((C) => {
if (!C)
return C;
function O(N, F) {
return N !== void 0 && (!ue(N) || N < i(F));
}
return C.some((N, F) => O(N, F)) ? C.map((N, F) => {
if (!O(N, F))
return N;
}) : C;
}, [i]), [u, c] = M(void 0), d = b((C) => {
ue(C) && c(C);
}, []), [f, h] = ct({ key: t, parse: g, stringify: JSON.stringify });
function g(C) {
const O = JSON.parse(C);
return Array.isArray(O) ? O.map((K) => typeof K == "number" ? K : void 0) : [];
}
const l = q(f), w = b((C) => {
h((O) => {
const K = C(O);
return l.current = K ?? [], K;
});
}, [h]), m = b((C, O) => {
if (!ue(O) || !o(C))
return;
const K = Math.max(O, i(C));
w((N) => {
const F = [...N ?? []];
return F[C] = K, F;
});
}, [o, i, w]), p = b(() => {
w((C) => a(C));
}, [w, a]), x = b((C) => {
if (o(C) && f?.[C] !== void 0)
return !0;
}, [f, o]), [v, D] = M(), E = b((C, O) => {
if (!ue(O) || !o(C))
return;
const K = Math.max(O + 1, i(C));
D((N) => {
const F = [...N ?? []];
return F[C] = K, F;
});
}, [o, i, D]), y = b(() => {
D((C) => a(C));
}, [D, a]), k = b((C) => {
o(C) && (w((O) => {
const K = [...O ?? []];
return K[C] = void 0, K;
}), D((O) => {
const K = [...O ?? []];
return K[C] = void 0, K;
}));
}, [o, w, D]), [S, W] = M();
X(() => {
p(), y(), W(Yt({ fixedWidths: l.current, measuredWidths: v, maxTotalWidth: u, numColumns: n, getMinWidth: i }));
}, [n, v, u, i, p, y]);
const $ = b((C) => {
if (o(C))
return f?.[C] ?? S?.[C] ?? v?.[C];
}, [o, f, v, S]), j = b((C) => nt($(C)), [$]), J = I(() => ({
getWidth: $,
getStyle: j,
getDataFixedWidth: x,
releaseWidth: k,
setAvailableWidth: d,
setFixedWidth: m,
setMeasuredWidth: E
}), [$, j, x, k, d, m, E]);
return /* @__PURE__ */ R(at.Provider, { value: J, children: e });
}
function Me() {
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 - n;
if (a <= 0)
return [];
const u = /* @__PURE__ */ new Map();
for (const [f, h] of t.entries())
if (h !== void 0) {
const g = Math.max(
s(f),
Math.floor(h / Xt),
qt
);
if (h < g)
continue;
const l = u.get(h);
l ? l.push({ index: f, minWidth: g }) : u.set(h, [{ index: f, minWidth: g }]);
}
const c = [...u.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: g } = f;
if (g.length === 0)
throw new Error(`Incoherent width group with no columns: ${h}`);
const l = c.pop(), w = Math.max(...g.map((v) => v.minWidth)), m = l === void 0 ? w : Math.max(w, l.width), p = Math.ceil(h - a / g.length);
if (p >= m) {
for (const v of g)
r[v.index] = p;
a -= (h - p) * g.length;
break;
}
for (const v of g)
r[v.index] = m;
a -= (h - m) * g.length;
const x = g.filter((v) => v.minWidth < m);
l?.width === m ? c.push({ width: m, columns: [...l.columns, ...x] }) : (l !== void 0 && c.push(l), x.length > 0 && c.push({ width: m, columns: x }));
}
if (a < 0 && a > -10) {
const f = r.map((g, l) => {
const w = e?.[l], m = t[l];
return {
index: l,
fixed: w !== void 0,
width: g ?? m
};
}).filter(
// tell typescript that width is defined
(g) => !g.fixed && g.width !== void 0
), h = f.length;
if (h > 0) {
const g = Math.floor(-a / h), l = -a % h;
for (const { index: w, width: m } of f.slice(0, l))
r[w] = m + g + 1;
for (const { index: w, width: m } of f.slice(l))
r[w] = m + g;
}
}
return r;
}
function ue(e) {
return typeof e == "number" && Number.isFinite(e) && !isNaN(e) && e >= 0;
}
const lt = ee({});
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((x) => {
if (x != null && !(typeof x != "object" || !("hidden" in x) || x.hidden !== !0))
return { hidden: !0 };
}) : [];
}
const u = b((m) => Number.isInteger(m) && m >= 0 && m < n, [n]), c = b((m) => o?.[m]?.hidden === !0, [o]), { numberOfHiddenColumns: d, numberOfVisibleColumns: f } = I(() => {
let m = 0;
for (let p = 0; p < n; p++)
c(p) && m++;
return { numberOfHiddenColumns: m, numberOfVisibleColumns: n - m };
}, [n, c]), h = b((m) => !c(m) && f > 1, [c, f]), g = b((m) => {
if (!(!u(m) || !h(m)))
return () => {
r((p) => {
const x = [...p ?? []];
return x[m] = { hidden: !0 }, s?.(x), x;
});
};
}, [h, u, r, s]), l = I(() => {
if (d !== 0)
return () => {
r(void 0), s?.([]);
};
}, [d, r, s]), w = I(() => ({
getHideColumn: g,
showAllColumns: l,
isHiddenColumn: c
}), [g, l, c]);
return /* @__PURE__ */ R(lt.Provider, { value: w, children: e });
}
function ut() {
return Y(lt);
}
function ge(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: u }] of n.entries())
a === r ? s[u] = o : (s[u] = i, o = i, r = a);
return s;
}
function qn({ numRows: e }) {
return ({ row: t, orderBy: n }) => {
if (ne({ row: t, data: { numRows: e } }), n && n.length > 0)
throw new Error("orderBy is not supported in this getRowNumber implementation.");
return { value: t };
};
}
function Oe({ row: e, orderBy: t, data: n }) {
ne({ row: e, data: { numRows: n.numRows } }), Te({ orderBy: t, data: { columnDescriptors: n.columnDescriptors } });
}
function Ke({ row: e, column: t, orderBy: n, data: s }) {
ne({ row: e, data: { numRows: s.numRows } }), be({ column: t, data: { columnDescriptors: s.columnDescriptors } }), Te({ orderBy: n, data: { columnDescriptors: s.columnDescriptors } });
}
function Ne({ 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(", ")}`);
Te({ orderBy: s, data: o });
}
function ne({ 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 Te({ 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 re(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 (Oe({ 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 u({ row: c, column: d, orderBy: f }) {
Ke({ 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: u };
}
function Fe() {
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 }) {
ne({ 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 }) {
Oe({ row: f, orderBy: h, data: { numRows: s, columnDescriptors: o } });
const g = i({ row: f });
return e.getRowNumber({ row: g });
}
function u({ row: f, column: h, orderBy: g }) {
Ke({ column: h, row: f, orderBy: g, data: { numRows: s, columnDescriptors: o } });
const l = i({ row: f });
return e.getCell({ row: l, column: h });
}
const { fetch: c } = e, d = {
metadata: r,
columnDescriptors: o,
numRows: s,
getRowNumber: a,
getCell: u
};
if (c !== void 0) {
const f = Fe(), h = async function({ rowStart: g, rowEnd: l, columns: w, orderBy: m, signal: p }) {
Ne({ rowStart: g, rowEnd: l, columns: w, orderBy: m, data: { numRows: s, columnDescriptors: o } }), re(p);
function x() {
f.dispatchEvent(new CustomEvent("resolve"));
}
try {
e.eventTarget?.addEventListener("resolve", x);
const D = ht(n.slice(g, l)).map((E) => c({ ...E, columns: w, signal: p }).then(() => {
re(p), f.dispatchEvent(new CustomEvent("resolve"));
}));
await Promise.all(D);
} finally {
e.eventTarget?.removeEventListener("resolve", x);
}
};
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 = Fe(), o = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
function i({ row: c, orderBy: d }) {
return Oe({ row: c, orderBy: d, data: { numRows: n, columnDescriptors: t } }), o.get(c);
}
function a({ row: c, column: d, orderBy: f }) {
return Ke({ column: d, row: c, orderBy: f, data: { numRows: n, columnDescriptors: t } }), r.get(d)?.get(c);
}
async function u({ rowStart: c, rowEnd: d, columns: f, orderBy: h, signal: g }) {
Ne({ rowStart: c, rowEnd: d, columns: f, orderBy: h, data: { numRows: n, columnDescriptors: t } }), re(g);
const l = Array.from({ length: d - c }, (p, x) => c + x).filter(
(p) => !i({ row: p }) || f?.some((x) => !a({ row: p, column: x }))
);
if (l.length === 0)
return;
const w = ht(l), m = [];
for (const p of w) {
const { rowStart: x, rowEnd: v } = p, D = e.rows({ start: x, end: v });
for (const [E, y] of D.entries()) {
const k = x + E, { index: S, cells: W } = y;
m.push(S.then(($) => {
re(g);
const j = o.get(k);
(!j || j.value !== $) && (o.set(k, { value: $ }), s.dispatchEvent(new CustomEvent("resolve")));
}));
for (const $ of t.map((j) => j.name)) {
if (W[$] === void 0)
continue;
const j = W[$];
m.push(j.then((J) => {
re(g), r.has($) || r.set($, /* @__PURE__ */ new Map());
const C = r.get($)?.get(k);
(!C || C.value !== J) && (r.get($)?.set(k, { value: J }), s.dispatchEvent(new CustomEvent("resolve")));
}));
}
}
}
await Promise.all(m);
}
return {
columnDescriptors: t,
numRows: n,
getRowNumber: i,
getCell: a,
fetch: u,
eventTarget: s
};
}
function sn(e, t) {
const n = t?.sortableColumns ?? new Set(e.columnDescriptors.map((l) => l.name)), s = t?.exclusiveSort ?? e.exclusiveSort;
for (const l of n)
be({ column: l, data: { columnDescriptors: e.columnDescriptors } });
if (e.columnDescriptors.every(({ name: l, sortable: w }) => n.has(l) ? w === !0 : w === !1 || w === 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: l, metadata: w }) => ({
name: l,
sortable: n.has(l),
metadata: structuredClone(w)
// Create a deep copy of the column metadata to avoid mutating the original
})), i = structuredClone(e.metadata), a = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map(), c = Fe(), d = function({ row: l, orderBy: w }) {
if (ne({ row: l, data: { numRows: o } }), ft({ orderBy: w, sortableColumns: n, exclusiveSort: s }), !w || w.length === 0)
return { value: l };
const m = ge(w), x = u.get(m)?.[l];
if (x !== void 0)
return { value: x };
};
return { metadata: i, numRows: o, columnDescriptors: r, getRowNumber: function({ row: l, orderBy: w }) {
ne({ row: l, data: { numRows: o } });
const m = d({ row: l, orderBy: w });
if (m)
return e.getRowNumber({ row: m.value });
}, getCell: function({ row: l, column: w, orderBy: m }) {
be({ column: w, data: { columnDescriptors: r } }), ne({ row: l, data: { numRows: o } });
const p = d({ row: l, orderBy: m });
if (p)
return e.getCell({ row: p.value, column: w });
}, fetch: async function({ rowStart: l, rowEnd: w, columns: m, orderBy: p, signal: x }) {
Ne({ rowStart: l, rowEnd: w, columns: m, orderBy: p, data: { numRows: o, columnDescriptors: r } });
function v() {
c.dispatchEvent(new CustomEvent("resolve"));
}
e.eventTarget?.addEventListener("resolve", v);
try {
if (!p || p.length === 0) {
await e.fetch?.({ rowStart: l, rowEnd: w, columns: m, signal: x });
return;
}
if (l === w)
return;
const D = await an({
orderBy: p,
signal: x,
ranksByColumn: a,
indexes: u.get(ge(p)),
setIndexes: ({ orderBy: E, indexes: y }) => {
u.set(ge(E), y), c.dispatchEvent(new CustomEvent("resolve"));
},
data: e
});
m && m.length > 0 && e.fetch && await cn({ columns: m, signal: x, indexes: D.slice(l, w), fetch: e.fetch });
} finally {
e.eventTarget?.removeEventListener("resolve", v);
}
}, 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: u, direction: c }] of e.entries()) {
be({ column: u, data: { columnDescriptors: o.columnDescriptors } });
const d = n?.get(u);
d ? r[a] = { direction: c, ranks: d } : i.push(
(o.fetch ? o.fetch({ rowStart: 0, rowEnd: o.numRows, columns: [u], signal: t }) : Promise.resolve()).then(() => {
re(t);
const f = Array.from({ length: o.numRows }, (g, l) => {
const w = o.getCell({ row: l, column: u });
if (!w)
throw new Error(`Cell not found for row ${l} and column ${u}`);
return w.value;
}), h = nn(f);
s?.({ column: u, 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 u = a[o], c = a[r];
if (u === void 0 || c === void 0)
throw new Error("Invalid ranks");
const d = i === "ascending" ? 1 : -1;
if (u < c) return -d;
if (u > c) return d;
}
return o - r;
});
}
function fn() {
return {
data: rn([]),
key: "default",
version: 0
};
}
const gt = ee(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 u() {
a((c) => c + 1);
}
return t.eventTarget?.addEventListener("resolve", u), () => {
t.eventTarget?.removeEventListener("resolve", u);
};
}, [t]), t !== o && (s(Ge()), r(t), a(0)), /* @__PURE__ */ R(gt.Provider, { value: {
data: t,
key: n,
version: i
}, children: e });
}
function je() {
return Y(gt);
}
function mt({ value: e, onChange: t, defaultValue: n, disabled: s }) {
const [o] = M(e), [r] = M(e !== void 0), [i] = M(s ?? !1), [a, u] = M(n), c = b((d) => {
t?.(d), u(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 = ee({});
function hn({ children: e, orderBy: t, onOrderByChange: n }) {
const s = mt({
value: t,
onChange: n,
defaultValue: []
});
return /* @__PURE__ */ R(wt.Provider, { value: {
orderBy: s.value,
onOrderByChange: s.onChange
}, children: e });
}
function vt() {
return Y(wt);
}
const pt = ee({
containerRef: { current: null }
});
function gn({
children: e
}) {
const t = q(null);
return /* @__PURE__ */ R(pt.Provider, { value: { containerRef: t }, children: e });
}
function bt() {
return Y(pt);
}
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 He(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 (!He(e))
throw new Error("Invalid ranges");
return e.some((n) => n.start <= t && t < n.end);
}
function yt({ ranges: e, range: t }) {
if (!He(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 (!He(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 Ie({ selection: e, index: t }) {
return { ranges: Et({ ranges: e.ranges, index: t }), anchor: t };
}
function mn({ selection: e }) {
return e.ranges.reduce((t, n) => t + (n.end - n.start), 0);
}
const St = ee({});
function wn({ children: e, data: t, onError: n, selection: s, onSelectionChange: o }) {
const { value: r, onChange: i } = mt({
value: s,
onChange: o,
defaultValue: Je(),
disabled: s === void 0 && o === void 0
}), [a] = M(() => /* @__PURE__ */ new Map()), [u, c] = M(Dt({ data: t, selection: r })), { orderBy: d } = vt(), [f, h] = M(void 0), g = b(({ gesture: E }) => {
E.controller.abort(), h((y) => {
if (y !== E)
return y;
});
}, [h]), l = b(() => {
const E = { controller: new AbortController() };
return h((y) => (y && y.controller.abort(), E)), E;
}, []), w = I(() => r !== void 0, [r]), m = I(() => {
if (r)
return ({ rowNumber: E }) => {
if (E !== void 0)
return Re({ ranges: r.ranges, index: E });
};
}, [r]), p = I(() => {
if (!(!r || !i))
return ({ rowNumber: E }) => {
const y = l();
try {
i(Ie({ selection: r, index: E }));
} finally {
g({ gesture: y });
}
};
}, [i, r, l, g]), x = I(() => {
if (!(!r || !i))
return ({ row: E, rowNumber: y }) => {
const k = l(), { signal: S } = k.controller;
bn({ data: t, row: E, rowNumber: y, selection: r, orderBy: d, signal: S, rowByRowNumberAndOrderBy: a }).finally(() => {
g({ gesture: k });
}).then((W) => {
i(W);
}).catch((W) => {
W instanceof Error && W.name === "AbortError" || n?.(W);
});
};
}, [i, r, a, t, d, l, g, n]), v = I(() => {
if (!(!r || !i))
return () => {
const E = l(), { signal: y } = E.controller;
ze({ data: t, selection: r, signal: y }).finally(() => {
g({ gesture: E });
}).then((k) => {
i(k);
}).catch((k) => {
k instanceof Error && k.name === "AbortError" || n?.(k);
});
};
}, [i, t, r, l, g, n]), D = b((E) => {
const { key: y, shiftKey: k } = E;
if (y === "Escape") {
const S = l();
try {
i?.(Je());
} finally {
g({ gesture: S });
}
} else if (y === "a" && (E.ctrlKey || E.metaKey)) {
const S = l(), { signal: W } = S.controller;
E.preventDefault(), r && i && ze({ data: t, selection: r, signal: W }).finally(() => {
g({ gesture: S });
}).then(($) => {
i($);
}).catch(($) => {
$ instanceof Error && $.name === "AbortError" || n?.($);
});
} else if (y === " " && k) {
const { target: S } = E;
if (!r || !i || !(S instanceof HTMLTableCellElement))
return;
const W = Number(S.getAttribute("data-rownumber"));
if (!(S.getAttribute("role") === "cell") || isNaN(W) || !Number.isInteger(W) || W < 0 || W >= t.numRows)
return;
E.preventDefault();
const j = l();
try {
i({ ranges: Et({ ranges: r.ranges, index: W }), anchor: W });
} finally {
g({ gesture: j });
}
}
}, [r, i, l, g, t, n]);
return X(() => {
if (!r) return;
const E = l(), { signal: y } = E.controller;
kt({ data: t, selection: r, signal: y }).finally(() => {
g({ gesture: E });
}).then((k) => {
c(k);
}).catch((k) => {
k instanceof Error && k.name === "AbortError" || n?.(k);
});
}, [r, t, l, g, n]), /* @__PURE__ */ R(St.Provider, { value: {
selectable: w,
pendingSelectionGesture: f !== void 0,
isRowSelected: m,
toggleRowNumber: p,
toggleRangeToRowNumber: x,
onTableKeyDown: D,
toggleAllRows: v,
allRowsSelected: u
}, children: e });
}
function vn() {
return Y(St);
}
async function Le({ 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 u = a + t, c = e.getRowNumber({ row: u, orderBy: s })?.value;
if (c === void 0)
throw new Error(`Row number is undefined for row ${u} with orderBy ${JSON.stringify(s ?? [])}`);
return c;
});
}
async function pn({ data: e, rowNumber: t, orderBy: n, signal: s, rowByRowNumberAndOrderBy: o }) {
re(s);
const { numRows: r } = e, i = ge(n ?? []), a = o?.get(i);
if (a)
return a.get(t);
const u = /* @__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}`);
u.set(d, c);
}
return o?.set(i, u), u.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 Ie({ selection: s, index: n });
const u = await pn({ data: e, rowNumber: a, orderBy: o, signal: r, rowByRowNumberAndOrderBy: i });
if (u === void 0 || u === t)
return Ie({ selection: s, index: n });
const [c, d] = u < t ? [u + 1, t + 1] : [t, u], f = await Le({ data: e, rowStart: c, rowEnd: d, orderBy: o, signal: r });
let { ranges: h } = s;
const g = e.getRowNumber({ row: t, orderBy: o })?.value;
if (g === void 0)
throw new Error(`Row number for row ${t} not found in orderBy ${ge(o ?? [])}`);
const l = Re({ ranges: h, index: a });
for (const w of f)
h = l ? xt({ ranges: h, index: w }) : Rt({ ranges: h, index: w });
return { ranges: h, anchor: g };
}
async function ze({ data: e, selection: t, signal: n }) {
const s = await kt({ data: e, selection: t, signal: n }), o = await Le({ 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 || mn({ 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 Le({ data: e, rowStart: 0, rowEnd: e.numRows, signal: n });
return o.length > 0 && o.every((r) => Re({ ranges: t.ranges, index: r }));
}
function We(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(We(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}: ${We(n)}`, 2)).join(`,
`)}
}` : JSON.stringify(e);
}
function Xe(e, t) {
return e?.split(`
`).map((n) => " ".repeat(t) + n).join(`
`);
}
function yn({ cell: e, onDoubleClickCell: t, onMouseDownCell: n, onKeyDownCell: s, stringify: o, columnIndex: r, className: i, ariaColIndex: a, ariaRowIndex: u, rowNumber: c, renderCellContent: d }) {
const f = q(null), { tabIndex: h, navigateToCell: g } = xe({ ref: f, ariaColIndex: a, ariaRowIndex: u }), l = b((E) => {
g(), n && c !== void 0 && n(E, r, c);
}, [g, n, c, r]), w = b((E) => {
g(), t && c !== void 0 && t(E, r, c);
}, [g, t, c, r]), m = b((E) => {
s && c !== void 0 && s(E, r, c);
}, [s, c, r]), p = Me().getStyle?.(r), x = I(() => o(e?.value), [o, e]), v = I(() => {
if (x !== void 0) {
if (x.length > 400)
return `${x.slice(0, 397)}…`;
if (x.length > 100)
return x;
}
}, [x]), D = I(() => d?.({ cell: e, stringify: o, col: r, row: c }) ?? x, [e, o, r, c, d, x]);
return /* @__PURE__ */ R(
"td",
{
ref: f,
role: "cell",
"aria-busy": e === void 0,
"aria-rowindex": u,
"aria-colindex": a,
"data-rownumber": c,
tabIndex: h,
onDoubleClick: w,
onMouseDown: l,
onKeyDown: m,
style: p,
className: i,
title: v,
children: D
}
);
}
function ve({
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 Pe({ onCheckboxPress: e, pendingSelectionGesture: t, style: n, ariaColIndex: s, ariaRowIndex: o, selected: r, rowNumber: i }) {
const a = q(null), { tabIndex: u, navigateToCell: c } = xe({ ref: a, ariaColIndex: s, ariaRowIndex: o }), d = b((l) => {
c(), e?.({ shiftKey: l.shiftKey });
}, [e, c]), f = b((l) => {
(l.key === "Enter" || l.key === " ") && (l.preventDefault(), l.stopPropagation(), e?.({ shiftKey: l.shiftKey }));
}, [e]), h = e === void 0, g = b((l) => {
l.preventDefault();
}, []);
return /* @__PURE__ */ G(
"th",
{
ref: a,
scope: "row",
role: "rowheader",
style: n,
onClick: d,
onKeyDown: f,
"aria-busy": i === void 0,
"aria-checked": r,
"aria-rowindex": o,
"aria-colindex": s,
"aria-disabled": h,
tabIndex: u,
"data-rownumber": i,
children: [
/* @__PURE__ */ R("span", { children: xn(i) }),
r !== void 0 && /* @__PURE__ */ R(
"input",
{
type: "checkbox",
onChange: g,
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 u = q(null);
jt(a, () => ({
get offsetWidth() {
return u.current?.offsetWidth ?? 0;
}
}), []);
const { tabIndex: c, navigateToCell: d } = xe({ ref: u, ariaColIndex: r, ariaRowIndex: i }), f = b(() => {
d(), n?.();
}, [n, d]), h = b((m) => {
(m.key === "Enter" || m.key === " ") && (m.preventDefault(), m.stopPropagation(), n?.());
}, [n]), g = t !== void 0, l = n === void 0, w = b((m) => {
m.preventDefault();
}, []);
return /* @__PURE__ */ R(
"td",
{
ref: u,
style: o,
onClick: f,
onKeyDown: h,
"aria-checked": t,
"aria-rowindex": i,
"aria-colindex": r,
"aria-disabled": l,
tabIndex: c,
children: g ? /* @__PURE__ */ R(
"input",
{
type: "checkbox",
onChange: w,
readOnly: l,
disabled: l,
"aria-busy": s,
checked: t,
role: "presentation",
tabIndex: -1
}
) : /* @__PURE__ */ R("span", { children: e })
}
);
}
const Pt = Ft(Rn);
Pt.displayName = "TableCorner";
function Cn(e, t) {
const [n, s] = M({ left: 0, top: 0 }), [o, r] = M(!1), i = tt(), a = b(() => {
r(!1);
}, []), u = b(
(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: u
};
}
const En = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
function Sn(e, t) {
const n = q(null), s = b(() => [...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 = b((r) => {
const i = s();
if (!i.length)
return;
const { activeElement: a } = document;
if (!a || !(a instanceof HTMLElement))
return;
const u = Array.from(i).indexOf(a);
let c;
switch (r) {
case "first":
c = 0;
break;
case "last":
c = i.length - 1;
break;
case "next":
c = u >= i.length - 1 ? 0 : u + 1;
break;
case "previous":
c = u <= 0 ? i.length - 1 : u - 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__ */ G(et, { children: [
/* @__PURE__ */ R("div", { role: "separator", children: e }),
t
] });
}
function Ae({ onClick: e, label: t }) {
const n = b((o) => {
o.preventDefault(), o.stopPropagation(), e?.();
}, [e]), s = b((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: u,
id: c
}) {
const { containerRef: d } = bt(), { top: f, left: h } = n, g = q(null), l = tt(), { navigateFocus: w } = Sn(t, g), { focusFirstCell: m } = ot(), p = b((S) => {
switch (S.preventDefault(), S.stopPropagation(), S.key) {
case "Escape":
u();
break;
case "Enter":
case " ":
break;
case "ArrowUp":
case "ArrowLeft":
w("previous");
break;
case "ArrowDown":
case "ArrowRight":
w("next");
break;
case "Home":
w("first");
break;
case "End":
w("last");
break;
case "Tab":
w(S.shiftKey ? "previous" : "next");
break;
}
}, [w, u]), x = b(
(S) => {
S.preventDefault(), S.stopPropagation(), u();
},
[u]
), v = b((S) => {
S.preventDefault(), S.stopPropagation();
}, []), D = I(() => {
if (i)
return () => {
i(), m?.(), u();
};
}, [i, u, m]), E = I(() => {
if (a)
return () => {
a(), u();
};
}, [a, u]);
if (!t)
return null;
const y = Dn(s);
return Vt(
/* @__PURE__ */ G(et, { children: [
/* @__PURE__ */ R(kn, { onClick: x }),
/* @__PURE__ */ G(
"div",
{
id: c,
role: "menu",
style: { top: f, left: h },
ref: g,
tabIndex: -1,
"aria-labelledby": l,
"aria-orientation": "vertical",
onKeyDown: p,
onClick: v,
children: [
/* @__PURE__ */ R("div", { role: "presentation", id: l, "aria-hidden": "true", children: e }),
o && /* @__PURE__ */ R(qe, { title: "Sort order", children: /* @__PURE__ */ R(
Ae,
{
onClick: r,
label: y
}
) }),
!(!D && !E) && /* @__PURE__ */ G(qe, { title: "Visibility", children: [
D && /* @__PURE__ */ R(
Ae,
{
onClick: D,
label: "Hide column"
}
),
E && /* @__PURE__ */ R(
Ae,
{
onClick: E,
label: "Show all columns"
}
)
] })
]
}
)
] }),
d.current ?? document.body
);
}
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 u = b((d) => {
d.key === "Enter" || d.key === " " ? (d.preventDefault(), d.stopPropagation(), e?.(d)) : d.key === "Escape" && (d.preventDefault(), d.stopPropagation(), t?.(d));
}, [e, t]), c = b((d) => {
e?.(d);
}, [e]);
return /* @__PURE__ */ R(
"button",
{
type: "button",
onClick: r ? void 0 : c,
onKeyDown: r ? void 0 : u,
"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, u] = M(!1), c = b(() => {
r || e?.(), o?.();
}, [e, o, r]), d = b((v) => {
v.stopPropagation();
}, []), f = b((v) => {
if (v.button !== 0 || v.ctrlKey || v.metaKey || (o?.(), v.stopPropagation(), n === void 0))
return;
const { clientX: D, currentTarget: E, pointerId: y } = v;
i({ clientX: D, pointerId: y, width: n }), "setPointerCapture" in E && E.setPointerCapture(y);
}, [o, n]), h = b((v) => {
!r || v.pointerId !== r.pointerId || t?.(r.width - r.clientX + v.clientX);
}, [t, r]), g = b((v) => {
v.stopPropagation(), i((D) => {
if (!(D && v.pointerId === D.pointerId))
return D;
});
}, []), l = b(() => {
u(!0);
}, []), w = b(() => {
u(!1);
}, []), m = b((v) => {
if (a && ([" ", "ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End"].includes(v.key) && v.preventDefault(), v.stopPropagation(), !r)) {
if (v.key === "Escape") {
u(!1), o?.();
return;
}
if (v.key === "Enter" || v.key === " ") {
c();
return;
}
n !== void 0 && (v.key === "ArrowRight" || v.key === "ArrowUp" ? t?.(n + Qe) : v.key === "ArrowLeft" || v.key === "ArrowDown" ? t?.(n - Qe) : v.key === "PageUp" ? t?.(n + Ye) : v.key === "PageDown" ? t?.(n - Ye) : v.key === "Home" && t?.(0));
}
}, [c, r, t, n, a, o]), p = r !== void 0 || a, x = I(() => 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": x,
"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: g,
onClick: d,
onFocus: l,
onBlur: w,
onKeyDown: m,
tabIndex: s
}
);
}
function Wn({ columnIndex: e, columnName: t, columnConfig: n, canMeasureWidth: s, direction: o, toggleOrderBy: r, orderByIndex: i, orderBySize: a, ariaColIndex: u, ariaRowIndex: c, className: d, children: f }) {
const h = q(null), { tabIndex: g, navigateToCell: l } = xe({ ref: h, ariaColIndex: u, ariaRowIndex: c }), { sortable: w, headerComponent: m } = n, { isOpen: p, position: x, menuId: v, close: D, handleMenuClick: E } = Cn(h, l), { getHideColumn: y, showAllColumns: k } = ut(), S = b(() => {
l(), w && r?.();
}, [r, l, w]), W = I(() => y?.(e), [y, e]), $ = I(() => !(!w && !W && !k), [w, W, k]), { getStyle: j, getDataFixedWidth: J, getWidth: C, setMeasuredWidth: O, setFixedWidth: K, releaseWidth: N } = Me(), F = j?.(e), me = J?.(e), B = C?.(e), Ce = b((H) => {
K?.(e, H);
}, [K, e]), Z = b(() => {
const H = h.current;
if (s && H && B === void 0 && O) {
const te = rt(H);
if (isNaN(te))
return;
O(e, te);
}
}, [s, O, B, e]);
X(() => {
Z();
}, [Z]);
const Ee = b(() => {
N && (Ht(() => {
N(e);
}), Z());
}, [Z, N, e]), z = I(() => w ? 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`, [w, t, o, i]), Se = b((H) => {
H.target === h.current && (H.key === "Enter" || H.key === " ") && (H.preventDefault(), H.stopPropagation(), r?.());
}, [r]);
return /* @__PURE__ */ G(
"th",
{
ref: h,
scope: "col",
role: "columnheader",
"aria-sort": o ?? (w ? "none" : void 0),
"data-order-by-index": a !== void 0 ? i : void 0,
"data-order-by-size": a,
"aria-label": t,
"aria-description": z,
"aria-rowindex": c,
"aria-colindex": u,
tabIndex: g,
title: z,
onClick: S,
onKeyDown: Se,
style: F,
className: d,
"data-fixed-width": me,
children: [
m ?? f,
$ && /* @__PURE__ */ R(
An,
{
onClick: E,
onEscape: l,
tabIndex: g,
isExpanded: p,
menuId: v,
"aria-label": `Column menu for ${t}`
}
),
/* @__PURE__ */ R(
In,