@lablup/ui-common 0.1.0-alpha.2 → 0.1.0-alpha.20

package/dist/components/DataTable/DataTable2.js

@@ -2,44 +2,29 @@
 import { memo as e, useCallback as t, useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/DataTable/DataTable.tsx
-var c = "dataTable";
-function l(e) {
-	return `${c}.${e}`;
-}
-function u(e) {
-	if (!e || typeof window > "u") return {
-		widths: {},
-		visibility: {}
-	};
-	try {
-		let t = window.localStorage.getItem(l(e));
-		if (!t) return {
-			widths: {},
-			visibility: {}
-		};
-		let n = JSON.parse(t);
-		if (typeof n != "object" || !n) return {
-			widths: {},
-			visibility: {}
-		};
-		let r = n;
-		return {
-			widths: typeof r.widths == "object" && r.widths !== null ? r.widths : {},
-			visibility: typeof r.visibility == "object" && r.visibility !== null ? r.visibility : {}
-		};
-	} catch {
-		return {
-			widths: {},
-			visibility: {}
-		};
-	}
+var c = [
+	"a",
+	"button",
+	"input",
+	"select",
+	"textarea",
+	"summary",
+	"label",
+	"[contenteditable='true']",
+	"[role='button']",
+	"[role='link']",
+	"[tabindex]:not([tabindex='-1'])"
+].join(",");
+function l(e, t) {
+	if (!(e instanceof Element) || !(t instanceof Element)) return !1;
+	let n = e.closest(c);
+	return n !== null && n !== t && t.contains(n);
 }
+var u = {
+	widths: {},
+	visibility: {}
+};
 function d(e, t) {
-	if (!(!e || typeof window > "u")) try {
-		window.localStorage.setItem(l(e), JSON.stringify(t));
-	} catch {}
-}
-function f(e, t) {
 	let n = e.map((e, t) => ({
 		row: e,
 		i: t
@@ -49,7 +34,7 @@ function f(e, t) {
 		return r === 0 ? e.i - n.i : r;
 	}), n.map(({ row: e }) => e);
 }
-function p(e, t) {
+function f(e, t) {
 	let { sortComparator: n } = e;
 	if (n) return (e, r) => n(e, r, t);
 	let r = e.sortValueAccessor;
@@ -62,10 +47,10 @@ function p(e, t) {
 		return o = typeof i == "number" && typeof a == "number" ? i - a : String(i).localeCompare(String(a)), t === "asc" ? o : -o;
 	} : () => 0;
 }
-function m(e, t, n) {
+function p(e, t, n) {
 	if (e.sortable) return e.id === t ? n === "asc" ? "ascending" : "descending" : "none";
 }
-function h({ direction: e }) {
+function m({ direction: e }) {
 	return e === "none" ? /* @__PURE__ */ o("span", {
 		className: "data-table__sort-icon data-table__sort-icon--none",
 		"aria-hidden": "true",
@@ -123,36 +108,36 @@ function h({ direction: e }) {
 		})
 	});
 }
-function g({ columns: e, rows: c, getRowKey: l, emptyState: g, loadingState: _, loading: v = !1, persistKey: y, className: b = "", ariaLabel: x = "Data table", testId: S, onRowClick: C, sortColumnId: w, sortDirection: T, onSortChange: E }) {
-	let [D, O] = a(() => u(y));
+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 }) {
+	let [A, j] = a(() => y ?? u);
 	n(() => {
-		O(u(y));
+		y && j(y);
 	}, [y]);
-	let k = w !== void 0 || T !== void 0, [A, j] = a(void 0), [M, N] = a(void 0), P = k ? w : A, F = k ? T : M, I = t((e) => {
+	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) => {
 		if (!e.sortable) return;
 		let t, n;
-		P === e.id ? F === (e.defaultSortDirection ?? "asc") ? (t = e.id, n = F === "asc" ? "desc" : "asc") : (t = void 0, n = void 0) : (t = e.id, n = e.defaultSortDirection ?? "asc"), k || (j(t), N(n)), E?.(t, n);
+		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);
 	}, [
-		P,
-		F,
-		k,
-		E
-	]), L = r(() => e.filter((e) => e.alwaysVisible ? !0 : D.visibility[e.id] !== !1), [e, D.visibility]), R = t((e) => {
-		let t = D.widths[e.id];
-		return typeof t == "number" && t > 0 ? t : e.initialWidth;
-	}, [D.widths]), z = i(null), B = t((e, t, n) => {
+		L,
+		R,
+		M,
+		k
+	]), B = r(() => e.filter((e) => e.alwaysVisible ? !0 : A.visibility[e.id] !== !1), [e, A.visibility]), V = t((e) => {
+		let t = A.widths[e.id], n = typeof t == "number" && t > 0 ? t : e.initialWidth;
+		return n === void 0 ? void 0 : Math.max(n, e.minWidth ?? 0);
+	}, [A.widths]), H = i(null), U = t((e, t, n) => {
 		if (t.noResize) return;
-		e.preventDefault(), e.stopPropagation(), z.current = {
+		e.preventDefault(), e.stopPropagation(), H.current = {
 			columnId: t.id,
 			startX: e.clientX,
 			startWidth: n,
 			minWidth: t.minWidth ?? 80
 		};
 		let r = (e) => {
-			let t = z.current;
+			let t = H.current;
 			if (!t) return;
 			let n = e.clientX - t.startX, r = Math.max(t.minWidth, t.startWidth + n);
-			O((e) => ({
+			j((e) => ({
 				...e,
 				widths: {
 					...e.widths,
@@ -160,36 +145,36 @@ function g({ columns: e, rows: c, getRowKey: l, emptyState: g, loadingState: _,
 				}
 			}));
 		}, i = () => {
-			z.current = null, window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", i);
+			H.current = null, window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", i);
 		};
 		window.addEventListener("mousemove", r), window.addEventListener("mouseup", i);
-	}, []);
+	}, []), W = i(A);
 	n(() => {
-		d(y, D);
-	}, [y, D]);
-	let V = r(() => {
-		if (!P || !F) return c;
-		let t = e.find((e) => e.id === P);
-		return t?.sortable ? f(c, p(t, F)) : c;
+		W.current !== A && (W.current = A, b?.(A));
+	}, [A, b]);
+	let G = r(() => {
+		if (!L || !R) return c;
+		let t = e.find((e) => e.id === L);
+		return t?.sortable ? d(c, f(t, R)) : c;
 	}, [
 		c,
 		e,
-		P,
-		F
-	]), H = ["data-table", b].filter(Boolean).join(" ");
+		L,
+		R
+	]), K = ["data-table", x].filter(Boolean).join(" ");
 	return /* @__PURE__ */ o("div", {
-		className: H,
-		"data-testid": S,
+		className: K,
+		"data-testid": C,
 		children: /* @__PURE__ */ s("table", {
 			className: "data-table__table",
-			"aria-label": x,
+			"aria-label": S,
 			role: "table",
 			children: [/* @__PURE__ */ o("thead", {
 				className: "data-table__head",
 				children: /* @__PURE__ */ o("tr", {
 					className: "data-table__row data-table__row--head",
-					children: L.map((e) => {
-						let t = R(e), n = e.sortable && e.id === P;
+					children: B.map((e) => {
+						let t = V(e), n = e.sortable && e.id === L;
 						return /* @__PURE__ */ s("th", {
 							scope: "col",
 							className: [
@@ -200,13 +185,16 @@ function g({ columns: e, rows: c, getRowKey: l, emptyState: g, loadingState: _,
 								e.className,
 								e.align && `data-table__cell--align-${e.align}`
 							].filter(Boolean).join(" "),
-							style: t ? { width: `${String(t)}px` } : void 0,
-							"aria-sort": m(e, P, F),
+							style: {
+								width: t === void 0 ? void 0 : `${String(t)}px`,
+								minWidth: e.minWidth
+							},
+							"aria-sort": p(e, L, R),
 							onClick: e.sortable ? () => {
-								I(e);
+								z(e);
 							} : void 0,
 							onKeyDown: e.sortable ? (t) => {
-								(t.key === "Enter" || t.key === " ") && (t.preventDefault(), I(e));
+								(t.key === "Enter" || t.key === " ") && (t.preventDefault(), z(e));
 							} : void 0,
 							tabIndex: e.sortable ? 0 : void 0,
 							children: [
@@ -214,13 +202,13 @@ function g({ columns: e, rows: c, getRowKey: l, emptyState: g, loadingState: _,
 									className: "data-table__head-label",
 									children: e.header
 								}),
-								e.sortable && /* @__PURE__ */ o(h, { direction: n && F ? F : "none" }),
+								e.sortable && /* @__PURE__ */ o(m, { direction: n && R ? R : "none" }),
 								!e.noResize && /* @__PURE__ */ o("div", {
 									role: "separator",
 									"aria-orientation": "vertical",
 									className: "data-table__resize-handle",
 									onMouseDown: (n) => {
-										B(n, e, t ?? e.minWidth ?? 120);
+										U(n, e, t ?? e.minWidth ?? 120);
 									}
 								})
 							]
@@ -232,35 +220,40 @@ function g({ columns: e, rows: c, getRowKey: l, emptyState: g, loadingState: _,
 				children: v ? /* @__PURE__ */ o("tr", {
 					className: "data-table__row data-table__row--state",
 					children: /* @__PURE__ */ o("td", {
-						colSpan: L.length || 1,
+						colSpan: B.length || 1,
 						className: "data-table__state-cell",
 						children: _ ?? /* @__PURE__ */ o("div", { className: "data-table__loading" })
 					})
-				}) : V.length === 0 ? /* @__PURE__ */ o("tr", {
+				}) : G.length === 0 ? /* @__PURE__ */ o("tr", {
 					className: "data-table__row data-table__row--state",
 					children: /* @__PURE__ */ o("td", {
-						colSpan: L.length || 1,
+						colSpan: B.length || 1,
 						className: "data-table__state-cell",
 						children: g
 					})
-				}) : V.map((e, t) => {
-					let n = l(e, t);
+				}) : G.map((e, t) => {
+					let n = h(e, t), r = !!(w && (T?.(e, t) ?? !0)), i = E?.(e, t);
 					return /* @__PURE__ */ o("tr", {
-						className: ["data-table__row", C && "data-table__row--clickable"].filter(Boolean).join(" "),
-						onClick: C ? () => {
-							C(e);
+						className: [
+							"data-table__row",
+							r && "data-table__row--clickable",
+							i
+						].filter(Boolean).join(" "),
+						onClick: r ? (t) => {
+							l(t.target, t.currentTarget) || w?.(e);
 						} : void 0,
-						onKeyDown: C ? (t) => {
-							(t.key === "Enter" || t.key === " ") && (t.preventDefault(), C(e));
+						onKeyDown: r ? (t) => {
+							(t.key === "Enter" || t.key === " ") && (l(t.target, t.currentTarget) || (t.preventDefault(), w?.(e)));
 						} : void 0,
-						tabIndex: C ? 0 : void 0,
-						role: C ? "button" : void 0,
-						children: L.map((n) => /* @__PURE__ */ o("td", {
+						tabIndex: r ? 0 : void 0,
+						role: r ? "button" : void 0,
+						children: B.map((n) => /* @__PURE__ */ o("td", {
 							className: [
 								"data-table__cell",
 								n.className,
 								n.align && `data-table__cell--align-${n.align}`
 							].filter(Boolean).join(" "),
+							style: { minWidth: n.minWidth },
 							children: n.render(e, t)
 						}, n.id))
 					}, n);
@@ -269,9 +262,9 @@ function g({ columns: e, rows: c, getRowKey: l, emptyState: g, loadingState: _,
 		})
 	});
 }
-var _ = e(g);
+var g = e(h);
 //#endregion
-export { _ as DataTable, _ as default };
+export { g as DataTable, g as default };
 
 //# sourceMappingURL=DataTable2.js.map
 import "../../assets/components/DataTable/DataTable.css";

package/dist/components/DataTable/DataTable2.js.map

@@ -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   * When provided, column widths and visibility settings are persisted\n   * to `localStorage` under this key. Use a stable, namespaced string\n   * (e.g. `\"sessions.activeTab\"`).\n   */\n  persistKey?: string;\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\n// ============================================================================\n// Storage helpers\n// ============================================================================\n\nconst STORAGE_NAMESPACE = \"dataTable\";\n\nfunction buildStorageKey(persistKey: string): string {\n  return `${STORAGE_NAMESPACE}.${persistKey}`;\n}\n\n/**\n * Load persisted state from `localStorage`. Returns an empty state on\n * any failure (missing storage, malformed JSON, schema drift) so the\n * component degrades gracefully.\n */\nfunction loadPersistedState(persistKey: string | undefined): DataTablePersistedState {\n  if (!persistKey || typeof window === \"undefined\") {\n    return { widths: {}, visibility: {} };\n  }\n  try {\n    const raw = window.localStorage.getItem(buildStorageKey(persistKey));\n    if (!raw) return { widths: {}, visibility: {} };\n    const parsed = JSON.parse(raw) as unknown;\n    if (typeof parsed !== \"object\" || parsed === null) {\n      return { widths: {}, visibility: {} };\n    }\n    const obj = parsed as { widths?: unknown; visibility?: unknown };\n    const widths =\n      typeof obj.widths === \"object\" && obj.widths !== null\n        ? (obj.widths as Record<string, number>)\n        : {};\n    const visibility =\n      typeof obj.visibility === \"object\" && obj.visibility !== null\n        ? (obj.visibility as Record<string, boolean>)\n        : {};\n    return { widths, visibility };\n  } catch {\n    return { widths: {}, visibility: {} };\n  }\n}\n\nfunction savePersistedState(\n  persistKey: string | undefined,\n  state: DataTablePersistedState,\n): void {\n  if (!persistKey || typeof window === \"undefined\") return;\n  try {\n    window.localStorage.setItem(buildStorageKey(persistKey), JSON.stringify(state));\n  } catch {\n    // Quota exceeded / disabled storage — silently ignore.\n  }\n}\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  persistKey,\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  // ---- Persisted state (widths + visibility) -------------------------------\n  const [persisted, setPersisted] = useState<DataTablePersistedState>(() =>\n    loadPersistedState(persistKey),\n  );\n\n  // Refresh persisted state when the storage key changes (defensive — the\n  // expected use case is a stable key).\n  useEffect(() => {\n    setPersisted(loadPersistedState(persistKey));\n  }, [persistKey]);\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  // Persist when state changes\n  useEffect(() => {\n    savePersistedState(persistKey, persisted);\n  }, [persistKey, persisted]);\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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"}
+{"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. */\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      const width =\n        typeof persistedWidth === \"number\" && persistedWidth > 0\n          ? persistedWidth\n          : col.initialWidth;\n      return width === undefined ? undefined : Math.max(width, col.minWidth ?? 0);\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              style={{ minWidth: col.minWidth }}\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={{\n                    width: width === undefined ? undefined : `${String(width)}px`,\n                    minWidth: col.minWidth,\n                  }}\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":";;;;AAoIA,IAAM,IAAkC;CACtC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAUV,SAAS,EACP,GACA,GACS;CACT,IAAI,EAAE,aAAkB,YAAY,EAAE,aAAyB,UAC7D,OAAO;CAET,IAAM,IAAU,EAAO,QAAQ,CAA+B;CAC9D,OACE,MAAY,QAAQ,MAAY,KAAiB,EAAc,SAAS,CAAO;AAEnF;AA0FA,IAAM,IAA8C;CAAE,QAAQ,CAAC;CAAG,YAAY,CAAC;AAAE;AAajF,SAAS,EAAc,GAAW,GAAyC;CACzE,IAAM,IAAU,EAAK,KAAK,GAAK,OAAO;EAAE;EAAK;CAAE,EAAE;CAKjD,OAJA,EAAQ,MAAM,GAAG,MAAM;EACrB,IAAM,IAAS,EAAW,EAAE,KAAK,EAAE,GAAG;EACtC,OAAO,MAAW,IAAa,EAAE,IAAI,EAAE,IAAjB;CACxB,CAAC,GACM,EAAQ,KAAK,EAAE,aAAU,CAAG;AACrC;AAOA,SAAS,EACP,GACA,GACwB;CACxB,IAAM,EAAE,sBAAmB;CAC3B,IAAI,GACF,QAAQ,GAAG,MAAM,EAAe,GAAG,GAAG,CAAS;CAEjD,IAAM,IAAW,EAAI;CAmBrB,OAlBI,KACM,GAAG,MAAM;EACf,IAAM,IAAK,EAAS,CAAC,GACf,IAAK,EAAS,CAAC;EAErB,IAAI,KAAM,QAAQ,KAAM,MAAM,OAAO;EACrC,IAAI,KAAM,MAAM,OAAO;EACvB,IAAI,KAAM,MAAM,OAAO;EACvB,IAAI;EAMJ,OALA,AAGE,IAHE,OAAO,KAAO,YAAY,OAAO,KAAO,WACpC,IAAK,IAEL,OAAO,CAAE,CAAC,CAAC,cAAc,OAAO,CAAE,CAAC,GAEpC,MAAc,QAAQ,IAAM,CAAC;CACtC,UAGW;AACf;AAOA,SAAS,EACP,GACA,GACA,GACiD;CAC5C,MAAI,UAIT,OAHI,EAAI,OAAO,IACN,MAAwB,QAAQ,cAAc,eAEhD;AACT;AAMA,SAAS,EAAS,EAAE,gBAAoD;CAwCtE,OAvCI,MAAc,SAGd,kBAAC,QAAD;EACE,WAAU;EACV,eAAY;EAEZ,UAAA,kBAAC,OAAD;GACE,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,OAAM;GALR,UAAA,CAOE,kBAAC,QAAD;IAAM,GAAE;IAAkB,MAAK;IAAe,SAAQ;GAAQ,CAAA,GAC9D,kBAAC,QAAD;IAAM,GAAE;IAAoB,MAAK;IAAe,SAAQ;GAAQ,CAAA,CAC7D;;CACD,CAAA,IAGN,MAAc,QAEd,kBAAC,QAAD;EACE,WAAU;EACV,eAAY;EAEZ,UAAA,kBAAC,OAAD;GACE,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,OAAM;GALR,UAAA,CAOE,kBAAC,QAAD;IAAM,GAAE;IAAkB,MAAK;GAAgB,CAAA,GAC/C,kBAAC,QAAD;IAAM,GAAE;IAAoB,MAAK;IAAe,SAAQ;GAAQ,CAAA,CAC7D;;CACD,CAAA,IAIR,kBAAC,QAAD;EACE,WAAU;EACV,eAAY;EAEZ,UAAA,kBAAC,OAAD;GACE,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,OAAM;GALR,UAAA,CAOE,kBAAC,QAAD;IAAM,GAAE;IAAkB,MAAK;IAAe,SAAQ;GAAQ,CAAA,GAC9D,kBAAC,QAAD;IAAM,GAAE;IAAoB,MAAK;GAAgB,CAAA,CAC9C;;CACD,CAAA;AAEV;AAMA,SAAS,EAAkB,EACzB,YACA,SACA,cACA,eACA,iBACA,aAAU,IACV,gBACA,wBACA,eAAY,IACZ,eAAY,cACZ,WACA,eACA,mBACA,iBAEA,cAAc,GACd,eAAe,GACf,mBACoB;CAKpB,IAAM,CAAC,GAAW,KAAgB,QAC1B,KAAe,CACvB;CAEA,QAAgB;EACd,AAAI,KAAa,EAAa,CAAW;CAC3C,GAAG,CAAC,CAAW,CAAC;CAahB,IAAM,IACJ,MAA2B,KAAA,KAAa,MAA4B,KAAA,GAEhE,CAAC,GAAsB,KAA2B,EACtD,KAAA,CACF,GACM,CAAC,GAAuB,KAA4B,EAExD,KAAA,CAAS,GAEL,IAAqB,IACvB,IACA,GACE,IAAsB,IACxB,IACA,GAGE,IAAmB,GACtB,MAA4B;EAC3B,IAAI,CAAC,EAAI,UAAU;EAEnB,IAAI,GACA;EAoBJ,AAlBI,MAAuB,EAAI,KAIpB,OAAyB,EAAI,wBAAwB,UAE9D,IAAe,EAAI,IACnB,IAAgB,MAAwB,QAAQ,SAAS,UAGzD,IAAe,KAAA,GACf,IAAgB,KAAA,MAThB,IAAe,EAAI,IACnB,IAAgB,EAAI,wBAAwB,QAWzC,MACH,EAAwB,CAAY,GACpC,EAAyB,CAAa,IAExC,IAAe,GAAc,CAAa;CAC5C,GACA;EAAC;EAAoB;EAAqB;EAAc;CAAY,CACtE,GAGM,IAAiB,QAEnB,EAAQ,QAAQ,MACV,EAAI,gBAAsB,KACjB,EAAU,WAAW,EAAI,QACtB,EACjB,GACH,CAAC,GAAS,EAAU,UAAU,CAChC,GAGM,IAAe,GAClB,MAAgD;EAC/C,IAAM,IAAiB,EAAU,OAAO,EAAI,KACtC,IACJ,OAAO,KAAmB,YAAY,IAAiB,IACnD,IACA,EAAI;EACV,OAAO,MAAU,KAAA,IAAY,KAAA,IAAY,KAAK,IAAI,GAAO,EAAI,YAAY,CAAC;CAC5E,GACA,CAAC,EAAU,MAAM,CACnB,GAGM,IAAY,EAKR,IAAI,GAER,IAAc,GAEhB,GACA,GACA,MACG;EACH,IAAI,EAAI,UAAU;EAGlB,AAFA,EAAG,eAAe,GAClB,EAAG,gBAAgB,GACnB,EAAU,UAAU;GAClB,UAAU,EAAI;GACd,QAAQ,EAAG;GACX,YAAY;GACZ,UAAU,EAAI,YAAY;EAC5B;EAEA,IAAM,KAAU,MAAkB;GAChC,IAAM,IAAM,EAAU;GACtB,IAAI,CAAC,GAAK;GACV,IAAM,IAAQ,EAAE,UAAU,EAAI,QACxB,IAAO,KAAK,IAAI,EAAI,UAAU,EAAI,aAAa,CAAK;GAC1D,GAAc,OAAU;IACtB,GAAG;IACH,QAAQ;KAAE,GAAG,EAAK;MAAS,EAAI,WAAW;IAAK;GACjD,EAAE;EACJ,GACM,UAAa;GAGjB,AAFA,EAAU,UAAU,MACpB,OAAO,oBAAoB,aAAa,CAAM,GAC9C,OAAO,oBAAoB,WAAW,CAAI;EAC5C;EAEA,AADA,OAAO,iBAAiB,aAAa,CAAM,GAC3C,OAAO,iBAAiB,WAAW,CAAI;CACzC,GACA,CAAC,CACH,GAKM,IAAW,EAAO,CAAS;CACjC,QAAgB;EACV,EAAS,YAAY,MACzB,EAAS,UAAU,GACnB,IAAsB,CAAS;CACjC,GAAG,CAAC,GAAW,CAAmB,CAAC;CAGnC,IAAM,IAAa,QAAc;EAC/B,IAAI,CAAC,KAAsB,CAAC,GAAqB,OAAO;EACxD,IAAM,IAAM,EAAQ,MAAM,MAAM,EAAE,OAAO,CAAkB;EAE3D,OADK,GAAK,WACH,EAAW,GAAM,EAAgB,GAAK,CAAmB,CAAC,IADtC;CAE7B,GAAG;EAAC;EAAM;EAAS;EAAoB;CAAmB,CAAC,GAGrD,IAAoB,CAAC,cAAc,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CA+E5E,OACE,kBAAC,OAAD;EAAK,WAAW;EAAmB,eAAa;EAC9C,UAAA,kBAAC,SAAD;GAAO,WAAU;GAAoB,cAAY;GAAW,MAAK;GAAjE,UAAA,CACE,kBAAC,SAAD;IAAO,WAAU;IACf,UAAA,kBAAC,MAAD;KAAI,WAAU;KACX,UAAA,EAAe,KAAK,MAAQ;MAC3B,IAAM,IAAQ,EAAa,CAAG,GACxB,IAAe,EAAI,YAAY,EAAI,OAAO;MAEhD,OACE,kBAAC,MAAD;OAEE,OAAM;OACN,WAAW;QACT;QACA;QACA,EAAI,YAAY;QAChB,KAAgB;QAChB,EAAI;QACJ,EAAI,SAAS,2BAA2B,EAAI;OAC9C,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;OACX,OAAO;QACL,OAAO,MAAU,KAAA,IAAY,KAAA,IAAY,GAAG,OAAO,CAAK,EAAE;QAC1D,UAAU,EAAI;OAChB;OACA,aAAW,EACT,GACA,GACA,CACF;OACA,SACE,EAAI,iBACM;QACJ,EAAiB,CAAG;OACtB,IACA,KAAA;OAEN,WACE,EAAI,YACC,MAAM;QACL,CAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAe,GACjB,EAAiB,CAAG;OAExB,IACA,KAAA;OAEN,UAAU,EAAI,WAAW,IAAI,KAAA;OAvC/B,UAAA;QAyCE,kBAAC,QAAD;SAAM,WAAU;SAA0B,UAAA,EAAI;QAAa,CAAA;QAC1D,EAAI,YACH,kBAAC,GAAD,EACE,WACE,KAAgB,IACZ,IACA,OAEP,CAAA;QAEF,CAAC,EAAI,YACJ,kBAAC,OAAD;SACE,MAAK;SACL,oBAAiB;SACjB,WAAU;SACV,cAAc,MAAM;UAClB,EAAY,GAAG,GAAK,KAAS,EAAI,YAAY,GAAG;SAClD;QACD,CAAA;OAED;MA5DG,GAAA,EAAI,EA4DP;KAER,CAAC;IACC,CAAA;GACC,CAAA,GACP,kBAAC,SAAD;IAAO,WAAU;IAAoB,UAxJrC,IAEA,kBAAC,MAAD;KAAI,WAAU;KACZ,UAAA,kBAAC,MAAD;MAAI,SAAS,EAAe,UAAU;MAAG,WAAU;MAChD,UAAA,KAAgB,kBAAC,OAAD,EAAK,WAAU,sBAAuB,CAAA;KACrD,CAAA;IACF,CAAA,IAGJ,EAAW,WAAW,IAEtB,kBAAC,MAAD;KAAI,WAAU;KACZ,UAAA,kBAAC,MAAD;MAAI,SAAS,EAAe,UAAU;MAAG,WAAU;MAChD,UAAA;KACC,CAAA;IACF,CAAA,IAGD,EAAW,KAAK,GAAK,MAAU;KACpC,IAAM,IAAM,EAAU,GAAK,CAAK,GAI1B,IAAY,GAAQ,MAAe,IAAiB,GAAK,CAAK,KAAK,MACnE,IAAa,IAAe,GAAK,CAAK;KAC5C,OACE,kBAAC,MAAD;MAEE,WAAW;OACT;OACA,KAAa;OACb;MACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;MACX,SACE,KACK,MAAM;OACD,EAA0B,EAAE,QAAQ,EAAE,aAAa,KACvD,IAAa,CAAG;MAClB,IACA,KAAA;MAEN,WACE,KACK,MAAM;OACD,GAAE,QAAQ,WAAW,EAAE,QAAQ,SAC/B,EAA0B,EAAE,QAAQ,EAAE,aAAa,MACvD,EAAE,eAAe,GACjB,IAAa,CAAG;MAClB,IACA,KAAA;MAEN,UAAU,IAAY,IAAI,KAAA;MAC1B,MAAM,IAAY,WAAW,KAAA;MAE5B,UAAA,EAAe,KAAK,MACnB,kBAAC,MAAD;OAEE,WAAW;QACT;QACA,EAAI;QACJ,EAAI,SAAS,2BAA2B,EAAI;OAC9C,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;OACX,OAAO,EAAE,UAAU,EAAI,SAAS;OAE/B,UAAA,EAAI,OAAO,GAAK,CAAK;MACpB,GAXG,EAAI,EAWP,CACL;KACC,GA5CG,CA4CH;IAER,CAAC;GA+E4D,CAAA,CACpD;;CACJ,CAAA;AAET;AAGA,IAAa,IAAY,EAAK,CAAc"}

package/dist/components/Drawer/Drawer.d.ts

@@ -21,5 +21,16 @@ export interface DrawerProps {
     ariaDescribedBy?: string;
     /** Accessible label for the close button. Default: "Close" */
     closeLabel?: string;
+    /**
+     * Refuse dismissal by Escape or a backdrop click, shaking the panel instead.
+     * The close button and any footer control still call `onClose` directly, so
+     * route those through the same guard when they also need confirming.
+     */
+    preventDismiss?: boolean;
+    /**
+     * Called when `preventDismiss` blocked a dismissal, so the consumer can offer
+     * an explicit way out (a discard confirmation, for instance).
+     */
+    onDismissAttempt?: () => void;
 }
-export declare function Drawer({ isOpen, onClose, title, subtitle, width, children, footer, className, ariaLabelledBy, ariaDescribedBy, closeLabel, }: DrawerProps): import("react").JSX.Element;
+export declare function Drawer({ isOpen, onClose, title, subtitle, width, children, footer, className, ariaLabelledBy, ariaDescribedBy, closeLabel, preventDismiss, onDismissAttempt, }: DrawerProps): import("react").JSX.Element;