hightable
Version:
A dynamic windowed scrolling table component for react
1,513 lines • 62.4 kB
JavaScript
import { jsx as R, jsxs as F, Fragment as nt } from "react/jsx-runtime";
import { createContext as ee, useContext as X, useEffect as _, useCallback as C, useState as $, useMemo as A, useRef as U, forwardRef as Wt, useImperativeHandle as Ft, useId as rt } from "react";
import { createPortal as jt, flushSync as Lt } from "react-dom";
function ot(e) {
const t = e ? `${e}px` : void 0;
return { minWidth: t, maxWidth: t };
}
function Ae(e) {
return e.offsetWidth + 1;
}
function Vt(e) {
return e.clientWidth - 1;
}
function he(e) {
return typeof e == "number" && Number.isFinite(e) && !isNaN(e) && e >= 0;
}
function Ge(e) {
return e?.width !== void 0 && e.measured === void 0;
}
function Ht(e) {
let t = 0;
for (const { width: n, indexes: i } of e)
t += n * i.length;
return t;
}
function _t({
columnWidths: e,
availableWidth: t,
clamp: n,
numColumns: i
}) {
if (!he(t))
return e;
const s = n(0), r = e.filter((l) => l?.measured !== void 0).length;
if (r === 0)
return e;
let o = t;
for (const l of e)
if (l?.measured === void 0) {
if (l?.width === void 0) {
o -= s;
continue;
}
o -= l.width;
}
e.length < i && (o -= (i - e.length) * s);
const a = 5, u = i <= 3 ? 1 / i : 0.3, c = n(u * o - a), f = /* @__PURE__ */ new Map();
for (const [l, d] of e.entries())
if (d?.measured !== void 0) {
const { measured: g } = d, v = f.get(g);
v ? v.push(l) : f.set(g, [l]);
}
const w = [...f.entries()].map(
([l, d]) => ({ width: l, indexes: d })
).sort((l, d) => l.width - d.width);
let m = 0;
for (; w.length > 0 && m < 100; ) {
m++;
const l = Ht(w);
if (l <= o) {
const v = Math.floor((o - l) / r);
for (const x of w)
x.width = n(x.width + v);
break;
}
const d = w.at(-1), g = w.at(-2);
if (d === void 0 || d.width <= c)
break;
g === void 0 || g.width < c ? d.width = c : (w.pop(), g.indexes.push(...d.indexes));
}
let y;
for (const { width: l, indexes: d } of w)
for (const g of d) {
const v = {
width: l,
measured: e[g]?.measured
// keep the measured width if it exists (it should)
};
e[g] = v, y = v, o -= l;
}
return y !== void 0 && o > 0 && (y.width = n(y.width + o)), e;
}
const we = {
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
}, Ne = ee(we);
function Ut({ colCount: e, rowCount: t, rowPadding: n, children: i }) {
const [s, r] = $(we.cellPosition.colIndex), [o, a] = $(we.cellPosition.rowIndex), [u, c] = $(!1), [f, w] = $(!1), m = C((g) => {
const { key: v, altKey: x, ctrlKey: h, metaKey: E, shiftKey: p } = g;
if (!(x || E || p)) {
if (v === "ArrowRight")
r(h ? e : (b) => b < e ? b + 1 : b);
else if (v === "ArrowLeft")
r(h ? 1 : (b) => b > 1 ? b - 1 : b);
else if (v === "ArrowDown")
a(h ? t : (b) => b < t ? b + 1 : b);
else if (v === "ArrowUp")
a(h ? 1 : (b) => b > 1 ? b - 1 : b);
else if (v === "Home")
h && a(1), r(1);
else if (v === "End")
h && a(t), r(e);
else if (v === "PageDown")
a((b) => b + n <= t ? b + n : t);
else if (v === "PageUp")
a((b) => b - n >= 1 ? b - n : 1);
else if (v !== " ")
return;
g.stopPropagation(), g.preventDefault(), c(!0);
}
}, [e, t, n]), y = C((g) => {
const { key: v } = g;
(v === "Tab" && !g.shiftKey || v === "Enter" || v === " ") && (g.stopPropagation(), g.preventDefault(), w(!0), c(!0));
}, []), l = C(() => {
r(we.cellPosition.colIndex), a(we.cellPosition.rowIndex), w(!0), c(!0);
}, []), d = A(() => ({
cellPosition: {
colIndex: s,
rowIndex: o
},
onTableKeyDown: m,
onScrollKeyDown: y,
setColIndex: r,
setRowIndex: a,
shouldFocus: u,
setShouldFocus: c,
enterCellsNavigation: f,
setEnterCellsNavigation: w,
focusFirstCell: l
}), [
s,
o,
m,
y,
u,
f,
w,
l
]);
return /* @__PURE__ */ R(Ne.Provider, { value: d, children: i });
}
function Re({ ref: e, ariaColIndex: t, ariaRowIndex: n }) {
const { cellPosition: { colIndex: i, rowIndex: s }, setColIndex: r, setRowIndex: o, shouldFocus: a, setShouldFocus: u } = X(Ne), c = t === i && n === s, f = n === 1 || t === 1;
_(() => {
e.current && c && a && (f || e.current.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" }), e.current.focus(), u?.(!1));
}, [e, c, f, a, u]);
const w = c ? 0 : -1, m = C(() => {
r?.(t), o?.(n), u?.(!0);
}, [r, o, u, t, n]);
return {
tabIndex: w,
navigateToCell: m
};
}
function it() {
return X(Ne);
}
function zt({ key: e, parse: t }) {
const n = localStorage.getItem(e);
return n ? (t ?? JSON.parse)(n) : void 0;
}
function Bt({ key: e, value: t, stringify: n }) {
e !== void 0 && (t === void 0 ? localStorage.removeItem(e) : localStorage.setItem(e, (n ?? JSON.stringify)(t)));
}
function st({ key: e, parse: t, stringify: n } = {}) {
const [i, s] = $(void 0), [r, o] = $(void 0);
return e !== r && (e !== void 0 && s(zt({ key: e, parse: t })), o(e)), _(() => {
Bt({ key: e, value: i, stringify: n });
}, [i, e, n]), [i, s];
}
const ct = ee({});
function Gt({ children: e, localStorageKey: t, numColumns: n, minWidth: i }) {
if (!he(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] = $(0), o = C((h, E) => Math.floor(Math.max(h, E ?? i)), [i]), [a, u] = st({ key: t, parse: f, stringify: c });
function c(h) {
const E = h.map((p) => Ge(p) ? { width: p.width } : void 0);
return JSON.stringify(E);
}
function f(h) {
const E = JSON.parse(h);
return Array.isArray(E) ? E.map((p) => p == null || typeof p != "object" || !("width" in p) ? void 0 : { width: he(p.width) ? o(p.width) : void 0 }) : [];
}
const w = C((h) => Number.isInteger(h) && h >= 0 && h < n, [n]), m = C((h) => a?.[h]?.width, [a]), y = C((h) => ot(m(h)), [m]), l = C((h) => Ge(a?.[h]), [a]), d = C(({ columnIndex: h, width: E, minWidth: p }) => {
!he(E) || !w(h) || u((b) => {
const S = [...b ?? []];
return S[h] = { ...S[h] ?? {}, width: o(E, p), measured: void 0 }, S;
});
}, [o, w, u]), g = C(({ columnIndex: h, measured: E }) => {
!he(E) || !w(h) || u((p) => {
const b = [...p ?? []];
return b[h] = { ...b[h] ?? {}, measured: o(E), width: void 0 }, _t({ columnWidths: b, availableWidth: s, clamp: o, numColumns: n });
});
}, [s, o, w, n, u]), v = C(({ columnIndex: h }) => {
w(h) && u((E) => {
const p = [...E ?? []];
return p[h] = { ...p[h] ?? {}, measured: void 0, width: void 0 }, p;
});
}, [w, u]), x = A(() => ({
getColumnWidth: m,
getColumnStyle: y,
isFixedColumn: l,
setAvailableWidth: r,
forceWidth: d,
measureWidth: g,
removeWidth: v
}), [m, y, l, r, d, g, v]);
return /* @__PURE__ */ R(ct.Provider, { value: x, children: e });
}
function Ke() {
return X(ct);
}
const at = ee({});
function Jt({ children: e, localStorageKey: t, numColumns: n, onColumnsVisibilityChange: i }) {
if (!Number.isInteger(n) || n < 0)
throw new Error(`Invalid numColumns: ${n}. It must be a positive integer.`);
const [s, r] = st({ key: t, parse: a, stringify: o });
function o(g) {
return JSON.stringify(g);
}
function a(g) {
const v = JSON.parse(g);
return Array.isArray(v) ? v.map((x) => {
if (x != null && !(typeof x != "object" || !("hidden" in x) || x.hidden !== !0))
return { hidden: !0 };
}) : [];
}
const u = C((g) => Number.isInteger(g) && g >= 0 && g < n, [n]), c = C((g) => s?.[g]?.hidden === !0, [s]), { numberOfHiddenColumns: f, numberOfVisibleColumns: w } = A(() => {
let g = 0;
for (let v = 0; v < n; v++)
c(v) && g++;
return { numberOfHiddenColumns: g, numberOfVisibleColumns: n - g };
}, [n, c]), m = C((g) => !c(g) && w > 1, [c, w]), y = C((g) => {
if (!(!u(g) || !m(g)))
return () => {
r((v) => {
const x = [...v ?? []];
return x[g] = { hidden: !0 }, i?.(x), x;
});
};
}, [m, u, r, i]), l = A(() => {
if (f !== 0)
return () => {
r(void 0), i?.([]);
};
}, [f, r, i]), d = A(() => ({
getHideColumn: y,
showAllColumns: l,
isHiddenColumn: c
}), [y, l, c]);
return /* @__PURE__ */ R(at.Provider, { value: d, children: e });
}
function lt() {
return X(at);
}
function ge(e) {
return JSON.stringify(e);
}
function ut({ sortableColumns: e, orderBy: t, exclusiveSort: n }) {
if (!t) return;
const i = t.map(({ column: s }) => s).filter((s) => !e?.has(s));
if (i.length > 0)
throw new Error(`Unsortable columns in orderBy field: ${i.join(", ")}`);
if (n && t.length > 1)
throw new Error("DataFrame is exclusiveSort, but orderBy contains multiple columns");
}
function ft(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 Xt(e, t) {
const { prefix: n, item: i, suffix: s } = ft(t, e);
return i && n.length === 0 ? i.direction === "ascending" ? [{ column: e, direction: "descending" }, ...s] : [...s] : [{ column: e, direction: "ascending" }, ...n, ...s];
}
function qt(e, t) {
const { item: n } = ft(t, e);
return n ? n.direction === "ascending" ? [{ column: e, direction: "descending" }] : [] : [{ column: e, direction: "ascending" }];
}
function Qt(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: u }] of n.entries())
a === r ? i[u] = s : (i[u] = o, s = o, r = a);
return i;
}
function Gn({ numRows: e }) {
return ({ row: t, orderBy: n }) => {
if (Y({ 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 }) {
Y({ row: e, data: { numRows: n.numRows } }), Fe({ orderBy: t, data: { columnDescriptors: n.columnDescriptors } });
}
function Me({ row: e, column: t, orderBy: n, data: i }) {
Y({ row: e, data: { numRows: i.numRows } }), ye({ column: t, data: { columnDescriptors: i.columnDescriptors } }), Fe({ orderBy: n, data: { columnDescriptors: i.columnDescriptors } });
}
function We({ rowStart: e, rowEnd: t, columns: n, orderBy: i, data: s }) {
if (e < 0 || t > s.numRows || !Number.isInteger(e) || !Number.isInteger(t) || e > t)
throw new Error(`Invalid row range: ${e} - ${t}, numRows: ${s.numRows}`);
const r = s.columnDescriptors.map((o) => o.name);
if (n?.some((o) => !r.includes(o)))
throw new Error(`Invalid columns: ${n.join(", ")}. Available columns: ${r.join(", ")}`);
Fe({ orderBy: i, data: s });
}
function Y({ row: e, data: { numRows: t } }) {
if (e < 0 || e >= t || !Number.isInteger(e))
throw new Error(`Invalid row index: ${e}, numRows: ${t}`);
}
function ye({ column: e, data: { columnDescriptors: t } }) {
const n = t.map((i) => i.name);
if (!n.includes(e))
throw new Error(`Invalid column: ${e}. Available columns: ${n.join(", ")}`);
}
function Fe({ orderBy: e, data: { columnDescriptors: t, exclusiveSort: n } }) {
const i = new Set(t.filter((s) => s.sortable).map((s) => s.name));
ut({ orderBy: e, sortableColumns: i, exclusiveSort: n });
}
function Z(e) {
if (e?.aborted)
throw new DOMException("The operation was aborted.", "AbortError");
}
function dt(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 Yt(e, t, { metadata: n, columnsMetadata: i } = {}) {
const s = 0 in e ? Object.keys(e[0]) : [];
if (i && i.length !== s.length)
throw new Error(`Columns metadata length (${i.length}) does not match the number of columns in the array (${s.length})`);
const r = s.map((c, f) => ({ name: c, metadata: i?.[f] })), o = e.length;
if (t && t.length !== o)
throw new Error(`Row numbers length (${t.length}) does not match the number of rows in the array (${o})`);
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: f }) {
if (Oe({ row: c, orderBy: f, data: { numRows: o, 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: f, orderBy: w }) {
Me({ column: f, row: c, orderBy: w, data: { numRows: o, columnDescriptors: r } });
const m = e[c];
if (!m)
throw new Error(`Row ${c} not found in data`);
if (!(f in m))
throw new Error(`Column "${f}" not found in row ${c}`);
return { value: m[f] };
}
return { metadata: n, numRows: o, columnDescriptors: r, getRowNumber: a, getCell: u };
}
function je() {
return new EventTarget();
}
function Jn({ data: e, filter: t }) {
const n = Array.from({ length: e.numRows }, (w, m) => m).filter((w) => t({ row: w })), i = n.length, s = e.columnDescriptors.map(({ name: w, metadata: m }) => ({
name: w,
sortable: !1,
metadata: structuredClone(m)
// Create a deep copy of the column metadata to avoid mutating the original
})), r = structuredClone(e.metadata);
function o({ row: w }) {
Y({ row: w, data: { numRows: i } });
const m = n[w];
if (m === void 0)
throw new Error(`Upstream row not found for row ${w}.`);
return m;
}
function a({ row: w, orderBy: m }) {
Oe({ row: w, orderBy: m, data: { numRows: i, columnDescriptors: s } });
const y = o({ row: w });
return e.getRowNumber({ row: y });
}
function u({ row: w, column: m, orderBy: y }) {
Me({ column: m, row: w, orderBy: y, data: { numRows: i, columnDescriptors: s } });
const l = o({ row: w });
return e.getCell({ row: l, column: m });
}
const { fetch: c } = e, f = {
metadata: r,
columnDescriptors: s,
numRows: i,
getRowNumber: a,
getCell: u
};
if (c !== void 0) {
const w = je(), m = async function({ rowStart: y, rowEnd: l, columns: d, orderBy: g, signal: v }) {
We({ rowStart: y, rowEnd: l, columns: d, orderBy: g, data: { numRows: i, columnDescriptors: s } }), Z(v);
function x() {
w.dispatchEvent(new CustomEvent("resolve"));
}
try {
e.eventTarget?.addEventListener("resolve", x);
const E = dt(n.slice(y, l)).map((p) => c({ ...p, columns: d, signal: v }).then(() => {
Z(v), w.dispatchEvent(new CustomEvent("resolve"));
}));
await Promise.all(E);
} finally {
e.eventTarget?.removeEventListener("resolve", x);
}
};
f.eventTarget = w, f.fetch = m;
}
return f;
}
function Xn(e) {
const t = Zt(e);
return e.sortable ? en(t) : t;
}
function Zt(e) {
const t = e.header.map((c) => ({ name: c })), { numRows: n } = e, i = je(), s = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
function o({ row: c, orderBy: f }) {
return Oe({ row: c, orderBy: f, data: { numRows: n, columnDescriptors: t } }), s.get(c);
}
function a({ row: c, column: f, orderBy: w }) {
return Me({ column: f, row: c, orderBy: w, data: { numRows: n, columnDescriptors: t } }), r.get(f)?.get(c);
}
async function u({ rowStart: c, rowEnd: f, columns: w, orderBy: m, signal: y }) {
We({ rowStart: c, rowEnd: f, columns: w, orderBy: m, data: { numRows: n, columnDescriptors: t } }), Z(y);
const l = Array.from({ length: f - c }, (v, x) => c + x).filter(
(v) => !o({ row: v }) || w?.some((x) => !a({ row: v, column: x }))
);
if (l.length === 0)
return;
const d = dt(l), g = [];
for (const v of d) {
const { rowStart: x, rowEnd: h } = v, E = e.rows({ start: x, end: h });
for (const [p, b] of E.entries()) {
const S = x + p, { index: k, cells: P } = b;
g.push(k.then((K) => {
Z(y);
const M = s.get(S);
(!M || M.value !== K) && (s.set(S, { value: K }), i.dispatchEvent(new CustomEvent("resolve")));
}));
for (const K of t.map((M) => M.name)) {
if (P[K] === void 0)
continue;
const M = P[K];
g.push(M.then((te) => {
Z(y), r.has(K) || r.set(K, /* @__PURE__ */ new Map());
const z = r.get(K)?.get(S);
(!z || z.value !== te) && (r.get(K)?.set(S, { value: te }), i.dispatchEvent(new CustomEvent("resolve")));
}));
}
}
}
await Promise.all(g);
}
return {
columnDescriptors: t,
numRows: n,
getRowNumber: o,
getCell: a,
fetch: u,
eventTarget: i
};
}
function en(e, t) {
const n = t?.sortableColumns ?? new Set(e.columnDescriptors.map((l) => l.name)), i = t?.exclusiveSort ?? e.exclusiveSort;
for (const l of n)
ye({ column: l, data: { columnDescriptors: e.columnDescriptors } });
if (e.columnDescriptors.every(({ name: l, sortable: d }) => n.has(l) ? d === !0 : d === !1 || d === void 0))
return t && "exclusiveSort" in t && e.exclusiveSort !== t.exclusiveSort ? { ...e, exclusiveSort: t.exclusiveSort } : e;
const { numRows: s } = e, r = e.columnDescriptors.map(({ name: l, metadata: d }) => ({
name: l,
sortable: n.has(l),
metadata: structuredClone(d)
// Create a deep copy of the column metadata to avoid mutating the original
})), o = structuredClone(e.metadata), a = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map(), c = je(), f = function({ row: l, orderBy: d }) {
if (Y({ row: l, data: { numRows: s } }), ut({ orderBy: d, sortableColumns: n, exclusiveSort: i }), !d || d.length === 0)
return { value: l };
const g = ge(d), x = u.get(g)?.[l];
if (x !== void 0)
return { value: x };
};
return { metadata: o, numRows: s, columnDescriptors: r, getRowNumber: function({ row: l, orderBy: d }) {
Y({ row: l, data: { numRows: s } });
const g = f({ row: l, orderBy: d });
if (g)
return e.getRowNumber({ row: g.value });
}, getCell: function({ row: l, column: d, orderBy: g }) {
ye({ column: d, data: { columnDescriptors: r } }), Y({ row: l, data: { numRows: s } });
const v = f({ row: l, orderBy: g });
if (v)
return e.getCell({ row: v.value, column: d });
}, fetch: async function({ rowStart: l, rowEnd: d, columns: g, orderBy: v, signal: x }) {
We({ rowStart: l, rowEnd: d, columns: g, orderBy: v, data: { numRows: s, columnDescriptors: r } });
function h() {
c.dispatchEvent(new CustomEvent("resolve"));
}
e.eventTarget?.addEventListener("resolve", h);
try {
if (!v || v.length === 0) {
await e.fetch?.({ rowStart: l, rowEnd: d, columns: g, signal: x });
return;
}
if (l === d)
return;
const E = await nn({
orderBy: v,
signal: x,
ranksByColumn: a,
indexes: u.get(ge(v)),
setIndexes: ({ orderBy: p, indexes: b }) => {
u.set(ge(p), b), c.dispatchEvent(new CustomEvent("resolve"));
},
data: e
});
g && g.length > 0 && e.fetch && await tn({ columns: g, signal: x, indexes: E.slice(l, d), fetch: e.fetch });
} finally {
e.eventTarget?.removeEventListener("resolve", h);
}
}, eventTarget: c, exclusiveSort: i };
}
async function tn({ 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 nn({ orderBy: e, signal: t, ranksByColumn: n, setRanks: i, indexes: s, setIndexes: r, data: o }) {
if (!s) {
const a = await rn({ orderBy: e, signal: t, ranksByColumn: n, setRanks: i, data: o });
s = on(a), r?.({ orderBy: e, indexes: s });
}
return s;
}
async function rn({ orderBy: e, signal: t, ranksByColumn: n, setRanks: i, data: s }) {
const r = [], o = [];
for (const [a, { column: u, direction: c }] of e.entries()) {
ye({ column: u, data: { columnDescriptors: s.columnDescriptors } });
const f = n?.get(u);
f ? r[a] = { direction: c, ranks: f } : o.push(
(s.fetch ? s.fetch({ rowStart: 0, rowEnd: s.numRows, columns: [u], signal: t }) : Promise.resolve()).then(() => {
Z(t);
const w = Array.from({ length: s.numRows }, (y, l) => {
const d = s.getCell({ row: l, column: u });
if (!d)
throw new Error(`Cell not found for row ${l} and column ${u}`);
return d.value;
}), m = Qt(w);
i?.({ column: u, ranks: m }), r[a] = { direction: c, ranks: m };
})
);
}
return await Promise.all(o), r;
}
function on(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 u = a[s], c = a[r];
if (u === void 0 || c === void 0)
throw new Error("Invalid ranks");
const f = o === "ascending" ? 1 : -1;
if (u < c) return -f;
if (u > c) return f;
}
return s - r;
});
}
function sn() {
return {
data: Yt([]),
key: "default",
version: 0
};
}
const ht = ee(sn());
function Je() {
return crypto.randomUUID();
}
function cn({ children: e, data: t }) {
const [n, i] = $(Je()), [s, r] = $(t), [o, a] = $(0);
return _(() => {
function u() {
a((c) => c + 1);
}
return t.eventTarget?.addEventListener("resolve", u), () => {
t.eventTarget?.removeEventListener("resolve", u);
};
}, [t]), t !== s && (i(Je()), r(t), a(0)), /* @__PURE__ */ R(ht.Provider, { value: {
data: t,
key: n,
version: o
}, children: e });
}
function Le() {
return X(ht);
}
function wt({ value: e, onChange: t, defaultValue: n, disabled: i }) {
const [s] = $(e), [r] = $(e !== void 0), [o] = $(i ?? !1), [a, u] = $(n), c = C((f) => {
t?.(f), u(f);
}, [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: c });
}
const gt = ee({});
function an({ children: e, orderBy: t, onOrderByChange: n }) {
const i = wt({
value: t,
onChange: n,
defaultValue: []
});
return /* @__PURE__ */ R(gt.Provider, { value: {
orderBy: i.value,
onOrderByChange: i.onChange
}, children: e });
}
function mt() {
return X(gt);
}
const vt = ee({
containerRef: { current: null }
});
function ln({
children: e
}) {
const t = U(null);
return /* @__PURE__ */ R(vt.Provider, { value: { containerRef: t }, children: e });
}
function pt() {
return X(vt);
}
function Xe() {
return { ranges: [], anchor: void 0 };
}
function Ce(e) {
return Number.isInteger(e) && e >= 0;
}
function Ve(e) {
return Ce(e.start) && Ce(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], i = e[t + 1];
if (!n || !i || n.end >= i.start)
return !1;
}
return !0;
}
function xe({ ranges: e, index: t }) {
if (!Ce(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 bt({ ranges: e, range: t }) {
if (!He(e))
throw new Error("Invalid ranges");
if (!Ve(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 yt({ ranges: e, index: t }) {
return bt({ ranges: e, range: { start: t, end: t + 1 } });
}
function Ct({ ranges: e, index: t }) {
return Rt({ ranges: e, range: { start: t, end: t + 1 } });
}
function Rt({ ranges: e, range: t }) {
if (!He(e))
throw new Error("Invalid ranges");
if (!Ve(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 xt({ ranges: e, index: t }) {
if (!Ce(t))
throw new Error("Invalid index");
const n = { start: t, end: t + 1 };
return xe({ ranges: e, index: t }) ? Rt({ ranges: e, range: n }) : bt({ ranges: e, range: n });
}
function $e({ selection: e, index: t }) {
return { ranges: xt({ ranges: e.ranges, index: t }), anchor: t };
}
function un({ selection: e }) {
return e.ranges.reduce((t, n) => t + (n.end - n.start), 0);
}
const Et = ee({});
function fn({ children: e, data: t, onError: n, selection: i, onSelectionChange: s }) {
const { value: r, onChange: o } = wt({
value: i,
onChange: s,
defaultValue: Xe(),
disabled: i === void 0 && s === void 0
}), [a] = $(() => /* @__PURE__ */ new Map()), [u, c] = $(St({ data: t, selection: r })), { orderBy: f } = mt(), [w, m] = $(void 0), y = C(({ gesture: p }) => {
p.controller.abort(), m((b) => {
if (b !== p)
return b;
});
}, [m]), l = C(() => {
const p = { controller: new AbortController() };
return m((b) => (b && b.controller.abort(), p)), p;
}, []), d = A(() => r !== void 0, [r]), g = A(() => {
if (r)
return ({ rowNumber: p }) => {
if (p !== void 0)
return xe({ ranges: r.ranges, index: p });
};
}, [r]), v = A(() => {
if (!(!r || !o))
return ({ rowNumber: p }) => {
const b = l();
try {
o($e({ selection: r, index: p }));
} finally {
y({ gesture: b });
}
};
}, [o, r, l, y]), x = A(() => {
if (!(!r || !o))
return ({ row: p, rowNumber: b }) => {
const S = l(), { signal: k } = S.controller;
wn({ data: t, row: p, rowNumber: b, selection: r, orderBy: f, signal: k, rowByRowNumberAndOrderBy: a }).finally(() => {
y({ gesture: S });
}).then((P) => {
o(P);
}).catch((P) => {
P instanceof Error && P.name === "AbortError" || n?.(P);
});
};
}, [o, r, a, t, f, l, y, n]), h = A(() => {
if (!(!r || !o))
return () => {
const p = l(), { signal: b } = p.controller;
qe({ data: t, selection: r, signal: b }).finally(() => {
y({ gesture: p });
}).then((S) => {
o(S);
}).catch((S) => {
S instanceof Error && S.name === "AbortError" || n?.(S);
});
};
}, [o, t, r, l, y, n]), E = C((p) => {
const { key: b, shiftKey: S } = p;
if (b === "Escape") {
const k = l();
try {
o?.(Xe());
} finally {
y({ gesture: k });
}
} else if (b === "a" && (p.ctrlKey || p.metaKey)) {
const k = l(), { signal: P } = k.controller;
p.preventDefault(), r && o && qe({ data: t, selection: r, signal: P }).finally(() => {
y({ gesture: k });
}).then((K) => {
o(K);
}).catch((K) => {
K instanceof Error && K.name === "AbortError" || n?.(K);
});
} else if (b === " " && S) {
const { target: k } = p;
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;
p.preventDefault();
const M = l();
try {
o({ ranges: xt({ ranges: r.ranges, index: P }), anchor: P });
} finally {
y({ gesture: M });
}
}
}, [r, o, l, y, t, n]);
return _(() => {
if (!r) return;
const p = l(), { signal: b } = p.controller;
Dt({ data: t, selection: r, signal: b }).finally(() => {
y({ gesture: p });
}).then((S) => {
c(S);
}).catch((S) => {
S instanceof Error && S.name === "AbortError" || n?.(S);
});
}, [r, t, l, y, n]), /* @__PURE__ */ R(Et.Provider, { value: {
selectable: d,
pendingSelectionGesture: w !== void 0,
isRowSelected: g,
toggleRowNumber: v,
toggleRangeToRowNumber: x,
onTableKeyDown: E,
toggleAllRows: h,
allRowsSelected: u
}, children: e });
}
function dn() {
return X(Et);
}
async function _e({ 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) => {
const u = a + t, c = e.getRowNumber({ row: u, orderBy: i })?.value;
if (c === void 0)
throw new Error(`Row number is undefined for row ${u} with orderBy ${JSON.stringify(i ?? [])}`);
return c;
});
}
async function hn({ data: e, rowNumber: t, orderBy: n, signal: i, rowByRowNumberAndOrderBy: s }) {
Z(i);
const { numRows: r } = e, o = ge(n ?? []), a = s?.get(o);
if (a)
return a.get(t);
const u = /* @__PURE__ */ new Map();
await e.fetch?.({ rowStart: 0, rowEnd: r, orderBy: n, signal: i });
for (let c = 0; c < r; c++) {
const f = e.getRowNumber({ row: c, orderBy: n })?.value;
if (f === void 0)
throw new Error(`Row number is undefined for row ${c} with orderBy ${o}`);
u.set(f, c);
}
return s?.set(o, u), u.get(t);
}
async function wn({ data: e, row: t, rowNumber: n, selection: i, orderBy: s, signal: r, rowByRowNumberAndOrderBy: o }) {
const { anchor: a } = i;
if (a === void 0 || a === n)
return $e({ selection: i, index: n });
const u = await hn({ data: e, rowNumber: a, orderBy: s, signal: r, rowByRowNumberAndOrderBy: o });
if (u === void 0 || u === t)
return $e({ selection: i, index: n });
const [c, f] = u < t ? [u + 1, t + 1] : [t, u], w = await _e({ data: e, rowStart: c, rowEnd: f, orderBy: s, signal: r });
let { ranges: m } = i;
const y = e.getRowNumber({ row: t, orderBy: s })?.value;
if (y === void 0)
throw new Error(`Row number for row ${t} not found in orderBy ${ge(s ?? [])}`);
const l = xe({ ranges: m, index: a });
for (const d of w)
m = l ? yt({ ranges: m, index: d }) : Ct({ ranges: m, index: d });
return { ranges: m, anchor: y };
}
async function qe({ data: e, selection: t, signal: n }) {
const i = await Dt({ data: e, selection: t, signal: n }), s = await _e({ data: e, rowStart: 0, rowEnd: e.numRows, signal: n });
let { ranges: r } = t;
for (const o of s)
r = i ? Ct({ ranges: r, index: o }) : yt({ ranges: r, index: o });
return { ranges: r };
}
function St({ data: e, selection: t }) {
if (!t || e.numRows === 0 || un({ selection: t }) < e.numRows)
return !1;
}
async function Dt({ data: e, selection: t, signal: n }) {
const i = St({ data: e, selection: t });
if (i !== void 0)
return i;
const s = await _e({ data: e, rowStart: 0, rowEnd: e.numRows, signal: n });
return s.length > 0 && s.every((r) => xe({ ranges: t.ranges, index: r }));
}
function gn(e, t) {
return A(() => {
const { columnDescriptors: n } = e, i = new Set(n.map((r) => r.name)), s = n.map(({ name: r, sortable: o }, a) => ({
name: r,
index: a,
sortable: o ?? !1,
// Default to false if not specified
...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 Te(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) => Qe(Te(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]) => Qe(`${t}: ${Te(n)}`, 2)).join(`,
`)}
}` : JSON.stringify(e);
}
function Qe(e, t) {
return e?.split(`
`).map((n) => " ".repeat(t) + n).join(`
`);
}
function mn({ cell: e, onDoubleClickCell: t, onMouseDownCell: n, onKeyDownCell: i, stringify: s, columnIndex: r, className: o, ariaColIndex: a, ariaRowIndex: u, rowNumber: c, renderCellContent: f }) {
const w = U(null), { tabIndex: m, navigateToCell: y } = Re({ ref: w, ariaColIndex: a, ariaRowIndex: u }), l = C((b) => {
y(), n && c !== void 0 && n(b, r, c);
}, [y, n, c, r]), d = C((b) => {
y(), t && c !== void 0 && t(b, r, c);
}, [y, t, c, r]), g = C((b) => {
i && c !== void 0 && i(b, r, c);
}, [i, c, r]), { getColumnStyle: v } = Ke(), x = v?.(r), h = A(() => s(e?.value), [s, e]), E = A(() => {
if (h !== void 0) {
if (h.length > 400)
return `${h.slice(0, 397)}…`;
if (h.length > 100)
return h;
}
}, [h]), p = A(() => f?.({ cell: e, stringify: s, col: r, row: c }) ?? h, [e, s, r, c, f, h]);
return /* @__PURE__ */ R(
"td",
{
ref: w,
role: "cell",
"aria-busy": e === void 0,
"aria-rowindex": u,
"aria-colindex": a,
"data-rownumber": c,
tabIndex: m,
onDoubleClick: d,
onMouseDown: l,
onKeyDown: g,
style: x,
className: o,
title: E,
children: p
}
);
}
function pe({
children: e,
ariaRowIndex: t,
selected: n,
rowNumber: i,
title: s
}) {
return /* @__PURE__ */ R(
"tr",
{
role: "row",
"aria-rowindex": t,
title: s,
"aria-selected": n,
"data-rownumber": i,
children: e
}
);
}
function vn(e) {
return e === void 0 ? "" : (e + 1).toLocaleString("en-US");
}
function Pe({ onCheckboxPress: e, pendingSelectionGesture: t, style: n, ariaColIndex: i, ariaRowIndex: s, selected: r, rowNumber: o }) {
const a = U(null), { tabIndex: u, navigateToCell: c } = Re({ ref: a, ariaColIndex: i, ariaRowIndex: s }), f = C((l) => {
c(), e?.({ shiftKey: l.shiftKey });
}, [e, c]), w = C((l) => {
(l.key === "Enter" || l.key === " ") && (l.preventDefault(), l.stopPropagation(), e?.({ shiftKey: l.shiftKey }));
}, [e]), m = e === void 0, y = C((l) => {
l.preventDefault();
}, []);
return /* @__PURE__ */ F(
"th",
{
ref: a,
scope: "row",
role: "rowheader",
style: n,
onClick: f,
onKeyDown: w,
"aria-busy": o === void 0,
"aria-checked": r,
"aria-rowindex": s,
"aria-colindex": i,
"aria-disabled": m,
tabIndex: u,
"data-rownumber": o,
children: [
/* @__PURE__ */ R("span", { children: vn(o) }),
r !== void 0 && /* @__PURE__ */ R(
"input",
{
type: "checkbox",
onChange: y,
readOnly: m,
disabled: m,
"aria-busy": t,
checked: r,
role: "presentation",
tabIndex: -1
}
)
]
}
);
}
function pn({ children: e, checked: t, onCheckboxPress: n, pendingSelectionGesture: i, style: s, ariaColIndex: r, ariaRowIndex: o }, a) {
const u = U(null);
Ft(a, () => ({
get offsetWidth() {
return u.current?.offsetWidth ?? 0;
}
}), []);
const { tabIndex: c, navigateToCell: f } = Re({ ref: u, ariaColIndex: r, ariaRowIndex: o }), w = C(() => {
f(), n?.();
}, [n, f]), m = C((g) => {
(g.key === "Enter" || g.key === " ") && (g.preventDefault(), g.stopPropagation(), n?.());
}, [n]), y = t !== void 0, l = n === void 0, d = C((g) => {
g.preventDefault();
}, []);
return /* @__PURE__ */ R(
"td",
{
ref: u,
style: s,
onClick: w,
onKeyDown: m,
"aria-checked": t,
"aria-rowindex": o,
"aria-colindex": r,
"aria-disabled": l,
tabIndex: c,
children: y ? /* @__PURE__ */ R(
"input",
{
type: "checkbox",
onChange: d,
readOnly: l,
disabled: l,
"aria-busy": i,
checked: t,
role: "presentation",
tabIndex: -1
}
) : /* @__PURE__ */ R("span", { children: e })
}
);
}
const kt = Wt(pn);
kt.displayName = "TableCorner";
function bn(e, t) {
const [n, i] = $({ left: 0, top: 0 }), [s, r] = $(!1), o = rt(), a = C(() => {
r(!1);
}, []), u = C(
(c) => {
c.stopPropagation();
const f = e.current?.getBoundingClientRect(), w = c.currentTarget.getBoundingClientRect();
i({
left: w.left,
top: f?.bottom ?? 0
}), t(), r((m) => !m);
},
[e, t]
);
return {
isOpen: s,
position: n,
menuId: o,
close: a,
handleMenuClick: u
};
}
const yn = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
function Cn(e, t) {
const n = U(null), i = C(() => [...t.current?.querySelectorAll(yn) ?? []].filter((r) => r instanceof HTMLElement), [t]);
_(() => {
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 = C((r) => {
const o = i();
if (!o.length)
return;
const { activeElement: a } = document;
if (!a || !(a instanceof HTMLElement))
return;
const u = Array.from(o).indexOf(a);
let c;
switch (r) {
case "first":
c = 0;
break;
case "last":
c = o.length - 1;
break;
case "next":
c = u >= o.length - 1 ? 0 : u + 1;
break;
case "previous":
c = u <= 0 ? o.length - 1 : u - 1;
break;
}
o[c]?.focus();
}, [i]);
return { getFocusableElements: i, navigateFocus: s };
}
function Rn(e) {
switch (e) {
case "ascending":
return "Ascending";
case "descending":
return "Descending";
default:
return "No sort";
}
}
function Ye({ title: e, children: t }) {
return /* @__PURE__ */ F(nt, { children: [
/* @__PURE__ */ R("div", { role: "separator", children: e }),
t
] });
}
function Ie({ onClick: e, label: t }) {
const n = C((s) => {
s.preventDefault(), s.stopPropagation(), e?.();
}, [e]), i = C((s) => {
(s.key === "Enter" || s.key === " ") && (s.stopPropagation(), s.preventDefault(), e?.());
}, [e]);
return /* @__PURE__ */ R(
"button",
{
role: "menuitem",
onClick: n,
onKeyDown: i,
tabIndex: 0,
type: "button",
children: t
}
);
}
function xn({ onClick: e }) {
return /* @__PURE__ */ R("div", { role: "presentation", onClick: e });
}
function En({
columnName: e,
isOpen: t,
position: n,
direction: i,
sortable: s,
toggleOrderBy: r,
hideColumn: o,
showAllColumns: a,
close: u,
id: c
}) {
const { containerRef: f } = pt(), { top: w, left: m } = n, y = U(null), l = rt(), { navigateFocus: d } = Cn(t, y), { focusFirstCell: g } = it(), v = C((k) => {
switch (k.preventDefault(), k.stopPropagation(), k.key) {
case "Escape":
u();
break;
case "Enter":
case " ":
break;
case "ArrowUp":
case "ArrowLeft":
d("previous");
break;
case "ArrowDown":
case "ArrowRight":
d("next");
break;
case "Home":
d("first");
break;
case "End":
d("last");
break;
case "Tab":
d(k.shiftKey ? "previous" : "next");
break;
}
}, [d, u]), x = C(
(k) => {
k.preventDefault(), k.stopPropagation(), u();
},
[u]
), h = C((k) => {
k.preventDefault(), k.stopPropagation();
}, []), E = A(() => {
if (o)
return () => {
o(), g?.(), u();
};
}, [o, u, g]), p = A(() => {
if (a)
return () => {
a(), u();
};
}, [a, u]);
if (!t)
return null;
const b = Rn(i);
return jt(
/* @__PURE__ */ F(nt, { children: [
/* @__PURE__ */ R(xn, { onClick: x }),
/* @__PURE__ */ F(
"div",
{
id: c,
role: "menu",
style: { top: w, left: m },
ref: y,
tabIndex: -1,
"aria-labelledby": l,
"aria-orientation": "vertical",
onKeyDown: v,
onClick: h,
children: [
/* @__PURE__ */ R("div", { role: "presentation", id: l, "aria-hidden": "true", children: e }),
s && /* @__PURE__ */ R(Ye, { title: "Sort order", children: /* @__PURE__ */ R(
Ie,
{
onClick: r,
label: b
}
) }),
!(!E && !p) && /* @__PURE__ */ F(Ye, { title: "Visibility", children: [
E && /* @__PURE__ */ R(
Ie,
{
onClick: E,
label: "Hide column"
}
),
p && /* @__PURE__ */ R(
Ie,
{
onClick: p,
label: "Show all columns"
}
)
] })
]
}
)
] }),
f.current ?? document.body
);
}
function Sn({
onClick: e,
onEscape: t,
tabIndex: n = 0,
isExpanded: i = !1,
menuId: s,
disabled: r = !1,
"aria-label": o = "Column menu",
icon: a = /* @__PURE__ */ R("span", { "aria-hidden": "true", children: "⋮" })
}) {
const u = C((f) => {
f.key === "Enter" || f.key === " " ? (f.preventDefault(), f.stopPropagation(), e?.(f)) : f.key === "Escape" && (f.preventDefault(), f.stopPropagation(), t?.(f));
}, [e, t]), c = C((f) => {
e?.(f);
}, [e]);
return /* @__PURE__ */ R(
"button",
{
type: "button",
onClick: r ? void 0 : c,
onKeyDown: r ? void 0 : u,
"aria-label": o,
"aria-haspopup": "menu",
"aria-expanded": i,
"aria-controls": s,
disabled: r,
tabIndex: r ? -1 : n,
children: a
}
);
}
const Ze = 10, et = 100;
function Dn({ autoResize: e, forceWidth: t, width: n, tabIndex: i, navigateToCell: s }) {
const [r, o] = $(void 0), [a, u] = $(!1), c = C(() => {
r || e?.(), s?.();
}, [e, s, r]), f = C((h) => {
h.stopPropagation();
}, []), w = C((h) => {
if (h.button !== 0 || h.ctrlKey || h.metaKey || (s?.(), h.stopPropagation(), n === void 0))
return;
const { clientX: E, currentTarget: p, pointerId: b } = h;
o({ clientX: E, pointerId: b, width: n }), "setPointerCapture" in p && p.setPointerCapture(b);
}, [s, n]), m = C((h) => {
!r || h.pointerId !== r.pointerId || t?.(r.width - r.clientX + h.clientX);
}, [t, r]), y = C((h) => {
h.stopPropagation(), o((E) => {
if (!(E && h.pointerId === E.pointerId))
return E;
});
}, []), l = C(() => {
u(!0);
}, []), d = C(() => {
u(!1);
}, []), g = C((h) => {
if (a && ([" ", "ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End"].includes(h.key) && h.preventDefault(), h.stopPropagation(), !r)) {
if (h.key === "Escape") {
u(!1), s?.();
return;
}
if (h.key === "Enter" || h.key === " ") {
c();
return;
}
n !== void 0 && (h.key === "ArrowRight" || h.key === "ArrowUp" ? t?.(n + Ze) : h.key === "ArrowLeft" || h.key === "ArrowDown" ? t?.(n - Ze) : h.key === "PageUp" ? t?.(n + et) : h.key === "PageDown" ? t?.(n - et) : h.key === "Home" && t?.(0));
}
}, [c, r, t, n, a, s]), v = r !== void 0 || a, x = A(() => n === void 0 ? "No width set." : `Width set to ${n} pixels.`, [n]);
return /* @__PURE__ */ R(
"span",
{
role: "spinbutton",
"aria-orientation": "vertical",
"aria-busy": v,
"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: w,
onPointerMove: m,
onPointerUp: y,
onClick: f,
onFocus: l,
onBlur: d,
onKeyDown: g,
tabIndex: i
}
);
}
function kn({ columnIndex: e, columnName: t, columnConfig: n, canMeasureWidth: i, direction: s, toggleOrderBy: r, orderByIndex: o, orderBySize: a, ariaColIndex: u, ariaRowIndex: c, className: f, children: w }) {
const m = U(null), { tabIndex: y, navigateToCell: l } = Re({ ref: m, ariaColIndex: u, ariaRowIndex: c }), { sortable: d, headerComponent: g } = n, { isOpen: v, position: x, menuId: h, close: E, handleMenuClick: p } = bn(m, l), { getHideColumn: b, showAllColumns: S } = lt(), k = C(() => {
l(), d && r?.();
}, [r, l, d]), P = A(() => b?.(e), [b, e]), K = A(() => !(!d && !P && !S), [d, P, S]), { getColumnStyle: M, isFixedColumn: te, getColumnWidth: z, measureWidth: B, forceWidth: q, removeWidth: ie } = Ke(), se = M?.(e), Q = te?.(e) === !0 ? !0 : void 0, G = z?.(e), j = C((T) => {
q?.({ columnIndex: e, width: T, minWidth: n.minWidth });
}, [q, e, n.minWidth]);
_(() => {
const T = m.current;
if (i && T && G === void 0) {
const L = Ae(T);
if (isNaN(L))
return;
B?.({ columnIndex: e, measured: L });
}
}, [i, B, G, e]);
const Ee = C(() => {
const T = m.current;
if (T && B && q && ie) {
Lt(() => {
ie({ columnIndex: e });
});
const L = Ae(T);
if (isNaN(L))
return;
Q && G === L ? B({ columnIndex: e, measured: L }) : q({ columnIndex: e, width: L });
}
}, [B, q, ie, e, Q, G]), ne = A(() => d ? 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`, [d, t, s, o]), Se = C((T) => {
T.target === m.current && (T.key === "Enter" || T.key === " ") && (T.preventDefault(), T.stopPropagation(), r?.());
}, [r]);
return /* @__PURE__ */ F(
"th",
{
ref: m,
scope: "col",
role: "columnheader",
"aria-sort": s ?? (d ? "none" : void 0),
"data-order-by-index": a !== void 0 ? o : void 0,
"data-order-by-size": a,
"aria-label": t,
"aria-description": ne,
"aria-rowindex": c,
"aria-colindex": u,
tabIndex: y,
title: ne,
onClick: k,
onKeyDown: Se,
style: se,
className: f,
"data-fixed-width": Q,
children: [
g ?? w,
K && /* @__PURE__ */ R(
Sn,
{
onClick: p,
onEscape: l,
tabIndex: y,
isExpanded: v,
menuId: h,
"aria-label": `Column menu for ${t}`
}
),
/* @__PURE__ */ R(
Dn,
{
forceWidth: j,
autoResize: Ee,
width: G,
tabIndex: y,
navigateToCell: l
}
),
/* @__PURE__ */ R(
En,
{
columnName: t,
isOpen: v,
position: x,
direction: s,
sortable: d,
toggleOrderBy: r,
hideColumn: P,
showAllColumns: S,
close: E,
id: h
}
)
]
}
);
}
function Pn({
columnsParameters: e,
orderBy: t,
onOrderByChange: n,
canMeasureWidth: i,
ariaRowIndex: s,
columnClassNames: r = []
}) {
const { data: o } = Le(), a = o.exclusiveSort === !0, u = C(
(f) => {
if (!(!n || !t))
return () => {
const w = a ? qt(f, t) : Xt(f, t);
n(w);
};
},
[t, n, a]
), c = A(() => new Map((t ?? []).map(({ column: f, direction: w }, m) => [f, { direction: w, index: m }])), [t]);
return e.map((f) => {
const { name: w, index: m, ...y } =