@lablup/ui-common 0.1.0-alpha.12 → 0.1.0-alpha.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -115,6 +115,19 @@ export interface DataTableProps<T> {
|
|
|
115
115
|
* with a clickable affordance (cursor: pointer + keyboard binding).
|
|
116
116
|
*/
|
|
117
117
|
onRowClick?: (row: T) => void;
|
|
118
|
+
/**
|
|
119
|
+
* Narrows `onRowClick` to the rows that can actually act on it, for a table
|
|
120
|
+
* that mixes actionable and informational rows. A row this returns `false`
|
|
121
|
+
* for gets no pointer affordance, no tab stop, and no keyboard binding, so it
|
|
122
|
+
* is not announced as a button it cannot be.
|
|
123
|
+
*/
|
|
124
|
+
isRowClickable?: (row: T, index: number) => boolean;
|
|
125
|
+
/**
|
|
126
|
+
* Extra class for one row, for flagging a specific row without forking the
|
|
127
|
+
* table: a transient deep-link highlight, a stale entry, a row being removed.
|
|
128
|
+
* A falsy return adds nothing.
|
|
129
|
+
*/
|
|
130
|
+
rowClassName?: (row: T, index: number) => string | undefined | false | null;
|
|
118
131
|
/**
|
|
119
132
|
* Controlled — the column currently being sorted. Pass `undefined` to
|
|
120
133
|
* indicate no active sort. When this prop is present, the component
|
|
@@ -139,6 +152,6 @@ export interface DataTableProps<T> {
|
|
|
139
152
|
*/
|
|
140
153
|
onSortChange?: (columnId: string | undefined, direction: SortDirection | undefined) => void;
|
|
141
154
|
}
|
|
142
|
-
declare function DataTableInner<T>({ columns, rows, getRowKey, emptyState, loadingState, loading, columnState, onColumnStateChange, className, ariaLabel, testId, onRowClick, sortColumnId: controlledSortColumnId, sortDirection: controlledSortDirection, onSortChange, }: DataTableProps<T>): import("react").JSX.Element;
|
|
155
|
+
declare function DataTableInner<T>({ columns, rows, getRowKey, emptyState, loadingState, loading, columnState, onColumnStateChange, className, ariaLabel, testId, onRowClick, isRowClickable, rowClassName, sortColumnId: controlledSortColumnId, sortDirection: controlledSortDirection, onSortChange, }: DataTableProps<T>): import("react").JSX.Element;
|
|
143
156
|
export declare const DataTable: typeof DataTableInner;
|
|
144
157
|
export default DataTable;
|
|
@@ -2,11 +2,29 @@
|
|
|
2
2
|
import { memo as e, useCallback as t, useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
|
|
3
3
|
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
4
4
|
//#region src/components/DataTable/DataTable.tsx
|
|
5
|
-
var c =
|
|
5
|
+
var c = [
|
|
6
|
+
"a",
|
|
7
|
+
"button",
|
|
8
|
+
"input",
|
|
9
|
+
"select",
|
|
10
|
+
"textarea",
|
|
11
|
+
"summary",
|
|
12
|
+
"label",
|
|
13
|
+
"[contenteditable='true']",
|
|
14
|
+
"[role='button']",
|
|
15
|
+
"[role='link']",
|
|
16
|
+
"[tabindex]:not([tabindex='-1'])"
|
|
17
|
+
].join(",");
|
|
18
|
+
function l(e, t) {
|
|
19
|
+
if (!(e instanceof Element) || !(t instanceof Element)) return !1;
|
|
20
|
+
let n = e.closest(c);
|
|
21
|
+
return n !== null && n !== t && t.contains(n);
|
|
22
|
+
}
|
|
23
|
+
var u = {
|
|
6
24
|
widths: {},
|
|
7
25
|
visibility: {}
|
|
8
26
|
};
|
|
9
|
-
function
|
|
27
|
+
function d(e, t) {
|
|
10
28
|
let n = e.map((e, t) => ({
|
|
11
29
|
row: e,
|
|
12
30
|
i: t
|
|
@@ -16,7 +34,7 @@ function l(e, t) {
|
|
|
16
34
|
return r === 0 ? e.i - n.i : r;
|
|
17
35
|
}), n.map(({ row: e }) => e);
|
|
18
36
|
}
|
|
19
|
-
function
|
|
37
|
+
function f(e, t) {
|
|
20
38
|
let { sortComparator: n } = e;
|
|
21
39
|
if (n) return (e, r) => n(e, r, t);
|
|
22
40
|
let r = e.sortValueAccessor;
|
|
@@ -29,10 +47,10 @@ function u(e, t) {
|
|
|
29
47
|
return o = typeof i == "number" && typeof a == "number" ? i - a : String(i).localeCompare(String(a)), t === "asc" ? o : -o;
|
|
30
48
|
} : () => 0;
|
|
31
49
|
}
|
|
32
|
-
function
|
|
50
|
+
function p(e, t, n) {
|
|
33
51
|
if (e.sortable) return e.id === t ? n === "asc" ? "ascending" : "descending" : "none";
|
|
34
52
|
}
|
|
35
|
-
function
|
|
53
|
+
function m({ direction: e }) {
|
|
36
54
|
return e === "none" ? /* @__PURE__ */ o("span", {
|
|
37
55
|
className: "data-table__sort-icon data-table__sort-icon--none",
|
|
38
56
|
"aria-hidden": "true",
|
|
@@ -90,36 +108,36 @@ function f({ direction: e }) {
|
|
|
90
108
|
})
|
|
91
109
|
});
|
|
92
110
|
}
|
|
93
|
-
function
|
|
94
|
-
let [
|
|
111
|
+
function h({ columns: e, rows: c, getRowKey: h, emptyState: g, loadingState: _, loading: v = !1, columnState: y, onColumnStateChange: b, className: x = "", ariaLabel: S = "Data table", testId: C, onRowClick: w, isRowClickable: T, rowClassName: E, sortColumnId: D, sortDirection: O, onSortChange: k }) {
|
|
112
|
+
let [A, j] = a(() => y ?? u);
|
|
95
113
|
n(() => {
|
|
96
|
-
|
|
97
|
-
}, [
|
|
98
|
-
let
|
|
114
|
+
y && j(y);
|
|
115
|
+
}, [y]);
|
|
116
|
+
let M = D !== void 0 || O !== void 0, [N, P] = a(void 0), [F, I] = a(void 0), L = M ? D : N, R = M ? O : F, z = t((e) => {
|
|
99
117
|
if (!e.sortable) return;
|
|
100
118
|
let t, n;
|
|
101
|
-
|
|
119
|
+
L === e.id ? R === (e.defaultSortDirection ?? "asc") ? (t = e.id, n = R === "asc" ? "desc" : "asc") : (t = void 0, n = void 0) : (t = e.id, n = e.defaultSortDirection ?? "asc"), M || (P(t), I(n)), k?.(t, n);
|
|
102
120
|
}, [
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
]),
|
|
108
|
-
let t =
|
|
121
|
+
L,
|
|
122
|
+
R,
|
|
123
|
+
M,
|
|
124
|
+
k
|
|
125
|
+
]), B = r(() => e.filter((e) => e.alwaysVisible ? !0 : A.visibility[e.id] !== !1), [e, A.visibility]), V = t((e) => {
|
|
126
|
+
let t = A.widths[e.id];
|
|
109
127
|
return typeof t == "number" && t > 0 ? t : e.initialWidth;
|
|
110
|
-
}, [
|
|
128
|
+
}, [A.widths]), H = i(null), U = t((e, t, n) => {
|
|
111
129
|
if (t.noResize) return;
|
|
112
|
-
e.preventDefault(), e.stopPropagation(),
|
|
130
|
+
e.preventDefault(), e.stopPropagation(), H.current = {
|
|
113
131
|
columnId: t.id,
|
|
114
132
|
startX: e.clientX,
|
|
115
133
|
startWidth: n,
|
|
116
134
|
minWidth: t.minWidth ?? 80
|
|
117
135
|
};
|
|
118
136
|
let r = (e) => {
|
|
119
|
-
let t =
|
|
137
|
+
let t = H.current;
|
|
120
138
|
if (!t) return;
|
|
121
139
|
let n = e.clientX - t.startX, r = Math.max(t.minWidth, t.startWidth + n);
|
|
122
|
-
|
|
140
|
+
j((e) => ({
|
|
123
141
|
...e,
|
|
124
142
|
widths: {
|
|
125
143
|
...e.widths,
|
|
@@ -127,36 +145,36 @@ function p({ columns: e, rows: p, getRowKey: m, emptyState: h, loadingState: g,
|
|
|
127
145
|
}
|
|
128
146
|
}));
|
|
129
147
|
}, i = () => {
|
|
130
|
-
|
|
148
|
+
H.current = null, window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", i);
|
|
131
149
|
};
|
|
132
150
|
window.addEventListener("mousemove", r), window.addEventListener("mouseup", i);
|
|
133
|
-
}, []),
|
|
151
|
+
}, []), W = i(A);
|
|
134
152
|
n(() => {
|
|
135
|
-
|
|
136
|
-
}, [
|
|
137
|
-
let
|
|
138
|
-
if (!
|
|
139
|
-
let t = e.find((e) => e.id ===
|
|
140
|
-
return t?.sortable ?
|
|
153
|
+
W.current !== A && (W.current = A, b?.(A));
|
|
154
|
+
}, [A, b]);
|
|
155
|
+
let G = r(() => {
|
|
156
|
+
if (!L || !R) return c;
|
|
157
|
+
let t = e.find((e) => e.id === L);
|
|
158
|
+
return t?.sortable ? d(c, f(t, R)) : c;
|
|
141
159
|
}, [
|
|
142
|
-
|
|
160
|
+
c,
|
|
143
161
|
e,
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
]),
|
|
162
|
+
L,
|
|
163
|
+
R
|
|
164
|
+
]), K = ["data-table", x].filter(Boolean).join(" ");
|
|
147
165
|
return /* @__PURE__ */ o("div", {
|
|
148
|
-
className:
|
|
149
|
-
"data-testid":
|
|
166
|
+
className: K,
|
|
167
|
+
"data-testid": C,
|
|
150
168
|
children: /* @__PURE__ */ s("table", {
|
|
151
169
|
className: "data-table__table",
|
|
152
|
-
"aria-label":
|
|
170
|
+
"aria-label": S,
|
|
153
171
|
role: "table",
|
|
154
172
|
children: [/* @__PURE__ */ o("thead", {
|
|
155
173
|
className: "data-table__head",
|
|
156
174
|
children: /* @__PURE__ */ o("tr", {
|
|
157
175
|
className: "data-table__row data-table__row--head",
|
|
158
|
-
children:
|
|
159
|
-
let t =
|
|
176
|
+
children: B.map((e) => {
|
|
177
|
+
let t = V(e), n = e.sortable && e.id === L;
|
|
160
178
|
return /* @__PURE__ */ s("th", {
|
|
161
179
|
scope: "col",
|
|
162
180
|
className: [
|
|
@@ -168,12 +186,12 @@ function p({ columns: e, rows: p, getRowKey: m, emptyState: h, loadingState: g,
|
|
|
168
186
|
e.align && `data-table__cell--align-${e.align}`
|
|
169
187
|
].filter(Boolean).join(" "),
|
|
170
188
|
style: t ? { width: `${String(t)}px` } : void 0,
|
|
171
|
-
"aria-sort":
|
|
189
|
+
"aria-sort": p(e, L, R),
|
|
172
190
|
onClick: e.sortable ? () => {
|
|
173
|
-
|
|
191
|
+
z(e);
|
|
174
192
|
} : void 0,
|
|
175
193
|
onKeyDown: e.sortable ? (t) => {
|
|
176
|
-
(t.key === "Enter" || t.key === " ") && (t.preventDefault(),
|
|
194
|
+
(t.key === "Enter" || t.key === " ") && (t.preventDefault(), z(e));
|
|
177
195
|
} : void 0,
|
|
178
196
|
tabIndex: e.sortable ? 0 : void 0,
|
|
179
197
|
children: [
|
|
@@ -181,13 +199,13 @@ function p({ columns: e, rows: p, getRowKey: m, emptyState: h, loadingState: g,
|
|
|
181
199
|
className: "data-table__head-label",
|
|
182
200
|
children: e.header
|
|
183
201
|
}),
|
|
184
|
-
e.sortable && /* @__PURE__ */ o(
|
|
202
|
+
e.sortable && /* @__PURE__ */ o(m, { direction: n && R ? R : "none" }),
|
|
185
203
|
!e.noResize && /* @__PURE__ */ o("div", {
|
|
186
204
|
role: "separator",
|
|
187
205
|
"aria-orientation": "vertical",
|
|
188
206
|
className: "data-table__resize-handle",
|
|
189
207
|
onMouseDown: (n) => {
|
|
190
|
-
|
|
208
|
+
U(n, e, t ?? e.minWidth ?? 120);
|
|
191
209
|
}
|
|
192
210
|
})
|
|
193
211
|
]
|
|
@@ -196,33 +214,37 @@ function p({ columns: e, rows: p, getRowKey: m, emptyState: h, loadingState: g,
|
|
|
196
214
|
})
|
|
197
215
|
}), /* @__PURE__ */ o("tbody", {
|
|
198
216
|
className: "data-table__body",
|
|
199
|
-
children:
|
|
217
|
+
children: v ? /* @__PURE__ */ o("tr", {
|
|
200
218
|
className: "data-table__row data-table__row--state",
|
|
201
219
|
children: /* @__PURE__ */ o("td", {
|
|
202
|
-
colSpan:
|
|
220
|
+
colSpan: B.length || 1,
|
|
203
221
|
className: "data-table__state-cell",
|
|
204
|
-
children:
|
|
222
|
+
children: _ ?? /* @__PURE__ */ o("div", { className: "data-table__loading" })
|
|
205
223
|
})
|
|
206
|
-
}) :
|
|
224
|
+
}) : G.length === 0 ? /* @__PURE__ */ o("tr", {
|
|
207
225
|
className: "data-table__row data-table__row--state",
|
|
208
226
|
children: /* @__PURE__ */ o("td", {
|
|
209
|
-
colSpan:
|
|
227
|
+
colSpan: B.length || 1,
|
|
210
228
|
className: "data-table__state-cell",
|
|
211
|
-
children:
|
|
229
|
+
children: g
|
|
212
230
|
})
|
|
213
|
-
}) :
|
|
214
|
-
let n =
|
|
231
|
+
}) : G.map((e, t) => {
|
|
232
|
+
let n = h(e, t), r = !!(w && (T?.(e, t) ?? !0)), i = E?.(e, t);
|
|
215
233
|
return /* @__PURE__ */ o("tr", {
|
|
216
|
-
className: [
|
|
217
|
-
|
|
218
|
-
|
|
234
|
+
className: [
|
|
235
|
+
"data-table__row",
|
|
236
|
+
r && "data-table__row--clickable",
|
|
237
|
+
i
|
|
238
|
+
].filter(Boolean).join(" "),
|
|
239
|
+
onClick: r ? (t) => {
|
|
240
|
+
l(t.target, t.currentTarget) || w?.(e);
|
|
219
241
|
} : void 0,
|
|
220
|
-
onKeyDown:
|
|
221
|
-
(t.key === "Enter" || t.key === " ") && (t.preventDefault(),
|
|
242
|
+
onKeyDown: r ? (t) => {
|
|
243
|
+
(t.key === "Enter" || t.key === " ") && (l(t.target, t.currentTarget) || (t.preventDefault(), w?.(e)));
|
|
222
244
|
} : void 0,
|
|
223
|
-
tabIndex:
|
|
224
|
-
role:
|
|
225
|
-
children:
|
|
245
|
+
tabIndex: r ? 0 : void 0,
|
|
246
|
+
role: r ? "button" : void 0,
|
|
247
|
+
children: B.map((n) => /* @__PURE__ */ o("td", {
|
|
226
248
|
className: [
|
|
227
249
|
"data-table__cell",
|
|
228
250
|
n.className,
|
|
@@ -236,9 +258,9 @@ function p({ columns: e, rows: p, getRowKey: m, emptyState: h, loadingState: g,
|
|
|
236
258
|
})
|
|
237
259
|
});
|
|
238
260
|
}
|
|
239
|
-
var
|
|
261
|
+
var g = e(h);
|
|
240
262
|
//#endregion
|
|
241
|
-
export {
|
|
263
|
+
export { g as DataTable, g as default };
|
|
242
264
|
|
|
243
265
|
//# sourceMappingURL=DataTable2.js.map
|
|
244
266
|
import "../../assets/components/DataTable/DataTable.css";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable2.js","names":[],"sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/**\n * DataTable Component (epic #2730 / issue #2738 · sort: epic #2859 / issue #2861)\n *\n * Generic, type-safe table primitive modeled after the Backend.AI WebUI\n * `BAITable`. Designed so future menus (Models, Sessions, Data, ...)\n * can share one tabular surface instead of inventing a new one each\n * time.\n *\n * Features (V1 — additional capabilities planned for follow-up issues):\n * - Type-safe column definitions with custom cell renderers\n * - Optional column-visibility persistence via `localStorage` when\n * `persistKey` is supplied\n * - Optional resizable columns (drag the right edge of a header cell)\n * with widths persisted alongside visibility\n * - Empty-state slot rendered when `rows` is empty\n * - Loading-state slot rendered when `loading` is `true`\n * - Stable `getRowKey` accessor so rows with the same identifier remain\n * referentially identical across event-driven updates\n *\n * Sorting (V2 — epic #2859 / issue #2861):\n * - Optional per-column sortable flag with sort value accessor or\n * custom comparator\n * - Optional defaultSortDirection per column\n * - Controlled (`sortColumnId` + `sortDirection` + `onSortChange`) and\n * uncontrolled (internal state) modes\n * - Accessible `aria-sort` attributes on header cells\n * - Keyboard activation (Enter / Space) for sortable headers\n * - Stable sort — equal-valued rows retain their original order\n * - Sorting never mutates the original `rows` prop\n *\n * The component is intentionally domain-agnostic — it MUST NOT carry\n * Session, Model, or Agent-specific knowledge. The first consumer is\n * `SessionListTable` (epic #2730 / #2738) but the API is generic.\n */\n\nimport {\n memo,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type ReactNode,\n} from \"react\";\nimport \"./DataTable.css\";\n\n// ============================================================================\n// Public types\n// ============================================================================\n\n/** Direction a column is currently sorted. */\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport interface DataTableColumn<T> {\n /** Unique identifier for the column. Used for visibility + width persistence. */\n id: string;\n /** Header label. */\n header: ReactNode;\n /**\n * Cell renderer. Receives the row and returns a React node. Pure\n * functions are encouraged so memoization stays effective.\n */\n render: (row: T, index: number) => ReactNode;\n /** Optional minimum column width in pixels. Defaults to 80. */\n minWidth?: number;\n /** Optional initial width in pixels (only honored on the first paint). */\n initialWidth?: number;\n /** When `true`, the column cannot be resized. Defaults to `false`. */\n noResize?: boolean;\n /** When `true`, the column cannot be hidden by the user. Defaults to `false`. */\n alwaysVisible?: boolean;\n /** Extra `class` for the column's `<th>` and `<td>` cells. */\n className?: string;\n /**\n * When provided, the value is exposed via the `align` style on the\n * column's cells. Useful for right-aligned numeric columns.\n */\n align?: \"left\" | \"right\" | \"center\";\n\n // ---- Sorting API (added epic #2859 / issue #2861) -------------------------\n\n /**\n * When `true`, the column header renders a sort affordance and clicking\n * (or pressing Enter / Space) cycles through ascending → descending →\n * unsorted states. Defaults to `false`.\n */\n sortable?: boolean;\n /**\n * Extracts a primitive comparable value from a row for sorting purposes.\n * Used when the default ascending/descending behavior is sufficient.\n * Mutually exclusive with `sortComparator` — if both are provided,\n * `sortComparator` takes precedence.\n *\n * @example\n * ```tsx\n * sortValueAccessor: (row) => row.name.toLowerCase()\n * ```\n */\n sortValueAccessor?: (row: T) => string | number | boolean | null | undefined;\n /**\n * Custom comparator used for sorting. Receives two rows and the active\n * sort direction. Return a negative number if `a` should come first, a\n * positive number if `b` should come first, or `0` if they are equal.\n * The table applies a stable fallback on `0` to preserve original order.\n *\n * @example\n * ```tsx\n * sortComparator: (a, b, dir) =>\n * dir === \"asc\"\n * ? a.createdAt - b.createdAt\n * : b.createdAt - a.createdAt\n * ```\n */\n sortComparator?: (a: T, b: T, direction: SortDirection) => number;\n /**\n * The sort direction applied when this column is first activated.\n * Defaults to `\"asc\"`.\n */\n defaultSortDirection?: SortDirection;\n}\n\nexport interface DataTablePersistedState {\n /** column id → user-overridden width in pixels. */\n widths: Record<string, number>;\n /** column id → visibility flag. Missing keys count as visible. */\n visibility: Record<string, boolean>;\n}\n\nexport interface DataTableProps<T> {\n /** Column definitions, in display order. */\n columns: DataTableColumn<T>[];\n /** Row data. */\n rows: T[];\n /**\n * Stable identifier accessor — used as the React key for each row.\n * Must be deterministic for the lifetime of the row.\n */\n getRowKey: (row: T, index: number) => string;\n /** Render this node when `rows` is empty. */\n emptyState?: ReactNode;\n /** Render this node when `loading` is `true`. */\n loadingState?: ReactNode;\n /** When `true`, the loading slot replaces the table body. */\n loading?: boolean;\n /**\n * Column widths and visibility, controlled by the caller.\n *\n * This component used to take a `persistKey` and write to `localStorage`\n * itself. Storage is a policy decision that belongs to the consumer: where\n * it goes, under which key, whether it is per user or per workspace, and\n * whether it exists at all in a host that has no `localStorage`. A\n * rendering component that answers those questions on its own cannot be\n * reused by a consumer that answers them differently.\n */\n columnState?: DataTablePersistedState;\n /**\n * Called whenever the user resizes a column or toggles its visibility.\n * Pair it with `columnState` to persist wherever the consumer keeps\n * preferences; omit both to get a table that forgets on unmount.\n */\n onColumnStateChange?: (state: DataTablePersistedState) => void;\n /** Extra class for the table's wrapping element. */\n className?: string;\n /** ARIA label for the table. Defaults to \"Data table\". */\n ariaLabel?: string;\n /** Test ID for testing harnesses. */\n testId?: string;\n /**\n * Callback invoked when a row is clicked. When provided, rows render\n * with a clickable affordance (cursor: pointer + keyboard binding).\n */\n onRowClick?: (row: T) => void;\n\n // ---- Sorting props (added epic #2859 / issue #2861) -----------------------\n\n /**\n * Controlled — the column currently being sorted. Pass `undefined` to\n * indicate no active sort. When this prop is present, the component\n * operates in controlled mode: the caller is responsible for updating\n * the sort state via `onSortChange`.\n */\n sortColumnId?: string;\n /**\n * Controlled — the direction of the active sort. Ignored when\n * `sortColumnId` is `undefined`.\n */\n sortDirection?: SortDirection;\n /**\n * Called when the user activates a sortable column header. In\n * controlled mode the caller must propagate this back as\n * `sortColumnId` / `sortDirection`. In uncontrolled mode this prop is\n * purely observational.\n *\n * @param columnId The column being sorted, or `undefined` when the\n * sort is cleared.\n * @param direction The new direction.\n */\n onSortChange?: (\n columnId: string | undefined,\n direction: SortDirection | undefined,\n ) => void;\n}\n\nconst EMPTY_COLUMN_STATE: DataTablePersistedState = { widths: {}, visibility: {} };\n\n// ============================================================================\n// Sorting helpers\n// ============================================================================\n\n/**\n * Stable sort — rows with equal comparison result keep their original\n * relative order. We achieve stability by augmenting each row with its\n * original index and using that as a tie-breaker.\n *\n * The input array is never mutated.\n */\nfunction stableSort<T>(rows: T[], comparator: (a: T, b: T) => number): T[] {\n const indexed = rows.map((row, i) => ({ row, i }));\n indexed.sort((a, b) => {\n const result = comparator(a.row, b.row);\n return result !== 0 ? result : a.i - b.i;\n });\n return indexed.map(({ row }) => row);\n}\n\n/**\n * Builds a comparator from a `DataTableColumn` + active sort direction.\n * Falls back to string comparison when neither `sortComparator` nor\n * `sortValueAccessor` is provided on the column.\n */\nfunction buildComparator<T>(\n col: DataTableColumn<T>,\n direction: SortDirection,\n): (a: T, b: T) => number {\n const { sortComparator } = col;\n if (sortComparator) {\n return (a, b) => sortComparator(a, b, direction);\n }\n const accessor = col.sortValueAccessor;\n if (accessor) {\n return (a, b) => {\n const av = accessor(a);\n const bv = accessor(b);\n // Nullish values sort last regardless of direction.\n if (av == null && bv == null) return 0;\n if (av == null) return 1;\n if (bv == null) return -1;\n let cmp: number;\n if (typeof av === \"number\" && typeof bv === \"number\") {\n cmp = av - bv;\n } else {\n cmp = String(av).localeCompare(String(bv));\n }\n return direction === \"asc\" ? cmp : -cmp;\n };\n }\n // No accessor — unsortable in practice (column should not be sortable).\n return () => 0;\n}\n\n/**\n * Returns the `aria-sort` attribute value for a column header cell.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort\n */\nfunction ariaSortValue(\n col: DataTableColumn<unknown>,\n activeSortColumnId: string | undefined,\n activeSortDirection: SortDirection | undefined,\n): \"ascending\" | \"descending\" | \"none\" | undefined {\n if (!col.sortable) return undefined;\n if (col.id === activeSortColumnId) {\n return activeSortDirection === \"asc\" ? \"ascending\" : \"descending\";\n }\n return \"none\";\n}\n\n// Sort indicator icons rendered as inline SVG so there is no external\n// asset dependency. They intentionally reuse design-token colours so they\n// automatically adapt to light / dark themes.\n\nfunction SortIcon({ direction }: { direction: SortDirection | \"none\" }) {\n if (direction === \"none\") {\n // Neutral chevron stack — both arrows in muted colour\n return (\n <span\n className=\"data-table__sort-icon data-table__sort-icon--none\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"10\"\n height=\"14\"\n viewBox=\"0 0 10 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M5 1L1 5H9L5 1Z\" fill=\"currentColor\" opacity=\"0.35\" />\n <path d=\"M5 13L9 9H1L5 13Z\" fill=\"currentColor\" opacity=\"0.35\" />\n </svg>\n </span>\n );\n }\n if (direction === \"asc\") {\n return (\n <span\n className=\"data-table__sort-icon data-table__sort-icon--asc\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"10\"\n height=\"14\"\n viewBox=\"0 0 10 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M5 1L1 5H9L5 1Z\" fill=\"currentColor\" />\n <path d=\"M5 13L9 9H1L5 13Z\" fill=\"currentColor\" opacity=\"0.25\" />\n </svg>\n </span>\n );\n }\n return (\n <span\n className=\"data-table__sort-icon data-table__sort-icon--desc\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"10\"\n height=\"14\"\n viewBox=\"0 0 10 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M5 1L1 5H9L5 1Z\" fill=\"currentColor\" opacity=\"0.25\" />\n <path d=\"M5 13L9 9H1L5 13Z\" fill=\"currentColor\" />\n </svg>\n </span>\n );\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nfunction DataTableInner<T>({\n columns,\n rows,\n getRowKey,\n emptyState,\n loadingState,\n loading = false,\n columnState,\n onColumnStateChange,\n className = \"\",\n ariaLabel = \"Data table\",\n testId,\n onRowClick,\n // Sorting (controlled)\n sortColumnId: controlledSortColumnId,\n sortDirection: controlledSortDirection,\n onSortChange,\n}: DataTableProps<T>) {\n // ---- Column state (widths + visibility) ----------------------------------\n //\n // Held internally so a caller that does not care about persistence gets a\n // working table, and re-seeded whenever the caller supplies a new one.\n const [persisted, setPersisted] = useState<DataTablePersistedState>(\n () => columnState ?? EMPTY_COLUMN_STATE,\n );\n\n useEffect(() => {\n if (columnState) setPersisted(columnState);\n }, [columnState]);\n\n // ---- Sorting state (uncontrolled fallback) -------------------------------\n //\n // Controlled mode is detected by the presence of `sortColumnId` as a prop\n // (the caller explicitly manages the sort column). Using only this prop as\n // the signal (rather than OR-ing with `sortDirection`) avoids a\n // pathological state where `sortDirection` is set but `sortColumnId` is\n // not, which would enter controlled mode with no sort effect.\n //\n // Note: TypeScript cannot distinguish \"prop not passed\" from \"prop passed\n // as undefined\", so we rely on the convention that controlled callers\n // always pass both `sortColumnId` and `sortDirection` together.\n const isControlled =\n controlledSortColumnId !== undefined || controlledSortDirection !== undefined;\n\n const [internalSortColumnId, setInternalSortColumnId] = useState<string | undefined>(\n undefined,\n );\n const [internalSortDirection, setInternalSortDirection] = useState<\n SortDirection | undefined\n >(undefined);\n\n const activeSortColumnId = isControlled\n ? controlledSortColumnId\n : internalSortColumnId;\n const activeSortDirection = isControlled\n ? controlledSortDirection\n : internalSortDirection;\n\n /** Handle a click / keypress on a sortable column header. */\n const handleSortToggle = useCallback(\n (col: DataTableColumn<T>) => {\n if (!col.sortable) return;\n\n let nextColumnId: string | undefined;\n let nextDirection: SortDirection | undefined;\n\n if (activeSortColumnId !== col.id) {\n // Activate this column in its default direction.\n nextColumnId = col.id;\n nextDirection = col.defaultSortDirection ?? \"asc\";\n } else if (activeSortDirection === (col.defaultSortDirection ?? \"asc\")) {\n // Flip to the opposite direction.\n nextColumnId = col.id;\n nextDirection = activeSortDirection === \"asc\" ? \"desc\" : \"asc\";\n } else {\n // Already in the non-default direction — clear the sort.\n nextColumnId = undefined;\n nextDirection = undefined;\n }\n\n if (!isControlled) {\n setInternalSortColumnId(nextColumnId);\n setInternalSortDirection(nextDirection);\n }\n onSortChange?.(nextColumnId, nextDirection);\n },\n [activeSortColumnId, activeSortDirection, isControlled, onSortChange],\n );\n\n // ---- Visibility computation (column always-visible wins) -----------------\n const visibleColumns = useMemo(\n () =>\n columns.filter((col) => {\n if (col.alwaysVisible) return true;\n const flag = persisted.visibility[col.id];\n return flag !== false;\n }),\n [columns, persisted.visibility],\n );\n\n // ---- Width resolution ----------------------------------------------------\n const resolveWidth = useCallback(\n (col: DataTableColumn<T>): number | undefined => {\n const persistedWidth = persisted.widths[col.id];\n if (typeof persistedWidth === \"number\" && persistedWidth > 0) {\n return persistedWidth;\n }\n return col.initialWidth;\n },\n [persisted.widths],\n );\n\n // ---- Resize handling -----------------------------------------------------\n const resizeRef = useRef<{\n columnId: string;\n startX: number;\n startWidth: number;\n minWidth: number;\n } | null>(null);\n\n const beginResize = useCallback(\n (\n ev: React.MouseEvent<HTMLDivElement>,\n col: DataTableColumn<T>,\n currentWidth: number,\n ) => {\n if (col.noResize) return;\n ev.preventDefault();\n ev.stopPropagation();\n resizeRef.current = {\n columnId: col.id,\n startX: ev.clientX,\n startWidth: currentWidth,\n minWidth: col.minWidth ?? 80,\n };\n\n const onMove = (e: MouseEvent) => {\n const ref = resizeRef.current;\n if (!ref) return;\n const delta = e.clientX - ref.startX;\n const next = Math.max(ref.minWidth, ref.startWidth + delta);\n setPersisted((prev) => ({\n ...prev,\n widths: { ...prev.widths, [ref.columnId]: next },\n }));\n };\n const onUp = () => {\n resizeRef.current = null;\n window.removeEventListener(\"mousemove\", onMove);\n window.removeEventListener(\"mouseup\", onUp);\n };\n window.addEventListener(\"mousemove\", onMove);\n window.addEventListener(\"mouseup\", onUp);\n },\n [],\n );\n\n // Report changes so the caller can persist them. Skipped while `persisted`\n // still holds what the caller last handed in, so echoing the callback back\n // through `columnState` does not loop.\n const reported = useRef(persisted);\n useEffect(() => {\n if (reported.current === persisted) return;\n reported.current = persisted;\n onColumnStateChange?.(persisted);\n }, [persisted, onColumnStateChange]);\n\n // ---- Sorted rows --------------------------------------------------------\n const sortedRows = useMemo(() => {\n if (!activeSortColumnId || !activeSortDirection) return rows;\n const col = columns.find((c) => c.id === activeSortColumnId);\n if (!col?.sortable) return rows;\n return stableSort(rows, buildComparator(col, activeSortDirection));\n }, [rows, columns, activeSortColumnId, activeSortDirection]);\n\n // ---- Body rendering ------------------------------------------------------\n const composedClassName = [\"data-table\", className].filter(Boolean).join(\" \");\n\n const renderBody = () => {\n if (loading) {\n return (\n <tr className=\"data-table__row data-table__row--state\">\n <td colSpan={visibleColumns.length || 1} className=\"data-table__state-cell\">\n {loadingState ?? <div className=\"data-table__loading\" />}\n </td>\n </tr>\n );\n }\n if (sortedRows.length === 0) {\n return (\n <tr className=\"data-table__row data-table__row--state\">\n <td colSpan={visibleColumns.length || 1} className=\"data-table__state-cell\">\n {emptyState}\n </td>\n </tr>\n );\n }\n return sortedRows.map((row, index) => {\n const key = getRowKey(row, index);\n return (\n <tr\n key={key}\n className={[\"data-table__row\", onRowClick && \"data-table__row--clickable\"]\n .filter(Boolean)\n .join(\" \")}\n onClick={\n onRowClick\n ? () => {\n onRowClick(row);\n }\n : undefined\n }\n onKeyDown={\n onRowClick\n ? (e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onRowClick(row);\n }\n }\n : undefined\n }\n tabIndex={onRowClick ? 0 : undefined}\n role={onRowClick ? \"button\" : undefined}\n >\n {visibleColumns.map((col) => (\n <td\n key={col.id}\n className={[\n \"data-table__cell\",\n col.className,\n col.align && `data-table__cell--align-${col.align}`,\n ]\n .filter(Boolean)\n .join(\" \")}\n >\n {col.render(row, index)}\n </td>\n ))}\n </tr>\n );\n });\n };\n\n return (\n <div className={composedClassName} data-testid={testId}>\n <table className=\"data-table__table\" aria-label={ariaLabel} role=\"table\">\n <thead className=\"data-table__head\">\n <tr className=\"data-table__row data-table__row--head\">\n {visibleColumns.map((col) => {\n const width = resolveWidth(col);\n const isSortActive = col.sortable && col.id === activeSortColumnId;\n\n return (\n <th\n key={col.id}\n scope=\"col\"\n className={[\n \"data-table__cell\",\n \"data-table__cell--head\",\n col.sortable && \"data-table__cell--sortable\",\n isSortActive && \"data-table__cell--sort-active\",\n col.className,\n col.align && `data-table__cell--align-${col.align}`,\n ]\n .filter(Boolean)\n .join(\" \")}\n style={width ? { width: `${String(width)}px` } : undefined}\n aria-sort={ariaSortValue(\n col as DataTableColumn<unknown>,\n activeSortColumnId,\n activeSortDirection,\n )}\n onClick={\n col.sortable\n ? () => {\n handleSortToggle(col);\n }\n : undefined\n }\n onKeyDown={\n col.sortable\n ? (e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n handleSortToggle(col);\n }\n }\n : undefined\n }\n tabIndex={col.sortable ? 0 : undefined}\n >\n <span className=\"data-table__head-label\">{col.header}</span>\n {col.sortable && (\n <SortIcon\n direction={\n isSortActive && activeSortDirection\n ? activeSortDirection\n : \"none\"\n }\n />\n )}\n {!col.noResize && (\n <div\n role=\"separator\"\n aria-orientation=\"vertical\"\n className=\"data-table__resize-handle\"\n onMouseDown={(e) => {\n beginResize(e, col, width ?? col.minWidth ?? 120);\n }}\n />\n )}\n </th>\n );\n })}\n </tr>\n </thead>\n <tbody className=\"data-table__body\">{renderBody()}</tbody>\n </table>\n </div>\n );\n}\n\n// Memoize while preserving the generic signature.\nexport const DataTable = memo(DataTableInner) as typeof DataTableInner;\n\nexport default DataTable;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DataTable2.js","names":[],"sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/**\n * DataTable Component (epic #2730 / issue #2738 · sort: epic #2859 / issue #2861)\n *\n * Generic, type-safe table primitive modeled after the Backend.AI WebUI\n * `BAITable`. Designed so future menus (Models, Sessions, Data, ...)\n * can share one tabular surface instead of inventing a new one each\n * time.\n *\n * Features (V1 — additional capabilities planned for follow-up issues):\n * - Type-safe column definitions with custom cell renderers\n * - Optional column-visibility persistence via `localStorage` when\n * `persistKey` is supplied\n * - Optional resizable columns (drag the right edge of a header cell)\n * with widths persisted alongside visibility\n * - Empty-state slot rendered when `rows` is empty\n * - Loading-state slot rendered when `loading` is `true`\n * - Stable `getRowKey` accessor so rows with the same identifier remain\n * referentially identical across event-driven updates\n *\n * Sorting (V2 — epic #2859 / issue #2861):\n * - Optional per-column sortable flag with sort value accessor or\n * custom comparator\n * - Optional defaultSortDirection per column\n * - Controlled (`sortColumnId` + `sortDirection` + `onSortChange`) and\n * uncontrolled (internal state) modes\n * - Accessible `aria-sort` attributes on header cells\n * - Keyboard activation (Enter / Space) for sortable headers\n * - Stable sort — equal-valued rows retain their original order\n * - Sorting never mutates the original `rows` prop\n *\n * The component is intentionally domain-agnostic — it MUST NOT carry\n * Session, Model, or Agent-specific knowledge. The first consumer is\n * `SessionListTable` (epic #2730 / #2738) but the API is generic.\n */\n\nimport {\n memo,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type ReactNode,\n} from \"react\";\nimport \"./DataTable.css\";\n\n// ============================================================================\n// Public types\n// ============================================================================\n\n/** Direction a column is currently sorted. */\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport interface DataTableColumn<T> {\n /** Unique identifier for the column. Used for visibility + width persistence. */\n id: string;\n /** Header label. */\n header: ReactNode;\n /**\n * Cell renderer. Receives the row and returns a React node. Pure\n * functions are encouraged so memoization stays effective.\n */\n render: (row: T, index: number) => ReactNode;\n /** Optional minimum column width in pixels. Defaults to 80. */\n minWidth?: number;\n /** Optional initial width in pixels (only honored on the first paint). */\n initialWidth?: number;\n /** When `true`, the column cannot be resized. Defaults to `false`. */\n noResize?: boolean;\n /** When `true`, the column cannot be hidden by the user. Defaults to `false`. */\n alwaysVisible?: boolean;\n /** Extra `class` for the column's `<th>` and `<td>` cells. */\n className?: string;\n /**\n * When provided, the value is exposed via the `align` style on the\n * column's cells. Useful for right-aligned numeric columns.\n */\n align?: \"left\" | \"right\" | \"center\";\n\n // ---- Sorting API (added epic #2859 / issue #2861) -------------------------\n\n /**\n * When `true`, the column header renders a sort affordance and clicking\n * (or pressing Enter / Space) cycles through ascending → descending →\n * unsorted states. Defaults to `false`.\n */\n sortable?: boolean;\n /**\n * Extracts a primitive comparable value from a row for sorting purposes.\n * Used when the default ascending/descending behavior is sufficient.\n * Mutually exclusive with `sortComparator` — if both are provided,\n * `sortComparator` takes precedence.\n *\n * @example\n * ```tsx\n * sortValueAccessor: (row) => row.name.toLowerCase()\n * ```\n */\n sortValueAccessor?: (row: T) => string | number | boolean | null | undefined;\n /**\n * Custom comparator used for sorting. Receives two rows and the active\n * sort direction. Return a negative number if `a` should come first, a\n * positive number if `b` should come first, or `0` if they are equal.\n * The table applies a stable fallback on `0` to preserve original order.\n *\n * @example\n * ```tsx\n * sortComparator: (a, b, dir) =>\n * dir === \"asc\"\n * ? a.createdAt - b.createdAt\n * : b.createdAt - a.createdAt\n * ```\n */\n sortComparator?: (a: T, b: T, direction: SortDirection) => number;\n /**\n * The sort direction applied when this column is first activated.\n * Defaults to `\"asc\"`.\n */\n defaultSortDirection?: SortDirection;\n}\n\nexport interface DataTablePersistedState {\n /** column id → user-overridden width in pixels. */\n widths: Record<string, number>;\n /** column id → visibility flag. Missing keys count as visible. */\n visibility: Record<string, boolean>;\n}\n\n/**\n * The controls a row can contain that are actions in their own right. A click\n * or an Enter on one of these is that control's business, not the row's.\n */\nconst INTERACTIVE_DESCENDANT_SELECTOR = [\n \"a\",\n \"button\",\n \"input\",\n \"select\",\n \"textarea\",\n \"summary\",\n \"label\",\n \"[contenteditable='true']\",\n \"[role='button']\",\n \"[role='link']\",\n \"[tabindex]:not([tabindex='-1'])\",\n].join(\",\");\n\n/**\n * Whether an event inside a clickable row came from a control nested in it.\n *\n * A row that is itself clickable and contains an Edit button has two actions\n * competing for one click. Without this, both fire: the button edits and the\n * row also navigates away from the thing just edited. The row is the fallback,\n * so anything more specific wins.\n */\nfunction fromInteractiveDescendant(\n target: EventTarget | null,\n currentTarget: EventTarget,\n): boolean {\n if (!(target instanceof Element) || !(currentTarget instanceof Element)) {\n return false;\n }\n const control = target.closest(INTERACTIVE_DESCENDANT_SELECTOR);\n return (\n control !== null && control !== currentTarget && currentTarget.contains(control)\n );\n}\n\nexport interface DataTableProps<T> {\n /** Column definitions, in display order. */\n columns: DataTableColumn<T>[];\n /** Row data. */\n rows: T[];\n /**\n * Stable identifier accessor — used as the React key for each row.\n * Must be deterministic for the lifetime of the row.\n */\n getRowKey: (row: T, index: number) => string;\n /** Render this node when `rows` is empty. */\n emptyState?: ReactNode;\n /** Render this node when `loading` is `true`. */\n loadingState?: ReactNode;\n /** When `true`, the loading slot replaces the table body. */\n loading?: boolean;\n /**\n * Column widths and visibility, controlled by the caller.\n *\n * This component used to take a `persistKey` and write to `localStorage`\n * itself. Storage is a policy decision that belongs to the consumer: where\n * it goes, under which key, whether it is per user or per workspace, and\n * whether it exists at all in a host that has no `localStorage`. A\n * rendering component that answers those questions on its own cannot be\n * reused by a consumer that answers them differently.\n */\n columnState?: DataTablePersistedState;\n /**\n * Called whenever the user resizes a column or toggles its visibility.\n * Pair it with `columnState` to persist wherever the consumer keeps\n * preferences; omit both to get a table that forgets on unmount.\n */\n onColumnStateChange?: (state: DataTablePersistedState) => void;\n /** Extra class for the table's wrapping element. */\n className?: string;\n /** ARIA label for the table. Defaults to \"Data table\". */\n ariaLabel?: string;\n /** Test ID for testing harnesses. */\n testId?: string;\n /**\n * Callback invoked when a row is clicked. When provided, rows render\n * with a clickable affordance (cursor: pointer + keyboard binding).\n */\n onRowClick?: (row: T) => void;\n /**\n * Narrows `onRowClick` to the rows that can actually act on it, for a table\n * that mixes actionable and informational rows. A row this returns `false`\n * for gets no pointer affordance, no tab stop, and no keyboard binding, so it\n * is not announced as a button it cannot be.\n */\n isRowClickable?: (row: T, index: number) => boolean;\n /**\n * Extra class for one row, for flagging a specific row without forking the\n * table: a transient deep-link highlight, a stale entry, a row being removed.\n * A falsy return adds nothing.\n */\n rowClassName?: (row: T, index: number) => string | undefined | false | null;\n\n // ---- Sorting props (added epic #2859 / issue #2861) -----------------------\n\n /**\n * Controlled — the column currently being sorted. Pass `undefined` to\n * indicate no active sort. When this prop is present, the component\n * operates in controlled mode: the caller is responsible for updating\n * the sort state via `onSortChange`.\n */\n sortColumnId?: string;\n /**\n * Controlled — the direction of the active sort. Ignored when\n * `sortColumnId` is `undefined`.\n */\n sortDirection?: SortDirection;\n /**\n * Called when the user activates a sortable column header. In\n * controlled mode the caller must propagate this back as\n * `sortColumnId` / `sortDirection`. In uncontrolled mode this prop is\n * purely observational.\n *\n * @param columnId The column being sorted, or `undefined` when the\n * sort is cleared.\n * @param direction The new direction.\n */\n onSortChange?: (\n columnId: string | undefined,\n direction: SortDirection | undefined,\n ) => void;\n}\n\nconst EMPTY_COLUMN_STATE: DataTablePersistedState = { widths: {}, visibility: {} };\n\n// ============================================================================\n// Sorting helpers\n// ============================================================================\n\n/**\n * Stable sort — rows with equal comparison result keep their original\n * relative order. We achieve stability by augmenting each row with its\n * original index and using that as a tie-breaker.\n *\n * The input array is never mutated.\n */\nfunction stableSort<T>(rows: T[], comparator: (a: T, b: T) => number): T[] {\n const indexed = rows.map((row, i) => ({ row, i }));\n indexed.sort((a, b) => {\n const result = comparator(a.row, b.row);\n return result !== 0 ? result : a.i - b.i;\n });\n return indexed.map(({ row }) => row);\n}\n\n/**\n * Builds a comparator from a `DataTableColumn` + active sort direction.\n * Falls back to string comparison when neither `sortComparator` nor\n * `sortValueAccessor` is provided on the column.\n */\nfunction buildComparator<T>(\n col: DataTableColumn<T>,\n direction: SortDirection,\n): (a: T, b: T) => number {\n const { sortComparator } = col;\n if (sortComparator) {\n return (a, b) => sortComparator(a, b, direction);\n }\n const accessor = col.sortValueAccessor;\n if (accessor) {\n return (a, b) => {\n const av = accessor(a);\n const bv = accessor(b);\n // Nullish values sort last regardless of direction.\n if (av == null && bv == null) return 0;\n if (av == null) return 1;\n if (bv == null) return -1;\n let cmp: number;\n if (typeof av === \"number\" && typeof bv === \"number\") {\n cmp = av - bv;\n } else {\n cmp = String(av).localeCompare(String(bv));\n }\n return direction === \"asc\" ? cmp : -cmp;\n };\n }\n // No accessor — unsortable in practice (column should not be sortable).\n return () => 0;\n}\n\n/**\n * Returns the `aria-sort` attribute value for a column header cell.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort\n */\nfunction ariaSortValue(\n col: DataTableColumn<unknown>,\n activeSortColumnId: string | undefined,\n activeSortDirection: SortDirection | undefined,\n): \"ascending\" | \"descending\" | \"none\" | undefined {\n if (!col.sortable) return undefined;\n if (col.id === activeSortColumnId) {\n return activeSortDirection === \"asc\" ? \"ascending\" : \"descending\";\n }\n return \"none\";\n}\n\n// Sort indicator icons rendered as inline SVG so there is no external\n// asset dependency. They intentionally reuse design-token colours so they\n// automatically adapt to light / dark themes.\n\nfunction SortIcon({ direction }: { direction: SortDirection | \"none\" }) {\n if (direction === \"none\") {\n // Neutral chevron stack — both arrows in muted colour\n return (\n <span\n className=\"data-table__sort-icon data-table__sort-icon--none\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"10\"\n height=\"14\"\n viewBox=\"0 0 10 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M5 1L1 5H9L5 1Z\" fill=\"currentColor\" opacity=\"0.35\" />\n <path d=\"M5 13L9 9H1L5 13Z\" fill=\"currentColor\" opacity=\"0.35\" />\n </svg>\n </span>\n );\n }\n if (direction === \"asc\") {\n return (\n <span\n className=\"data-table__sort-icon data-table__sort-icon--asc\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"10\"\n height=\"14\"\n viewBox=\"0 0 10 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M5 1L1 5H9L5 1Z\" fill=\"currentColor\" />\n <path d=\"M5 13L9 9H1L5 13Z\" fill=\"currentColor\" opacity=\"0.25\" />\n </svg>\n </span>\n );\n }\n return (\n <span\n className=\"data-table__sort-icon data-table__sort-icon--desc\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"10\"\n height=\"14\"\n viewBox=\"0 0 10 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M5 1L1 5H9L5 1Z\" fill=\"currentColor\" opacity=\"0.25\" />\n <path d=\"M5 13L9 9H1L5 13Z\" fill=\"currentColor\" />\n </svg>\n </span>\n );\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nfunction DataTableInner<T>({\n columns,\n rows,\n getRowKey,\n emptyState,\n loadingState,\n loading = false,\n columnState,\n onColumnStateChange,\n className = \"\",\n ariaLabel = \"Data table\",\n testId,\n onRowClick,\n isRowClickable,\n rowClassName,\n // Sorting (controlled)\n sortColumnId: controlledSortColumnId,\n sortDirection: controlledSortDirection,\n onSortChange,\n}: DataTableProps<T>) {\n // ---- Column state (widths + visibility) ----------------------------------\n //\n // Held internally so a caller that does not care about persistence gets a\n // working table, and re-seeded whenever the caller supplies a new one.\n const [persisted, setPersisted] = useState<DataTablePersistedState>(\n () => columnState ?? EMPTY_COLUMN_STATE,\n );\n\n useEffect(() => {\n if (columnState) setPersisted(columnState);\n }, [columnState]);\n\n // ---- Sorting state (uncontrolled fallback) -------------------------------\n //\n // Controlled mode is detected by the presence of `sortColumnId` as a prop\n // (the caller explicitly manages the sort column). Using only this prop as\n // the signal (rather than OR-ing with `sortDirection`) avoids a\n // pathological state where `sortDirection` is set but `sortColumnId` is\n // not, which would enter controlled mode with no sort effect.\n //\n // Note: TypeScript cannot distinguish \"prop not passed\" from \"prop passed\n // as undefined\", so we rely on the convention that controlled callers\n // always pass both `sortColumnId` and `sortDirection` together.\n const isControlled =\n controlledSortColumnId !== undefined || controlledSortDirection !== undefined;\n\n const [internalSortColumnId, setInternalSortColumnId] = useState<string | undefined>(\n undefined,\n );\n const [internalSortDirection, setInternalSortDirection] = useState<\n SortDirection | undefined\n >(undefined);\n\n const activeSortColumnId = isControlled\n ? controlledSortColumnId\n : internalSortColumnId;\n const activeSortDirection = isControlled\n ? controlledSortDirection\n : internalSortDirection;\n\n /** Handle a click / keypress on a sortable column header. */\n const handleSortToggle = useCallback(\n (col: DataTableColumn<T>) => {\n if (!col.sortable) return;\n\n let nextColumnId: string | undefined;\n let nextDirection: SortDirection | undefined;\n\n if (activeSortColumnId !== col.id) {\n // Activate this column in its default direction.\n nextColumnId = col.id;\n nextDirection = col.defaultSortDirection ?? \"asc\";\n } else if (activeSortDirection === (col.defaultSortDirection ?? \"asc\")) {\n // Flip to the opposite direction.\n nextColumnId = col.id;\n nextDirection = activeSortDirection === \"asc\" ? \"desc\" : \"asc\";\n } else {\n // Already in the non-default direction — clear the sort.\n nextColumnId = undefined;\n nextDirection = undefined;\n }\n\n if (!isControlled) {\n setInternalSortColumnId(nextColumnId);\n setInternalSortDirection(nextDirection);\n }\n onSortChange?.(nextColumnId, nextDirection);\n },\n [activeSortColumnId, activeSortDirection, isControlled, onSortChange],\n );\n\n // ---- Visibility computation (column always-visible wins) -----------------\n const visibleColumns = useMemo(\n () =>\n columns.filter((col) => {\n if (col.alwaysVisible) return true;\n const flag = persisted.visibility[col.id];\n return flag !== false;\n }),\n [columns, persisted.visibility],\n );\n\n // ---- Width resolution ----------------------------------------------------\n const resolveWidth = useCallback(\n (col: DataTableColumn<T>): number | undefined => {\n const persistedWidth = persisted.widths[col.id];\n if (typeof persistedWidth === \"number\" && persistedWidth > 0) {\n return persistedWidth;\n }\n return col.initialWidth;\n },\n [persisted.widths],\n );\n\n // ---- Resize handling -----------------------------------------------------\n const resizeRef = useRef<{\n columnId: string;\n startX: number;\n startWidth: number;\n minWidth: number;\n } | null>(null);\n\n const beginResize = useCallback(\n (\n ev: React.MouseEvent<HTMLDivElement>,\n col: DataTableColumn<T>,\n currentWidth: number,\n ) => {\n if (col.noResize) return;\n ev.preventDefault();\n ev.stopPropagation();\n resizeRef.current = {\n columnId: col.id,\n startX: ev.clientX,\n startWidth: currentWidth,\n minWidth: col.minWidth ?? 80,\n };\n\n const onMove = (e: MouseEvent) => {\n const ref = resizeRef.current;\n if (!ref) return;\n const delta = e.clientX - ref.startX;\n const next = Math.max(ref.minWidth, ref.startWidth + delta);\n setPersisted((prev) => ({\n ...prev,\n widths: { ...prev.widths, [ref.columnId]: next },\n }));\n };\n const onUp = () => {\n resizeRef.current = null;\n window.removeEventListener(\"mousemove\", onMove);\n window.removeEventListener(\"mouseup\", onUp);\n };\n window.addEventListener(\"mousemove\", onMove);\n window.addEventListener(\"mouseup\", onUp);\n },\n [],\n );\n\n // Report changes so the caller can persist them. Skipped while `persisted`\n // still holds what the caller last handed in, so echoing the callback back\n // through `columnState` does not loop.\n const reported = useRef(persisted);\n useEffect(() => {\n if (reported.current === persisted) return;\n reported.current = persisted;\n onColumnStateChange?.(persisted);\n }, [persisted, onColumnStateChange]);\n\n // ---- Sorted rows --------------------------------------------------------\n const sortedRows = useMemo(() => {\n if (!activeSortColumnId || !activeSortDirection) return rows;\n const col = columns.find((c) => c.id === activeSortColumnId);\n if (!col?.sortable) return rows;\n return stableSort(rows, buildComparator(col, activeSortDirection));\n }, [rows, columns, activeSortColumnId, activeSortDirection]);\n\n // ---- Body rendering ------------------------------------------------------\n const composedClassName = [\"data-table\", className].filter(Boolean).join(\" \");\n\n const renderBody = () => {\n if (loading) {\n return (\n <tr className=\"data-table__row data-table__row--state\">\n <td colSpan={visibleColumns.length || 1} className=\"data-table__state-cell\">\n {loadingState ?? <div className=\"data-table__loading\" />}\n </td>\n </tr>\n );\n }\n if (sortedRows.length === 0) {\n return (\n <tr className=\"data-table__row data-table__row--state\">\n <td colSpan={visibleColumns.length || 1} className=\"data-table__state-cell\">\n {emptyState}\n </td>\n </tr>\n );\n }\n return sortedRows.map((row, index) => {\n const key = getRowKey(row, index);\n // A row is interactive only if the table has a handler AND this row is\n // not excluded, so the affordance, the tab stop and the role move\n // together. Splitting them would announce a button that does nothing.\n const clickable = Boolean(onRowClick && (isRowClickable?.(row, index) ?? true));\n const extraClass = rowClassName?.(row, index);\n return (\n <tr\n key={key}\n className={[\n \"data-table__row\",\n clickable && \"data-table__row--clickable\",\n extraClass,\n ]\n .filter(Boolean)\n .join(\" \")}\n onClick={\n clickable\n ? (e) => {\n if (fromInteractiveDescendant(e.target, e.currentTarget)) return;\n onRowClick?.(row);\n }\n : undefined\n }\n onKeyDown={\n clickable\n ? (e) => {\n if (e.key !== \"Enter\" && e.key !== \" \") return;\n if (fromInteractiveDescendant(e.target, e.currentTarget)) return;\n e.preventDefault();\n onRowClick?.(row);\n }\n : undefined\n }\n tabIndex={clickable ? 0 : undefined}\n role={clickable ? \"button\" : undefined}\n >\n {visibleColumns.map((col) => (\n <td\n key={col.id}\n className={[\n \"data-table__cell\",\n col.className,\n col.align && `data-table__cell--align-${col.align}`,\n ]\n .filter(Boolean)\n .join(\" \")}\n >\n {col.render(row, index)}\n </td>\n ))}\n </tr>\n );\n });\n };\n\n return (\n <div className={composedClassName} data-testid={testId}>\n <table className=\"data-table__table\" aria-label={ariaLabel} role=\"table\">\n <thead className=\"data-table__head\">\n <tr className=\"data-table__row data-table__row--head\">\n {visibleColumns.map((col) => {\n const width = resolveWidth(col);\n const isSortActive = col.sortable && col.id === activeSortColumnId;\n\n return (\n <th\n key={col.id}\n scope=\"col\"\n className={[\n \"data-table__cell\",\n \"data-table__cell--head\",\n col.sortable && \"data-table__cell--sortable\",\n isSortActive && \"data-table__cell--sort-active\",\n col.className,\n col.align && `data-table__cell--align-${col.align}`,\n ]\n .filter(Boolean)\n .join(\" \")}\n style={width ? { width: `${String(width)}px` } : undefined}\n aria-sort={ariaSortValue(\n col as DataTableColumn<unknown>,\n activeSortColumnId,\n activeSortDirection,\n )}\n onClick={\n col.sortable\n ? () => {\n handleSortToggle(col);\n }\n : undefined\n }\n onKeyDown={\n col.sortable\n ? (e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n handleSortToggle(col);\n }\n }\n : undefined\n }\n tabIndex={col.sortable ? 0 : undefined}\n >\n <span className=\"data-table__head-label\">{col.header}</span>\n {col.sortable && (\n <SortIcon\n direction={\n isSortActive && activeSortDirection\n ? activeSortDirection\n : \"none\"\n }\n />\n )}\n {!col.noResize && (\n <div\n role=\"separator\"\n aria-orientation=\"vertical\"\n className=\"data-table__resize-handle\"\n onMouseDown={(e) => {\n beginResize(e, col, width ?? col.minWidth ?? 120);\n }}\n />\n )}\n </th>\n );\n })}\n </tr>\n </thead>\n <tbody className=\"data-table__body\">{renderBody()}</tbody>\n </table>\n </div>\n );\n}\n\n// Memoize while preserving the generic signature.\nexport const DataTable = memo(DataTableInner) as typeof DataTableInner;\n\nexport default DataTable;\n"],"mappings":"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"}
|
package/package.json
CHANGED