hightable
Version:
A dynamic windowed scrolling table component for react
1,514 lines • 58.4 kB
JavaScript
import { jsx as x, jsxs as G, Fragment as It } from "react/jsx-runtime";
import { createContext as te, useContext as Z, useEffect as J, useCallback as y, useState as A, useMemo as T, useRef as X, forwardRef as Pt, useImperativeHandle as St, useId as Ye } from "react";
import { createPortal as $t, flushSync as At } from "react-dom";
function Ze(e) {
const t = e ? `${e}px` : void 0;
return { minWidth: t, maxWidth: t };
}
function Pe(e) {
return e.offsetWidth + 1;
}
function Mt(e) {
return e.clientWidth - 1;
}
function le(e) {
return typeof e == "number" && Number.isFinite(e) && !isNaN(e) && e >= 0;
}
function _e(e) {
return (e == null ? void 0 : e.width) !== void 0 && e.measured === void 0;
}
function Kt(e) {
let t = 0;
for (const { width: n, indexes: i } of e)
t += n * i.length;
return t;
}
function kt({
columnWidths: e,
availableWidth: t,
clamp: n,
numColumns: i
}) {
var d;
if (!le(t))
return e;
const s = n(0), r = e.filter((g) => (g == null ? void 0 : g.measured) !== void 0).length;
if (r === 0)
return e;
let o = t;
for (const g of e)
if ((g == null ? void 0 : g.measured) === void 0) {
if ((g == null ? void 0 : g.width) === void 0) {
o -= s;
continue;
}
o -= g.width;
}
e.length < i && (o -= (i - e.length) * s);
const a = 5, c = i <= 3 ? 1 / i : 0.3, u = n(c * o - a), l = /* @__PURE__ */ new Map();
for (const [g, w] of e.entries())
if ((w == null ? void 0 : w.measured) !== void 0) {
const { measured: m } = w, R = l.get(m);
R ? R.push(g) : l.set(m, [g]);
}
const p = [...l.entries()].map(
([g, w]) => ({ width: g, indexes: w })
).sort((g, w) => g.width - w.width);
let v = 0;
for (; p.length > 0 && v < 100; ) {
v++;
const g = Kt(p);
if (g <= o) {
const R = Math.floor((o - g) / r);
for (const f of p)
f.width = n(f.width + R);
break;
}
const w = p.at(-1), m = p.at(-2);
if (w === void 0 || w.width <= u)
break;
m === void 0 || m.width < u ? w.width = u : (p.pop(), m.indexes.push(...w.indexes));
}
let h;
for (const { width: g, indexes: w } of p)
for (const m of w) {
const R = {
width: g,
measured: (d = e[m]) == null ? void 0 : d.measured
// keep the measured width if it exists (it should)
};
e[m] = R, h = R, o -= g;
}
return h !== void 0 && o > 0 && (h.width = n(h.width + o)), e;
}
const ue = {
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
}, Ae = te(ue);
function Ct({ colCount: e, rowCount: t, rowPadding: n, children: i }) {
const [s, r] = A(ue.cellPosition.colIndex), [o, a] = A(ue.cellPosition.rowIndex), [c, u] = A(!1), [l, p] = A(!1), v = y((w) => {
const { key: m } = w, R = w.ctrlKey || w.metaKey;
if (m === "ArrowRight")
r(R ? e : (f) => f < e ? f + 1 : f);
else if (m === "ArrowLeft")
r(R ? 1 : (f) => f > 1 ? f - 1 : f);
else if (m === "ArrowDown")
a(R ? t : (f) => f < t ? f + 1 : f);
else if (m === "ArrowUp")
a(R ? 1 : (f) => f > 1 ? f - 1 : f);
else if (m === "Home")
R && a(1), r(1);
else if (m === "End")
R && a(t), r(e);
else if (m === "PageDown")
a((f) => f + n <= t ? f + n : t);
else if (m === "PageUp")
a((f) => f - n >= 1 ? f - n : 1);
else if (m !== " ")
return;
w.stopPropagation(), w.preventDefault(), u(!0);
}, [e, t, n]), h = y((w) => {
const { key: m } = w;
(m === "Tab" && !w.shiftKey || m === "Enter" || m === " ") && (w.stopPropagation(), w.preventDefault(), p(!0), u(!0));
}, []), d = y(() => {
r(ue.cellPosition.colIndex), a(ue.cellPosition.rowIndex), p(!0), u(!0);
}, []), g = T(() => ({
cellPosition: {
colIndex: s,
rowIndex: o
},
onTableKeyDown: v,
onScrollKeyDown: h,
setColIndex: r,
setRowIndex: a,
shouldFocus: c,
setShouldFocus: u,
enterCellsNavigation: l,
setEnterCellsNavigation: p,
focusFirstCell: d
}), [
s,
o,
v,
h,
c,
l,
p,
d
]);
return /* @__PURE__ */ x(Ae.Provider, { value: g, children: i });
}
function ve({ ref: e, ariaColIndex: t, ariaRowIndex: n }) {
const { cellPosition: { colIndex: i, rowIndex: s }, setColIndex: r, setRowIndex: o, shouldFocus: a, setShouldFocus: c } = Z(Ae), u = t === i && n === s, l = n === 1 || t === 1;
J(() => {
e.current && u && a && (l || e.current.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" }), e.current.focus(), c == null || c(!1));
}, [e, u, l, a, c]);
const p = u ? 0 : -1, v = y(() => {
r == null || r(t), o == null || o(n), c == null || c(!0);
}, [r, o, c, t, n]);
return {
tabIndex: p,
navigateToCell: v
};
}
function Ot() {
return Z(Ae);
}
function Tt({ key: e, parse: t }) {
const n = localStorage.getItem(e);
return n ? (t ?? JSON.parse)(n) : void 0;
}
function Lt({ key: e, value: t, stringify: n }) {
e !== void 0 && (t === void 0 ? localStorage.removeItem(e) : localStorage.setItem(e, (n ?? JSON.stringify)(t)));
}
function Nt({ key: e, parse: t, stringify: n } = {}) {
const [i, s] = A(void 0), [r, o] = A(void 0);
return e !== r && (e !== void 0 && s(Tt({ key: e, parse: t })), o(e)), J(() => {
Lt({ key: e, value: i, stringify: n });
}, [i, e, n]), [i, s];
}
const Be = te({});
function Ft({ children: e, localStorageKey: t, numColumns: n, minWidth: i }) {
if (!le(i))
throw new Error(`Invalid minWidth: ${i}. It must be a positive number.`);
if (!Number.isInteger(n) || n < 0)
throw new Error(`Invalid numColumns: ${n}. It must be a positive integer.`);
const [s, r] = A(0), o = y((f) => Math.floor(Math.max(f, i)), [i]), [a, c] = Nt({ key: t, parse: l, stringify: u });
function u(f) {
const D = f.map((b) => _e(b) ? { width: b.width } : void 0);
return JSON.stringify(D);
}
function l(f) {
const D = JSON.parse(f);
return Array.isArray(D) ? D.map((b) => b == null || typeof b != "object" || !("width" in b) ? void 0 : { width: le(b.width) ? o(b.width) : void 0 }) : [];
}
const p = y((f) => Number.isInteger(f) && f >= 0 && f < n, [n]), v = y((f) => {
var D;
return (D = a == null ? void 0 : a[f]) == null ? void 0 : D.width;
}, [a]), h = y((f) => Ze(v(f)), [v]), d = y((f) => _e(a == null ? void 0 : a[f]), [a]), g = y(({ columnIndex: f, width: D }) => {
!le(D) || !p(f) || c((b) => {
const E = [...b ?? []];
return E[f] = { ...E[f] ?? {}, width: o(D), measured: void 0 }, E;
});
}, [o, p, c]), w = y(({ columnIndex: f, measured: D }) => {
!le(D) || !p(f) || c((b) => {
const E = [...b ?? []];
return E[f] = { ...E[f] ?? {}, measured: o(D), width: void 0 }, kt({ columnWidths: E, availableWidth: s, clamp: o, numColumns: n });
});
}, [s, o, p, n, c]), m = y(({ columnIndex: f }) => {
p(f) && c((D) => {
const b = [...D ?? []];
return b[f] = { ...b[f] ?? {}, measured: void 0, width: void 0 }, b;
});
}, [p, c]), R = T(() => ({
getColumnWidth: v,
getColumnStyle: h,
isFixedColumn: d,
setAvailableWidth: r,
forceWidth: g,
measureWidth: w,
removeWidth: m
}), [v, h, d, r, g, w, m]);
return /* @__PURE__ */ x(Be.Provider, { value: R, children: e });
}
function Me() {
return Z(Be);
}
function Ln({ numRows: e }) {
return ({ row: t }) => (V({ row: t, data: { numRows: e } }), { value: t });
}
function jt({ getRowNumber: e, getCell: t, numRows: n, header: i }) {
return async ({ rowStart: s, rowEnd: r, columns: o, signal: a }) => {
Y(a), me({ rowStart: s, rowEnd: r, columns: o, data: { numRows: n, header: i } });
for (let c = s; c < r; c++) {
if (!e({ row: c }))
throw new Error(`Row number not found for row ${c}, and this is a static data frame.`);
for (const u of o ?? [])
if (t({ row: c, column: u }) === void 0)
throw new Error(`Cell not found for row ${c} and column "${u}", and this is a static data frame.`);
}
await Promise.resolve();
};
}
function me({ rowStart: e, rowEnd: t, columns: n, data: { numRows: i, header: s } }) {
if (e < 0 || t > i || !Number.isInteger(e) || !Number.isInteger(t) || e > t)
throw new Error(`Invalid row range: ${e} - ${t}, numRows: ${i}`);
if (n != null && n.some((r) => !s.includes(r)))
throw new Error(`Invalid columns: ${n.join(", ")}. Available columns: ${s.join(", ")}`);
}
function V({ row: e, data: { numRows: t } }) {
if (e < 0 || e >= t || !Number.isInteger(e))
throw new Error(`Invalid row index: ${e}, numRows: ${t}`);
}
function Ke({ column: e, data: { header: t } }) {
if (!t.includes(e))
throw new Error(`Invalid column: ${e}. Available columns: ${t.join(", ")}`);
}
function Y(e) {
if (e != null && e.aborted)
throw new DOMException("The operation was aborted.", "AbortError");
}
function We(e) {
const t = [];
let n;
for (const i of e)
n === void 0 ? n = { rowStart: i, rowEnd: i + 1 } : i === n.rowEnd ? n.rowEnd += 1 : (t.push(n), n = { rowStart: i, rowEnd: i + 1 });
return n && t.push(n), t;
}
function Ht(e, t) {
const n = 0 in e ? Object.keys(e[0]) : [], 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 != null && t.some((o) => o < 0 || !Number.isInteger(o)))
throw new Error(`Row numbers must be non-negative integers, but got: ${t.join(", ")}`);
function s({ row: o }) {
if (V({ row: o, data: { numRows: i } }), !t)
return { value: o };
if (t[o] === void 0)
throw new Error(`Row number not found for row ${o}, but row numbers are provided.`);
return { value: t[o] };
}
function r({ row: o, column: a }) {
V({ row: o, data: { numRows: i } }), Ke({ column: a, data: { header: n } });
const c = e[o];
if (!c)
throw new Error(`Row ${o} not found in data`);
if (!(a in c))
throw new Error(`Column "${a}" not found in row ${o}`);
return { value: c[a] };
}
return {
numRows: i,
header: n,
getRowNumber: s,
getCell: r,
fetch: jt({ getRowNumber: s, getCell: r, numRows: i, header: n })
};
}
function ke() {
return new EventTarget();
}
function Nn({ data: e, filter: t }) {
const n = Array.from({ length: e.numRows }, (l, p) => p).filter((l) => t({ row: l })), i = n.length, s = e.header.slice(), r = ke();
function o({ row: l }) {
V({ row: l, data: { numRows: i } });
const p = n[l];
if (p === void 0)
throw new Error(`Upstream row not found for row ${l}.`);
return p;
}
function a({ row: l }) {
V({ row: l, data: { numRows: i } });
const p = o({ row: l });
return e.getRowNumber({ row: p });
}
function c({ row: l, column: p }) {
Ke({ column: p, data: { header: s } }), V({ row: l, data: { numRows: i } });
const v = o({ row: l });
return e.getCell({ row: v, column: p });
}
async function u({ rowStart: l, rowEnd: p, columns: v, signal: h }) {
me({ rowStart: l, rowEnd: p, columns: v, data: { numRows: i, header: s } }), Y(h);
const g = We(n.slice(l, p)).map((w) => e.fetch({ ...w, columns: v, signal: h }).then(() => {
Y(h), r.dispatchEvent(new CustomEvent("resolve"));
}));
await Promise.all(g);
}
return {
header: s,
numRows: i,
getRowNumber: a,
getCell: c,
fetch: u,
eventTarget: r
};
}
function Fn(e) {
const t = _t(e);
return e.sortable ? Gt(t) : t;
}
function _t(e) {
const t = e.header.slice(), { numRows: n } = e, i = ke(), s = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
function o({ row: u }) {
return V({ row: u, data: { numRows: n } }), s.get(u);
}
function a({ row: u, column: l }) {
var p;
return V({ row: u, data: { numRows: n } }), Ke({ column: l, data: { header: t } }), (p = r.get(l)) == null ? void 0 : p.get(u);
}
async function c({ rowStart: u, rowEnd: l, columns: p, signal: v }) {
me({ rowStart: u, rowEnd: l, columns: p, data: { numRows: n, header: t } }), Y(v);
const h = Array.from({ length: l - u }, (w, m) => u + m).filter(
(w) => !o({ row: w }) || (p == null ? void 0 : p.some((m) => !a({ row: w, column: m })))
);
if (h.length === 0)
return;
const d = We(h), g = [];
for (const w of d) {
const { rowStart: m, rowEnd: R } = w, f = e.rows({ start: m, end: R });
for (const [D, b] of f.entries()) {
const E = m + D, { index: I, cells: k } = b;
g.push(I.then((P) => {
Y(v);
const M = s.get(E);
(!M || M.value !== P) && (s.set(E, { value: P }), i.dispatchEvent(new CustomEvent("resolve")));
}));
for (const P of t) {
if (k[P] === void 0)
continue;
const M = k[P];
g.push(M.then((L) => {
var B, H;
Y(v), r.has(P) || r.set(P, /* @__PURE__ */ new Map());
const F = (B = r.get(P)) == null ? void 0 : B.get(E);
(!F || F.value !== L) && ((H = r.get(P)) == null || H.set(E, { value: L }), i.dispatchEvent(new CustomEvent("resolve")));
}));
}
}
}
await Promise.all(g);
}
return {
header: t,
numRows: n,
getRowNumber: o,
getCell: a,
fetch: c,
eventTarget: i
};
}
function fe(e) {
return JSON.stringify(e);
}
function Ve({ header: e, orderBy: t }) {
const n = t.map(({ column: i }) => i).filter((i) => !e.includes(i));
if (n.length > 0)
throw new Error(`Invalid orderBy field: ${n.join(", ")}`);
}
function Vt(e, t) {
const n = [];
let i;
const s = [];
for (const r of e)
i ? s.push(r) : r.column === t ? i = r : n.push(r);
return { prefix: n, item: i, suffix: s };
}
function Ut(e, t) {
const { prefix: n, item: i, suffix: s } = Vt(t, e);
return i && n.length === 0 ? i.direction === "ascending" ? [{ column: e, direction: "descending" }, ...s] : [...s] : [{ column: e, direction: "ascending" }, ...n, ...s];
}
function zt(e) {
const t = e.map((o, a) => ({ value: o, index: a })), n = Array.from(t).sort(({ value: o }, { value: a }) => o < a ? -1 : o > a ? 1 : 0), i = Array(n.length).fill(-1);
let s = 0, r;
for (const [o, { value: a, index: c }] of n.entries())
a === r ? i[c] = s : (i[c] = o, s = o, r = a);
return i;
}
function Gt(e) {
if (e.sortable)
return e;
const { header: t, numRows: n, getCell: i, getRowNumber: s } = e, r = t.slice(), o = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), c = ke();
function u({ row: h, orderBy: d }) {
if (V({ row: h, data: { numRows: n } }), !d || d.length === 0)
return { value: h };
Ve({ header: t, orderBy: d });
const g = fe(d), w = a.get(g), m = w == null ? void 0 : w[h];
if (m !== void 0)
return { value: m };
}
function l({ row: h, orderBy: d }) {
V({ row: h, data: { numRows: n } });
const g = u({ row: h, orderBy: d });
if (g)
return s({ row: g.value });
}
function p({ row: h, column: d, orderBy: g }) {
const w = u({ row: h, orderBy: g });
if (w)
return i({ row: w.value, column: d });
}
async function v({ rowStart: h, rowEnd: d, columns: g, orderBy: w, signal: m }) {
var f, D;
me({ rowStart: h, rowEnd: d, columns: g, data: { numRows: n, header: t } });
function R() {
c.dispatchEvent(new CustomEvent("resolve"));
}
(f = e.eventTarget) == null || f.addEventListener("resolve", R);
try {
if (!w || w.length === 0) {
await e.fetch({ rowStart: h, rowEnd: d, columns: g, signal: m });
return;
}
if (Ve({ header: t, orderBy: w }), h === d)
return;
const b = await Xt({
orderBy: w,
signal: m,
ranksByColumn: o,
indexes: a.get(fe(w)),
setIndexes: ({ orderBy: E, indexes: I }) => {
a.set(fe(E), I), c.dispatchEvent(new CustomEvent("resolve"));
},
data: e
});
g && g.length > 0 && await Jt({ columns: g, signal: m, indexes: b.slice(h, d), fetch: e.fetch });
} finally {
(D = e.eventTarget) == null || D.removeEventListener("resolve", R);
}
}
return {
sortable: !0,
numRows: n,
header: r,
getRowNumber: l,
getCell: p,
fetch: v,
eventTarget: c
};
}
async function Jt({ columns: e, indexes: t, signal: n, fetch: i }) {
const s = t.sort(), r = [];
let o;
for (const a of s)
o === void 0 ? o = [a, a + 1] : o[1] === a ? o[1] = a + 1 : (r.push(i({ rowStart: o[0], rowEnd: o[1], columns: e, signal: n })), o = [a, a + 1]);
o && r.push(i({ rowStart: o[0], rowEnd: o[1], columns: e, signal: n })), await Promise.all(r);
}
async function Xt({ orderBy: e, signal: t, ranksByColumn: n, setRanks: i, indexes: s, setIndexes: r, data: o }) {
if (!s) {
const a = await qt({ orderBy: e, signal: t, ranksByColumn: n, setRanks: i, data: o });
s = Qt(a), r == null || r({ orderBy: e, indexes: s });
}
return s;
}
async function qt({ orderBy: e, signal: t, ranksByColumn: n, setRanks: i, data: s }) {
const r = [], o = [];
for (const [a, { column: c, direction: u }] of e.entries()) {
if (!s.header.includes(c))
throw new Error(`Invalid column: ${c}`);
const l = n == null ? void 0 : n.get(c);
l ? r[a] = { direction: u, ranks: l } : o.push(
s.fetch({ rowStart: 0, rowEnd: s.numRows, columns: [c], signal: t }).then(() => {
Y(t);
const p = Array.from({ length: s.numRows }, (h, d) => {
const g = s.getCell({ row: d, column: c });
if (!g)
throw new Error(`Cell not found for row ${d} and column ${c}`);
return g.value;
}), v = zt(p);
i == null || i({ column: c, ranks: v }), r[a] = { direction: u, ranks: v };
})
);
}
return await Promise.all(o), r;
}
function Qt(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 }, (s, r) => r).sort((s, r) => {
for (const { direction: o, ranks: a } of e) {
const c = a[s], u = a[r];
if (c === void 0 || u === void 0)
throw new Error("Invalid ranks");
const l = o === "ascending" ? 1 : -1;
if (c < u) return -l;
if (c > u) return l;
}
return s - r;
});
}
function Yt() {
return {
data: Ht([]),
key: "default",
version: 0
};
}
const et = te(Yt());
function Ue() {
return crypto.randomUUID();
}
function Zt({ children: e, data: t }) {
const [n, i] = A(Ue()), [s, r] = A(t), [o, a] = A(0);
return J(() => {
var u;
function c() {
a((l) => l + 1);
}
return (u = t.eventTarget) == null || u.addEventListener("resolve", c), () => {
var l;
(l = t.eventTarget) == null || l.removeEventListener("resolve", c);
};
}, [t]), t !== s && (i(Ue()), r(t), a(0)), /* @__PURE__ */ x(et.Provider, { value: {
data: t,
key: n,
version: o
}, children: e });
}
function tt() {
return Z(et);
}
function nt({ value: e, onChange: t, defaultValue: n, disabled: i }) {
const [s] = A(e), [r] = A(e !== void 0), [o] = A(i ?? !1), [a, c] = A(n), u = y((l) => {
t == null || t(l), c(l);
}, [t]);
return o ? {} : 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 ?? s,
// 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: u });
}
const rt = te({});
function Bt({ children: e, orderBy: t, onOrderByChange: n, disabled: i }) {
const s = nt({
value: t,
onChange: n,
defaultValue: [],
disabled: i
});
return /* @__PURE__ */ x(rt.Provider, { value: {
orderBy: s.value,
onOrderByChange: s.onChange
}, children: e });
}
function ot() {
return Z(rt);
}
const it = te({
containerRef: { current: null }
});
function Wt({
children: e
}) {
const t = X(null);
return /* @__PURE__ */ x(it.Provider, { value: { containerRef: t }, children: e });
}
function st() {
return Z(it);
}
function ze() {
return { ranges: [], anchor: void 0 };
}
function pe(e) {
return Number.isInteger(e) && e >= 0;
}
function Ce(e) {
return pe(e.start) && pe(e.end) && e.end > e.start;
}
function Oe(e) {
if (e.length === 0)
return !0;
if (e.some((t) => !Ce(t)))
return !1;
for (let t = 0; t < e.length - 1; t++) {
const n = e[t], i = e[t + 1];
if (!n || !i || n.end >= i.start)
return !1;
}
return !0;
}
function be({ ranges: e, index: t }) {
if (!pe(t))
throw new Error("Invalid index");
if (!Oe(e))
throw new Error("Invalid ranges");
return e.some((n) => n.start <= t && t < n.end);
}
function at({ ranges: e, range: t }) {
if (!Oe(e))
throw new Error("Invalid ranges");
if (!Ce(t))
throw new Error("Invalid range");
const n = [], { start: i, end: s } = t;
let r = 0;
for (; r < e.length; ) {
const o = e[r];
if (!o)
throw new Error("Invalid range");
if (o.end >= i)
break;
n.push({ ...o }), r++;
}
for (; r < e.length; ) {
const o = e[r];
if (!o)
throw new Error("Invalid range");
if (o.start > s)
break;
t.start = Math.min(t.start, o.start), t.end = Math.max(t.end, o.end), r++;
}
for (n.push(t); r < e.length; ) {
const o = e[r];
if (!o)
throw new Error("Invalid range");
n.push({ ...o }), r++;
}
return n;
}
function ct({ ranges: e, index: t }) {
return at({ ranges: e, range: { start: t, end: t + 1 } });
}
function lt({ ranges: e, index: t }) {
return ut({ ranges: e, range: { start: t, end: t + 1 } });
}
function ut({ ranges: e, range: t }) {
if (!Oe(e))
throw new Error("Invalid ranges");
if (!Ce(t))
throw new Error("Invalid range");
const n = [], { start: i, end: s } = t;
let r = 0;
for (; r < e.length; ) {
const o = e[r];
if (!o)
throw new Error("Invalid range");
if (o.end >= i)
break;
n.push({ ...o }), r++;
}
for (; r < e.length; ) {
const o = e[r];
if (!o)
throw new Error("Invalid range");
if (o.start >= s)
break;
o.start < i && n.push({ start: o.start, end: i }), o.end > s && n.push({ start: s, end: o.end }), r++;
}
for (; r < e.length; ) {
const o = e[r];
if (!o)
throw new Error("Invalid range");
n.push({ ...o }), r++;
}
return n;
}
function ft({ ranges: e, index: t }) {
if (!pe(t))
throw new Error("Invalid index");
const n = { start: t, end: t + 1 };
return be({ ranges: e, index: t }) ? ut({ ranges: e, range: n }) : at({ ranges: e, range: n });
}
function Se({ selection: e, index: t }) {
return { ranges: ft({ ranges: e.ranges, index: t }), anchor: t };
}
function en({ selection: e }) {
return e.ranges.reduce((t, n) => t + (n.end - n.start), 0);
}
const dt = te({});
function tn({ children: e, data: t, onError: n, selection: i, onSelectionChange: s }) {
const { value: r, onChange: o } = nt({
value: i,
onChange: s,
defaultValue: ze(),
disabled: i === void 0 && s === void 0
}), [a] = A(() => /* @__PURE__ */ new Map()), [c, u] = A(ht({ data: t, selection: r })), { orderBy: l } = ot(), [p, v] = A(void 0), h = y(({ gesture: b }) => {
b.controller.abort(), v((E) => {
if (E !== b)
return E;
});
}, [v]), d = y(() => {
const b = { controller: new AbortController() };
return v((E) => (E && E.controller.abort(), b)), b;
}, []), g = T(() => r !== void 0, [r]), w = T(() => {
if (r)
return ({ rowNumber: b }) => {
if (b !== void 0)
return be({ ranges: r.ranges, index: b });
};
}, [r]), m = T(() => {
if (!(!r || !o))
return ({ rowNumber: b }) => {
const E = d();
try {
o(Se({ selection: r, index: b }));
} finally {
h({ gesture: E });
}
};
}, [o, r, d, h]), R = T(() => {
if (!(!r || !o))
return ({ row: b, rowNumber: E }) => {
const I = d(), { signal: k } = I.controller;
on({ data: t, row: b, rowNumber: E, selection: r, orderBy: l, signal: k, rowByRowNumberAndOrderBy: a }).finally(() => {
h({ gesture: I });
}).then((P) => {
o(P);
}).catch((P) => {
P instanceof Error && P.name === "AbortError" || n == null || n(P);
});
};
}, [o, r, a, t, l, d, h, n]), f = T(() => {
if (!(!r || !o))
return () => {
const b = d(), { signal: E } = b.controller;
Ge({ data: t, selection: r, signal: E }).finally(() => {
h({ gesture: b });
}).then((I) => {
o(I);
}).catch((I) => {
I instanceof Error && I.name === "AbortError" || n == null || n(I);
});
};
}, [o, t, r, d, h, n]), D = y((b) => {
const { key: E, shiftKey: I } = b;
if (E === "Escape") {
const k = d();
try {
o == null || o(ze());
} finally {
h({ gesture: k });
}
} else if (E === "a" && (b.ctrlKey || b.metaKey)) {
const k = d(), { signal: P } = k.controller;
b.preventDefault(), r && o && Ge({ data: t, selection: r, signal: P }).finally(() => {
h({ gesture: k });
}).then((M) => {
o(M);
}).catch((M) => {
M instanceof Error && M.name === "AbortError" || n == null || n(M);
});
} else if (E === " " && I) {
const { target: k } = b;
if (!r || !o || !(k instanceof HTMLTableCellElement))
return;
const P = Number(k.getAttribute("data-rownumber"));
if (!(k.getAttribute("role") === "cell") || isNaN(P) || !Number.isInteger(P) || P < 0 || P >= t.numRows)
return;
b.preventDefault();
const L = d();
try {
o({ ranges: ft({ ranges: r.ranges, index: P }), anchor: P });
} finally {
h({ gesture: L });
}
}
}, [r, o, d, h, t, n]);
return J(() => {
if (!r) return;
const b = d(), { signal: E } = b.controller;
wt({ data: t, selection: r, signal: E }).finally(() => {
h({ gesture: b });
}).then((I) => {
u(I);
}).catch((I) => {
I instanceof Error && I.name === "AbortError" || n == null || n(I);
});
}, [r, t, d, h, n]), /* @__PURE__ */ x(dt.Provider, { value: {
selectable: g,
pendingSelectionGesture: p !== void 0,
isRowSelected: w,
toggleRowNumber: m,
toggleRangeToRowNumber: R,
onTableKeyDown: D,
toggleAllRows: f,
allRowsSelected: c
}, children: e });
}
function nn() {
return Z(dt);
}
async function Te({ data: e, rowStart: t, rowEnd: n, orderBy: i, signal: s }) {
return await e.fetch({ rowStart: t, rowEnd: n, orderBy: i, signal: s }), Array.from({ length: n - t }, (o, a) => {
var l;
const c = a + t, u = (l = e.getRowNumber({ row: c, orderBy: i })) == null ? void 0 : l.value;
if (u === void 0)
throw new Error(`Row number is undefined for row ${c} with orderBy ${JSON.stringify(i ?? [])}`);
return u;
});
}
async function rn({ data: e, rowNumber: t, orderBy: n, signal: i, rowByRowNumberAndOrderBy: s }) {
var u;
Y(i);
const { numRows: r } = e, o = fe(n ?? []), a = s == null ? void 0 : s.get(o);
if (a)
return a.get(t);
const c = /* @__PURE__ */ new Map();
await e.fetch({ rowStart: 0, rowEnd: r, orderBy: n, signal: i });
for (let l = 0; l < r; l++) {
const p = (u = e.getRowNumber({ row: l, orderBy: n })) == null ? void 0 : u.value;
if (p === void 0)
throw new Error(`Row number is undefined for row ${l} with orderBy ${o}`);
c.set(p, l);
}
return s == null || s.set(o, c), c.get(t);
}
async function on({ data: e, row: t, rowNumber: n, selection: i, orderBy: s, signal: r, rowByRowNumberAndOrderBy: o }) {
var g;
const { anchor: a } = i;
if (a === void 0 || a === n)
return Se({ selection: i, index: n });
const c = await rn({ data: e, rowNumber: a, orderBy: s, signal: r, rowByRowNumberAndOrderBy: o });
if (c === void 0 || c === t)
return Se({ selection: i, index: n });
const [u, l] = c < t ? [c + 1, t + 1] : [t, c], p = await Te({ data: e, rowStart: u, rowEnd: l, orderBy: s, signal: r });
let { ranges: v } = i;
const h = (g = e.getRowNumber({ row: t, orderBy: s })) == null ? void 0 : g.value;
if (h === void 0)
throw new Error(`Row number for row ${t} not found in orderBy ${fe(s ?? [])}`);
const d = be({ ranges: v, index: a });
for (const w of p)
v = d ? ct({ ranges: v, index: w }) : lt({ ranges: v, index: w });
return { ranges: v, anchor: h };
}
async function Ge({ data: e, selection: t, signal: n }) {
const i = await wt({ data: e, selection: t, signal: n }), s = await Te({ data: e, rowStart: 0, rowEnd: e.numRows, signal: n });
let { ranges: r } = t;
for (const o of s)
r = i ? lt({ ranges: r, index: o }) : ct({ ranges: r, index: o });
return { ranges: r };
}
function ht({ data: e, selection: t }) {
if (!t || e.numRows === 0 || en({ selection: t }) < e.numRows)
return !1;
}
async function wt({ data: e, selection: t, signal: n }) {
const i = ht({ data: e, selection: t });
if (i !== void 0)
return i;
const s = await Te({ data: e, rowStart: 0, rowEnd: e.numRows, signal: n });
return s.length > 0 && s.every((r) => be({ ranges: t.ranges, index: r }));
}
function sn(e, t) {
return T(() => {
const { header: n } = e, i = new Set(n);
t != null && t.sortable && (console.warn("Currently enabling sort via sortable is not implemented, value will be ignored"), delete t.sortable);
const s = n.map((r, o) => ({
key: r,
index: o,
sortable: e.sortable ?? !1,
// Set sortable to dataframe's value by default
...(t == null ? void 0 : t[r]) ?? {}
}));
if (t)
for (const r of Object.keys(t))
i.has(r) || console.warn(
`[HighTable] columnConfiguration has unknown key “${r}”. It will be ignored.`
);
return s;
}, [e, t]);
}
function $e(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) => Je($e(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]) => Je(`${t}: ${$e(n)}`, 2)).join(`,
`)}
}` : JSON.stringify(e);
}
function Je(e, t) {
return e == null ? void 0 : e.split(`
`).map((n) => " ".repeat(t) + n).join(`
`);
}
function an({ cell: e, onDoubleClickCell: t, onMouseDownCell: n, onKeyDownCell: i, stringify: s, columnIndex: r, className: o, ariaColIndex: a, ariaRowIndex: c, rowNumber: u }) {
const l = X(null), { tabIndex: p, navigateToCell: v } = ve({ ref: l, ariaColIndex: a, ariaRowIndex: c }), h = y((D) => {
v(), n && u !== void 0 && n(D, r, u);
}, [v, n, u, r]), d = y((D) => {
v(), t && u !== void 0 && t(D, r, u);
}, [v, t, u, r]), g = y((D) => {
i && u !== void 0 && i(D, r, u);
}, [i, u, r]), { getColumnStyle: w } = Me(), m = w == null ? void 0 : w(r), R = T(() => s(e == null ? void 0 : e.value), [s, e]), f = T(() => {
if (R !== void 0) {
if (R.length > 400)
return `${R.slice(0, 397)}…`;
if (R.length > 100)
return R;
}
}, [R]);
return /* @__PURE__ */ x(
"td",
{
ref: l,
role: "cell",
"aria-busy": e === void 0,
"aria-rowindex": c,
"aria-colindex": a,
"data-rownumber": u,
tabIndex: p,
onDoubleClick: d,
onMouseDown: h,
onKeyDown: g,
style: m,
className: o,
title: f,
children: R
}
);
}
function we({
children: e,
ariaRowIndex: t,
selected: n,
rowNumber: i,
title: s
}) {
return /* @__PURE__ */ x(
"tr",
{
role: "row",
"aria-rowindex": t,
title: s,
"aria-selected": n,
"data-rownumber": i,
children: e
}
);
}
function cn(e) {
return e === void 0 ? "" : (e + 1).toLocaleString("en-US");
}
function Ie({ onCheckboxPress: e, pendingSelectionGesture: t, style: n, ariaColIndex: i, ariaRowIndex: s, selected: r, rowNumber: o }) {
const a = X(null), { tabIndex: c, navigateToCell: u } = ve({ ref: a, ariaColIndex: i, ariaRowIndex: s }), l = y((d) => {
u(), e == null || e({ shiftKey: d.shiftKey });
}, [e, u]), p = y((d) => {
(d.key === "Enter" || d.key === " ") && (d.preventDefault(), d.stopPropagation(), e == null || e({ shiftKey: d.shiftKey }));
}, [e]), v = e === void 0, h = y((d) => {
d.preventDefault();
}, []);
return /* @__PURE__ */ G(
"th",
{
ref: a,
scope: "row",
role: "rowheader",
style: n,
onClick: l,
onKeyDown: p,
"aria-busy": o === void 0,
"aria-checked": r,
"aria-rowindex": s,
"aria-colindex": i,
"aria-disabled": v,
tabIndex: c,
"data-rownumber": o,
children: [
/* @__PURE__ */ x("span", { children: cn(o) }),
r !== void 0 && /* @__PURE__ */ x(
"input",
{
type: "checkbox",
onChange: h,
readOnly: v,
disabled: v,
"aria-busy": t,
checked: r,
role: "presentation",
tabIndex: -1
}
)
]
}
);
}
function ln({ children: e, checked: t, onCheckboxPress: n, pendingSelectionGesture: i, style: s, ariaColIndex: r, ariaRowIndex: o }, a) {
const c = X(null);
St(a, () => ({
get offsetWidth() {
var w;
return ((w = c.current) == null ? void 0 : w.offsetWidth) ?? 0;
}
}), []);
const { tabIndex: u, navigateToCell: l } = ve({ ref: c, ariaColIndex: r, ariaRowIndex: o }), p = y(() => {
l(), n == null || n();
}, [n, l]), v = y((w) => {
(w.key === "Enter" || w.key === " ") && (w.preventDefault(), w.stopPropagation(), n == null || n());
}, [n]), h = t !== void 0, d = n === void 0, g = y((w) => {
w.preventDefault();
}, []);
return /* @__PURE__ */ x(
"td",
{
ref: c,
style: s,
onClick: p,
onKeyDown: v,
"aria-checked": t,
"aria-rowindex": o,
"aria-colindex": r,
"aria-disabled": d,
tabIndex: u,
children: h ? /* @__PURE__ */ x(
"input",
{
type: "checkbox",
onChange: g,
readOnly: d,
disabled: d,
"aria-busy": i,
checked: t,
role: "presentation",
tabIndex: -1
}
) : /* @__PURE__ */ x("span", { children: e })
}
);
}
const gt = Pt(ln);
gt.displayName = "TableCorner";
function un(e, t) {
const [n, i] = A({ left: 0, top: 0 }), [s, r] = A(!1), o = Ye(), a = y(() => {
r((u) => !u);
}, []), c = y(
(u) => {
var v;
u.stopPropagation();
const l = (v = e.current) == null ? void 0 : v.getBoundingClientRect(), p = u.currentTarget.getBoundingClientRect();
i({
left: p.left,
top: (l == null ? void 0 : l.bottom) ?? 0
}), t(), r((h) => !h);
},
[e, t]
);
return {
isOpen: s,
position: n,
menuId: o,
handleToggle: a,
handleMenuClick: c
};
}
const fn = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
function dn(e, t) {
const n = X(null), i = y(() => {
var r;
return [...((r = t.current) == null ? void 0 : r.querySelectorAll(fn)) ?? []].filter((o) => o instanceof HTMLElement);
}, [t]);
J(() => {
if (e) {
const { activeElement: r } = document;
r instanceof HTMLElement && (n.current = document.activeElement);
const o = i().at(0);
o && requestAnimationFrame(() => {
o.focus();
});
} else n.current && (n.current.focus(), n.current = null);
}, [e, i]);
const s = y((r) => {
var l;
const o = i();
if (!o.length)
return;
const { activeElement: a } = document;
if (!a || !(a instanceof HTMLElement))
return;
const c = Array.from(o).indexOf(a);
let u;
switch (r) {
case "first":
u = 0;
break;
case "last":
u = o.length - 1;
break;
case "next":
u = c >= o.length - 1 ? 0 : c + 1;
break;
case "previous":
u = c <= 0 ? o.length - 1 : c - 1;
break;
}
(l = o[u]) == null || l.focus();
}, [i]);
return { getFocusableElements: i, navigateFocus: s };
}
function hn(e) {
switch (e) {
case "ascending":
return "Ascending";
case "descending":
return "Descending";
default:
return "No sort";
}
}
function wn({ onClick: e, label: t }) {
const n = y((s) => {
s.preventDefault(), s.stopPropagation(), e == null || e();
}, [e]), i = y((s) => {
(s.key === "Enter" || s.key === " ") && (s.stopPropagation(), s.preventDefault(), e == null || e());
}, [e]);
return /* @__PURE__ */ x(
"button",
{
role: "menuitem",
onClick: n,
onKeyDown: i,
tabIndex: 0,
type: "button",
children: t
}
);
}
function gn({ onClick: e }) {
return /* @__PURE__ */ x("div", { role: "presentation", onClick: e });
}
function pn({
columnName: e,
isOpen: t,
position: n,
direction: i,
sortable: s,
onClick: r,
onToggle: o,
id: a
}) {
const { containerRef: c } = st(), { top: u, left: l } = n, p = X(null), v = Ye(), { navigateFocus: h } = dn(t, p), d = y((R) => {
switch (R.preventDefault(), R.stopPropagation(), R.key) {
case "Escape":
o();
break;
case "Enter":
case " ":
break;
case "ArrowUp":
case "ArrowLeft":
h("previous");
break;
case "ArrowDown":
case "ArrowRight":
h("next");
break;
case "Home":
h("first");
break;
case "End":
h("last");
break;
case "Tab":
h(R.shiftKey ? "previous" : "next");
break;
}
}, [h, o]), g = y(
(R) => {
R.preventDefault(), R.stopPropagation(), o();
},
[o]
), w = y((R) => {
R.preventDefault(), R.stopPropagation();
}, []);
if (!t)
return null;
const m = hn(i);
return $t(
/* @__PURE__ */ G(It, { children: [
/* @__PURE__ */ x(gn, { onClick: g }),
/* @__PURE__ */ G(
"div",
{
id: a,
role: "menu",
style: { top: u, left: l },
ref: p,
tabIndex: -1,
"aria-labelledby": v,
"aria-orientation": "vertical",
onKeyDown: d,
onClick: w,
children: [
/* @__PURE__ */ x("div", { role: "presentation", id: v, "aria-hidden": "true", children: e }),
s && /* @__PURE__ */ x(
wn,
{
onClick: r,
label: m
}
)
]
}
)
] }),
c.current ?? document.body
);
}
function vn({
onClick: e,
onEscape: t,
tabIndex: n = 0,
isExpanded: i = !1,
menuId: s,
disabled: r = !1,
"aria-label": o = "Column menu",
icon: a = /* @__PURE__ */ x("span", { "aria-hidden": "true", children: "⋮" })
}) {
const c = y((l) => {
l.key === "Enter" || l.key === " " ? (l.preventDefault(), l.stopPropagation(), e == null || e(l)) : l.key === "Escape" && (l.preventDefault(), l.stopPropagation(), t == null || t(l));
}, [e, t]), u = y((l) => {
e == null || e(l);
}, [e]);
return /* @__PURE__ */ x(
"button",
{
type: "button",
onClick: r ? void 0 : u,
onKeyDown: r ? void 0 : c,
"aria-label": o,
"aria-haspopup": "menu",
"aria-expanded": i,
"aria-controls": s,
disabled: r,
tabIndex: r ? -1 : n,
children: a
}
);
}
const Xe = 10, qe = 100;
function mn({ autoResize: e, forceWidth: t, width: n, tabIndex: i, navigateToCell: s }) {
const [r, o] = A(void 0), [a, c] = A(!1), u = y(() => {
r || e == null || e(), s == null || s();
}, [e, s, r]), l = y((f) => {
f.stopPropagation();
}, []), p = y((f) => {
if (s == null || s(), f.stopPropagation(), n === void 0)
return;
const { clientX: D, currentTarget: b, pointerId: E } = f;
o({ clientX: D, pointerId: E, width: n }), "setPointerCapture" in b && b.setPointerCapture(E);
}, [s, n]), v = y((f) => {
!r || f.pointerId !== r.pointerId || t == null || t(r.width - r.clientX + f.clientX);
}, [t, r]), h = y((f) => {
f.stopPropagation(), o((D) => {
if (!(D && f.pointerId === D.pointerId))
return D;
});
}, []), d = y(() => {
c(!0);
}, []), g = y(() => {
c(!1);
}, []), w = y((f) => {
if (a && ([" ", "ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End"].includes(f.key) && f.preventDefault(), f.stopPropagation(), !r)) {
if (f.key === "Escape") {
c(!1), s == null || s();
return;
}
if (f.key === "Enter" || f.key === " ") {
u();
return;
}
n !== void 0 && (f.key === "ArrowRight" || f.key === "ArrowUp" ? t == null || t(n + Xe) : f.key === "ArrowLeft" || f.key === "ArrowDown" ? t == null || t(n - Xe) : f.key === "PageUp" ? t == null || t(n + qe) : f.key === "PageDown" ? t == null || t(n - qe) : f.key === "Home" && (t == null || t(0)));
}
}, [u, r, t, n, a, s]), m = r !== void 0 || a, R = T(() => n === void 0 ? "No width set." : `Width set to ${n} pixels.`, [n]);
return /* @__PURE__ */ x(
"span",
{
role: "spinbutton",
"aria-orientation": "vertical",
"aria-busy": m,
"aria-valuemin": 0,
"aria-valuenow": n,
"aria-valuetext": R,
"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: u,
onPointerDown: p,
onPointerMove: v,
onPointerUp: h,
onClick: l,
onFocus: d,
onBlur: g,
onKeyDown: w,
tabIndex: i
}
);
}
function bn({ columnIndex: e, columnName: t, columnConfig: n, canMeasureWidth: i, direction: s, onClick: r, orderByIndex: o, orderBySize: a, ariaColIndex: c, ariaRowIndex: u, className: l, children: p }) {
const v = X(null), { tabIndex: h, navigateToCell: d } = ve({ ref: v, ariaColIndex: c, ariaRowIndex: u }), { sortable: g, headerComponent: w } = n, { isOpen: m, position: R, menuId: f, handleToggle: D, handleMenuClick: b } = un(v, d), E = y(() => {
d(), g && (r == null || r());
}, [r, d, g]), { getColumnStyle: I, isFixedColumn: k, getColumnWidth: P, measureWidth: M, forceWidth: L, removeWidth: F } = Me(), B = I == null ? void 0 : I(e), H = (k == null ? void 0 : k(e)) === !0 ? !0 : void 0, U = P == null ? void 0 : P(e), ne = y((O) => {
L == null || L({ columnIndex: e, width: O });
}, [L, e]);
J(() => {
const O = v.current;
if (i && O && U === void 0) {
const z = Pe(O);
if (isNaN(z))
return;
M == null || M({ columnIndex: e, measured: z });
}
}, [i, M, U, e]);
const re = y(() => {
const O = v.current;
if (O && M && L && F) {
At(() => {
F({ columnIndex: e });
});
const z = Pe(O);
if (isNaN(z))
return;
H && U === z ? M({ columnIndex: e, measured: z }) : L({ columnIndex: e, width: z });
}
}, [M, L, F, e, H, U]), _ = T(() => g ? o !== void 0 && o > 0 ? `Press to sort by ${t} in ascending order` : s === "ascending" ? `Press to sort by ${t} in descending order` : s === "descending" ? `Press to stop sorting by ${t}` : `Press to sort by ${t} in ascending order` : `The column ${t} cannot be sorted`, [g, t, s, o]), ye = y((O) => {
O.target === v.current && (O.key === "Enter" || O.key === " ") && (O.preventDefault(), O.stopPropagation(), r == null || r());
}, [r]);
return /* @__PURE__ */ G(
"th",
{
ref: v,
scope: "col",
role: "columnheader",
"aria-sort": s ?? (g ? "none" : void 0),
"data-order-by-index": a !== void 0 ? o : void 0,
"data-order-by-size": a,
"aria-label": t,
"aria-description": _,
"aria-rowindex": u,
"aria-colindex": c,
tabIndex: h,
title: _,
onClick: E,
onKeyDown: ye,
style: B,
className: l,
"data-fixed-width": H,
children: [
w ?? p,
g && /* @__PURE__ */ x(
vn,
{
onClick: b,
onEscape: d,
tabIndex: h,
isExpanded: m,
menuId: f,
"aria-label": `Column menu for ${t}`
}
),
/* @__PURE__ */ x(
mn,
{
forceWidth: ne,
autoResize: re,
width: U,
tabIndex: h,
navigateToCell: d
}
),
/* @__PURE__ */ x(
pn,
{
columnName: t,
isOpen: m,
position: R,
direction: s,
sortable: g,
onClick: r,
onToggle: D,
id: f
}
)
]
}
);
}
function yn({
columnDescriptors: e,
orderBy: t,
onOrderByChange: n,
canMeasureWidth: i,
ariaRowIndex: s,
columnClassNames: r = []
}) {
const o = y(
(c) => {
if (!(!n || !t))
return () => {
n(Ut(c, t));
};
},
[t, n]
), a = T(() => new Map((t ?? []).map(({ column: c, direction: u }, l) => [c, { direction: u, index: l }])), [t]);
return e.map((c) => {
var h, d;
const { key: u, index: l, ...p } = c, v = l + 2;
return (
// The ColumnHeader component width is controlled by the parent
/* @__PURE__ */ x(
bn,
{
canMeasureWidth: i,
direction: (h = a.get(u)) == null ? void 0 : h.direction,
orderByIndex: (d = a.get(u)) == null ? void 0 : d.index,
orderBySize: t == null ? void 0 : t.length,
onClick: o(u),
columnName: u,
columnIndex: l,
className: r[l],
ariaColIndex: v,
ariaRowIndex: s,
columnConfig: p,
children: u
},
l
)
);
});
}
const Rn = "_hightable_9b7wt_1", xn = "_table-scroll_9b7wt_16", En = "_mock-row-label_9b7wt_171", Dn = "_styled_9b7wt_185", In = "_top-border_9b7wt_210", ae = {
hightable: Rn,
tableScroll: xn,
mockRowLabel: En,
styled: Dn,
topBorder: In
}, ge = 33, Pn = 50, pt = 20, Sn = 20, ce = 2, $n = ":column:states";
function jn(e) {
return /* @__PURE__ */ x(Zt, { data: e.data, children: /* @__PURE__ */ x(An, { ...e }) });
}
function An(e) {
const { data: t, key: n, version: i } = tt(), { numRows: s } = t, { cacheKey: r, orderBy: o, onOrderByChange: a, selection: c, onSelectionChange: u, onError: l } = e;
return (
/* Create a new set of widths if the data has changed, but keep it if only the number of rows changed */
/* @__PURE__ */ x(Ft, { localStorageKey: r ? `${r}${$n}` : void 0, numColumns: t.header.length, minWidth: Pn, children: /* @__PURE__ */ x(Bt, { orderBy: o, onOrderByChange: a, disabled: !t.sortable, children: /* @__PURE__ */ x(tn, { selection: c, onSelectionChange: u, data: t, onError: l, children: /* @__PURE__ */ x(Ct, { colCount: t.header.length + 1, rowCount: s + 1, rowPadding: e.padding ?? pt, children: /* @__PURE__ */ x(Wt, { children: /* @__PURE__ */ x(Mn, { version: i, ...e }) }) }, n) }, n) }, n) }, r ?? n)
);
}
function Mn({
overscan: e = Sn,
padding: t = pt,
focus: n = !0,
onDoubleClickCell: i,
onMouseDownCell: s,
onKeyDownCell: r,
onError: o = console.error,
stringify: a = $e,
className: c = "",
columnClassNames: u = [],
styled: l = !0,
columnConfiguration: p,
version: v
}) {
const { data: h } = tt(), { numRows: d } = h, { enterCellsNavigation: g, setEnterCellsNavigation: w, onTableKeyDown: m, onScrollKeyDown: R, cellPosition: f, focusFirstCell: D } = Ot(), { containerRef: b } = st(), { setAvailableWidth: E } = Me(), { orderBy: I, onOrderByChange: k } = ot(), { selectable: P, toggleAllRows: M, pendingSelectionGesture: L, onTableKeyDown: F, allRowsSelected: B, isRowSelected: H, toggleRowNumber: U, toggleRangeToRowNumber: ne } = nn(), re = sn(h, p), [_, ye] = A({ start: 0, end: 0 }), [O, z] = A(f), vt = y((S) => {
m == null || m(S), F == null || F(S);
}, [m, F]), mt = y(({ row: S, rowNumber: $ }) => {
if (!($ === void 0 || !U || !ne))
return ({ shiftKey: K }) => {
K ? ne({ row: S, rowNumber: $ }) : U({ rowNumber: $ });
};
}, [U, ne]), de = (d + 1) * ge, bt = Math.max(0, _.start - t) * ge, Re = X(null), q = X(null);
J(() => {
if (!g && O.rowIndex === f.rowIndex && O.colIndex === f.colIndex)
return;
w == null || w(!1), z(f);
const S = f.rowIndex - ce, $ = q.current;
if (!$)
return;
let K = $.scrollTop;
(S < _.start || S >= _.end) && (K = S * ge), K !== $.scrollTop && ($.scrollTop = K);
}, [f, _, O, t, g, w]), J(() => {
let S;
function $() {
var je, He;
S == null || S.abort(), S = new AbortController();
const j = (je = q.current) == null ? void 0 : je.clientHeight, Q = j === void 0 || j === 0 ? 100 : j, N = ((He = q.current) == null ? void 0 : He.scrollTop) ?? 0, se = Math.floor(d * N / de), Ee = Math.ceil(d * (N + Q) / de), W = Math.max(0, se - e), ee = Math.min(d, Ee + e);
if (isNaN(W)) throw new Error(`invalid start row ${W}`);
if (isNaN(ee))