@logicplanes/kaeso-ui 0.4.4 → 0.4.6

package/dist/components/data-table.js

@@ -1,460 +1,2 @@
 "use client";
-import { t as e } from "../chunks/cn-Dj6sRgkF.js";
-import { a as t, i as n, o as r } from "../chunks/inset-BUzyXLK4.js";
-import { i } from "../chunks/context-BELWW79w.js";
-import { formatDate as a, formatDuration as o, formatNumber as s, formatRelative as c, formatTokens as l, formatUSD as u } from "../format.js";
-import { t as ee } from "../chunks/icon-D7ja-_Yk.js";
-import { r as d } from "../chunks/tooltip-OcwO0VUT.js";
-import { t as te } from "../chunks/observe-resize-DhxhmoyB.js";
-import { r as ne } from "../chunks/text-CIXH8rmT.js";
-import { n as re } from "../chunks/button-CzuxqawA.js";
-import { n as ie } from "../chunks/checkbox-CQjwCPkc.js";
-import { t as f } from "../chunks/menu-DEmBfdPm.js";
-import { r as ae } from "../chunks/skeleton-Dcz57Zyp.js";
-import { r as oe } from "../chunks/pagination-Cn_qF4cg.js";
-import { t as se } from "../chunks/empty-DvhyMXQq.js";
-import { i as p } from "../chunks/status-dot-QJTF0Yv4.js";
-import { t as m } from "../chunks/avatar-CWbdwbJv.js";
-import { t as ce } from "../chunks/scroll-parent-WXvzQcUo.js";
-import { t as le } from "../chunks/tone-CWpsHPb6.js";
-import { t as ue } from "../chunks/use-scroll-margin-atRtf0v_.js";
-import { forwardRef as h, useLayoutEffect as g, useMemo as de, useRef as _, useState as v } from "react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
-import { ArrowDown01Icon as fe, ArrowUp01Icon as pe } from "@hugeicons/core-free-icons";
-import { useVirtualizer as me } from "@tanstack/react-virtual";
-import { flexRender as x, getCoreRowModel as he, getSortedRowModel as ge, useReactTable as _e } from "@tanstack/react-table";
-//#region src/components/data-table/data-table.tsx
-var S = { density: {
-	compact: { classes: "h-36" },
-	default: { classes: "h-40" },
-	comfortable: { classes: "h-48" }
-} }, C = { density: "default" }, ve = {
-	compact: 36,
-	default: 40,
-	comfortable: 48
-}, w = 136;
-function T(e, t, n = 48) {
-	if (!t) return {
-		hidden: [],
-		tight: !1,
-		overflow: !1
-	};
-	let r = [...e].sort((e, t) => e.priority - t.priority), i = n, a = /* @__PURE__ */ new Set();
-	for (let e of r) i += e.size, (i <= t || e.priority <= 1 || e.fixed) && a.add(e.id);
-	let o = e.filter((e) => a.has(e.id)), s = o.reduce((e, t) => e + t.size, n), c = o.reduce((e, t) => e + (t.grow ? xe(t) : t.size), 0);
-	if (c > t && o.some((e) => e.grow)) {
-		let e = o[o.length - 1];
-		for (let n of [...o].reverse()) {
-			if (c <= t) break;
-			n.grow || n.fixed || n === e || (a.delete(n.id), c -= n.size);
-		}
-	}
-	return {
-		hidden: e.filter((e) => !a.has(e.id)).map((e) => e.id),
-		tight: s > t,
-		overflow: c > t
-	};
-}
-function ye(e) {
-	let t = getComputedStyle(e);
-	return e.getBoundingClientRect().width - (parseFloat(t.paddingLeft) || 0) - (parseFloat(t.paddingRight) || 0);
-}
-function be(e, t) {
-	if (!e?.id) return;
-	let n = e.meta?.text?.(t.original);
-	if (n) return n;
-	let r = t.getValue(e.id);
-	return typeof r == "string" && r ? r : void 0;
-}
-var xe = (e) => Math.min(e.size, e.minWidth ?? 136);
-function E({ data: a, columns: o, getRowId: s, density: c = "default", onRowClick: l, rowMenu: u, selectable: d, canSelectRow: p, selection: m, onSelectionChange: h, sorting: C, onSortingChange: w, manualSorting: E, loading: D, error: O, onRetry: k, empty: A, hasMore: j, loadingMore: M, onLoadMore: Se, stickyFirstColumn: Ce, virtualizeAbove: we = 100, className: Te, activeRowId: Ee, freshRowIds: De, onHiddenColumnsChange: N, "aria-label": Oe }, P) {
-	let F = t(), I = r(), ke = n(), L = i(), [Ae, je] = v([]), [Me, Ne] = v({}), [R, Pe] = v(0), Fe = C ?? Ae, Ie = m ?? Me, Le = de(() => d ? [{
-		id: "__select",
-		size: 44,
-		enableSorting: !1,
-		enableResizing: !1,
-		meta: { priority: 1 },
-		header: ({ table: e }) => /* @__PURE__ */ y(ie, {
-			"aria-label": L("dataTable.selectAllRows", "Select all rows"),
-			checked: e.getIsAllRowsSelected(),
-			indeterminate: e.getIsSomeRowsSelected() && !e.getIsAllRowsSelected(),
-			onCheckedChange: (t) => e.toggleAllRowsSelected(t)
-		}),
-		cell: ({ row: e }) => {
-			let t = be(o[0], e);
-			return /* @__PURE__ */ y(ie, {
-				"aria-label": t ? L("dataTable.selectNamed", "Select {name}", { name: t }) : L("dataTable.selectRow", "Select row"),
-				checked: e.getIsSelected(),
-				disabled: !e.getCanSelect(),
-				onCheckedChange: (t) => e.toggleSelected(t)
-			});
-		}
-	}, ...o] : o, [
-		o,
-		d,
-		L
-	]), z = _e({
-		data: a,
-		columns: Le,
-		state: {
-			sorting: Fe,
-			rowSelection: Ie
-		},
-		onSortingChange: (e) => {
-			let t = typeof e == "function" ? e(Fe) : e;
-			C || je(t), w?.(t);
-		},
-		onRowSelectionChange: (e) => {
-			let t = typeof e == "function" ? e(Ie) : e;
-			m || Ne(t), h?.(t);
-		},
-		getCoreRowModel: he(),
-		getSortedRowModel: ge(),
-		manualSorting: !!E,
-		enableRowSelection: d ? p ? (e) => p(e.original) : !0 : !1,
-		columnResizeMode: "onChange",
-		...s ? { getRowId: (e) => s(e) } : {},
-		defaultColumn: {
-			size: 140,
-			minSize: 64,
-			maxSize: 640
-		}
-	}), B = _(null), V = _(null), H = _(null), Re = z.getVisibleLeafColumns(), ze = Re.map((e) => ({
-		id: e.id,
-		size: e.getSize(),
-		priority: e.columnDef.meta?.priority ?? 2,
-		grow: !!e.columnDef.meta?.grow,
-		minWidth: e.columnDef.meta?.minWidth,
-		fixed: e.id === "__select"
-	})), Be = JSON.stringify(ze), Ve = (e) => {
-		let t = T(ze, e, F ? 48 : 0);
-		return `${t.tight ? "!" : ""}${t.overflow ? ">" : ""}|${t.hidden.join(" ")}`;
-	}, U = _(Ve);
-	U.current = Ve;
-	let [He, Ue] = v("|");
-	g(() => {
-		let e = B.current;
-		if (e) return te([e], ([e]) => Ue(U.current(Math.round(e?.contentRect.width ?? 0))));
-	}, []), g(() => {
-		B.current && Ue(U.current(Math.round(ye(B.current))));
-	}, [Be]);
-	let [We = "", Ge = ""] = He.split("|"), Ke = We.includes("!"), qe = We.includes(">"), W = de(() => new Set(Ge.split(" ").filter(Boolean)), [Ge]), Je = _(N);
-	Je.current = N, g(() => {
-		Je.current?.([...W]);
-	}, [W]);
-	let G = Re.filter((e) => !W.has(e.id)), K = (e) => e.columnDef.meta?.grow && Ke ? xe({
-		size: e.getSize(),
-		minWidth: e.columnDef.meta.minWidth
-	}) : e.getSize(), q = {
-		gridTemplateColumns: G.map((e) => e.columnDef.meta?.grow ? `minmax(${K(e)}px, 1fr)` : `${e.getSize()}px`).join(" "),
-		minWidth: G.reduce((e, t) => e + K(t), 0)
-	}, Ye = qe && G.length > 1 && !G[G.length - 1]?.columnDef.meta?.grow, J = z.getRowModel().rows, Y = J.length > we, X = () => ce(B.current), Xe = ue(H, X, J.length, Y), Z = me({
-		count: J.length,
-		getScrollElement: X,
-		estimateSize: () => ve[c],
-		overscan: 16,
-		enabled: Y,
-		scrollMargin: Xe
-	}), Q = (t) => e("flex min-w-0 items-center px-12", F && t === 0 && "pl-20", F && t === G.length - 1 && "pr-20"), $ = (t, n = !1) => (Ce && t === 0 || Ye && t === G.length - 1) && e("sticky z-10 group-hover/tr:bg-fill-1 group-aria-selected/tr:bg-fill-2 group-data-active/tr:bg-fill-2", t === 0 ? "left-0" : "right-0", F ? "bg-raised" : e(I ? "bg-raised" : "bg-panel", !n && (t === 0 ? "rounded-l-item" : "rounded-r-item"))), Ze = !!l || !!d, Qe = Math.min(R, Math.max(J.length - 1, 0)), $e = (e) => {
-		let t = Math.max(0, Math.min(J.length - 1, e));
-		Pe(t), Y && Z.scrollToIndex(t, { align: "auto" });
-		let n = () => H.current?.querySelector(`[data-row-index="${t}"]`), r = n();
-		r ? r.focus() : requestAnimationFrame(() => n()?.focus());
-	}, et = () => Math.max(1, Math.floor((X()?.clientHeight ?? 400) / ve[c]) - 1), tt = (e, t, n) => {
-		if (e.target !== e.currentTarget || e.altKey || e.metaKey || e.ctrlKey) return;
-		let r = {
-			ArrowDown: n + 1,
-			ArrowUp: n - 1,
-			Home: 0,
-			End: J.length - 1,
-			PageDown: n + et(),
-			PageUp: n - et()
-		}[e.key];
-		r === void 0 ? e.key === "Enter" ? (e.preventDefault(), l?.(t.original)) : e.key === " " && d && (e.preventDefault(), t.toggleSelected()) : (e.preventDefault(), $e(r));
-	}, nt = (t, n, r) => {
-		let i = t.getVisibleCells().filter((e) => !W.has(e.column.id)), a = /* @__PURE__ */ y("div", {
-			role: "row",
-			"aria-rowindex": n + 2,
-			"aria-selected": d ? t.getIsSelected() : void 0,
-			"data-active": t.id === Ee || void 0,
-			"data-fresh": De?.has(t.id) || void 0,
-			"data-row-index": n,
-			tabIndex: Ze ? n === Qe ? 0 : -1 : void 0,
-			onFocus: (e) => {
-				e.target === e.currentTarget && n !== R && Pe(n);
-			},
-			onClick: (e) => {
-				e.target.closest("button, a, [role=checkbox]") || l?.(t.original);
-			},
-			onKeyDown: (e) => tt(e, t, n),
-			style: {
-				...q,
-				...r
-			},
-			className: e("group/tr grid w-full text-body text-fg transition-control focus-ring-inset", !F && "rounded-item", S.density[c].classes, l && "cursor-pointer", "hover:bg-fill-1 aria-selected:bg-fill-2 data-active:bg-fill-2 data-fresh:animate-row-fresh", "hover:controls-on-fill aria-selected:controls-on-fill data-active:controls-on-fill"),
-			children: i.map((n, r) => {
-				let i = n.column.columnDef.meta, a = x(n.column.columnDef.cell, n.getContext()), o = n.getValue(), s = i?.text ? i.text(t.original) : typeof o == "string" ? o : void 0, c = i?.tone?.(t.original);
-				return /* @__PURE__ */ y("div", {
-					role: "cell",
-					className: e(Q(r), i?.align === "end" && "justify-end text-right tabular", i?.mono && "mono text-small", c && le[c], $(r)),
-					children: s !== void 0 && typeof a != "object" ? /* @__PURE__ */ y(ne, {
-						truncate: !0,
-						tone: c ?? "default",
-						className: e("min-w-0", i?.mono && "text-small"),
-						mono: !!i?.mono,
-						children: s
-					}) : n.column.id === "__select" ? /* @__PURE__ */ y("span", {
-						className: "flex",
-						children: a
-					}) : /* @__PURE__ */ y("span", {
-						className: e("min-w-0 truncate cell-fit", i?.grow && "flex-1"),
-						children: a
-					})
-				}, n.id);
-			})
-		});
-		return u ? /* @__PURE__ */ b(f, { children: [/* @__PURE__ */ y(f.Trigger, { children: a }), /* @__PURE__ */ y(f.Content, { children: u(t.original) })] }, t.id) : /* @__PURE__ */ y("div", { children: a }, t.id);
-	};
-	return /* @__PURE__ */ b("div", {
-		ref: (e) => {
-			B.current = e, typeof P == "function" ? P(e) : P && (P.current = e);
-		},
-		className: e("relative w-full min-w-0", !F && !ke && "px-24", Te),
-		children: [/* @__PURE__ */ b("div", {
-			role: "table",
-			"aria-label": Oe,
-			"aria-rowcount": J.length + 1,
-			"aria-busy": D || void 0,
-			className: e("w-full overflow-clip", F && "rounded-group bg-raised shadow-xs"),
-			children: [/* @__PURE__ */ y("div", {
-				ref: V,
-				role: "rowgroup",
-				className: e("sticky top-0 z-20 overflow-hidden", F || I ? "bg-raised" : "bg-panel"),
-				onScroll: (e) => {
-					H.current && H.current.scrollLeft !== e.currentTarget.scrollLeft && (H.current.scrollLeft = e.currentTarget.scrollLeft);
-				},
-				children: z.getHeaderGroups().map((t) => /* @__PURE__ */ y("div", {
-					role: "row",
-					"aria-rowindex": 1,
-					className: "grid h-36 hairline-b-strong",
-					style: q,
-					children: t.headers.filter((e) => !W.has(e.column.id)).map((t, n) => {
-						let r = t.column.columnDef.meta, i = t.column.getCanSort(), a = t.column.getIsSorted();
-						return /* @__PURE__ */ b("div", {
-							role: "columnheader",
-							"aria-sort": a === "asc" ? "ascending" : a === "desc" ? "descending" : i ? "none" : void 0,
-							className: e("group/th relative", Q(n), r?.align === "end" && "justify-end", $(n, !0), $(n, !0) && "hairline-b-strong"),
-							children: [i ? /* @__PURE__ */ b("button", {
-								type: "button",
-								onClick: t.column.getToggleSortingHandler(),
-								className: e("relative -mx-6 inline-flex h-28 min-w-0 cursor-pointer items-center gap-4 rounded-pill px-6 text-caption font-medium transition-control hover:bg-fill-1 hover:text-fg focus-ring tap-target", a ? "text-fg" : "text-fg-secondary", r?.align === "end" && "flex-row-reverse"),
-								children: [/* @__PURE__ */ y("span", {
-									className: "truncate",
-									children: x(t.column.columnDef.header, t.getContext())
-								}), /* @__PURE__ */ y(ee, {
-									icon: a === "desc" ? fe : pe,
-									size: "xs",
-									className: e("shrink-0 transition-control", a ? "opacity-100" : "opacity-0 group-hover/th:opacity-60")
-								})]
-							}) : /* @__PURE__ */ y("span", {
-								className: "truncate text-caption font-medium text-fg-secondary",
-								children: x(t.column.columnDef.header, t.getContext())
-							}), t.column.getCanResize() && /* @__PURE__ */ y("div", {
-								role: "separator",
-								"aria-orientation": "vertical",
-								"aria-label": L("dataTable.resizeColumn", "Resize column"),
-								"aria-valuenow": t.column.getSize(),
-								"aria-valuemin": t.column.columnDef.minSize ?? 64,
-								"aria-valuemax": t.column.columnDef.maxSize ?? 640,
-								tabIndex: 0,
-								onKeyDown: (e) => {
-									let n = {
-										ArrowLeft: -16,
-										ArrowRight: 16
-									}[e.key];
-									if (n === void 0) return;
-									e.preventDefault();
-									let r = t.column.id, i = t.column.columnDef.minSize ?? 64, a = t.column.columnDef.maxSize ?? 640;
-									z.setColumnSizing((e) => ({
-										...e,
-										[r]: Math.max(i, Math.min(a, t.column.getSize() + n))
-									}));
-								},
-								onMouseDown: t.getResizeHandler(),
-								onTouchStart: t.getResizeHandler(),
-								onDoubleClick: () => t.column.resetSize(),
-								className: "absolute top-8 right-0 bottom-8 w-8 cursor-col-resize rounded-pill after:absolute after:inset-y-0 after:right-0 after:w-1 after:bg-transparent after:transition-control group-hover/th:after:bg-line-strong focus-ring-inset"
-							})]
-						}, t.id);
-					})
-				}, t.id))
-			}), /* @__PURE__ */ y("div", {
-				ref: H,
-				role: "rowgroup",
-				className: "overflow-x-auto scrollbar-quiet",
-				onScroll: (e) => {
-					V.current && V.current.scrollLeft !== e.currentTarget.scrollLeft && (V.current.scrollLeft = e.currentTarget.scrollLeft);
-				},
-				children: O ? /* @__PURE__ */ y("div", {
-					role: "row",
-					children: /* @__PURE__ */ y("div", {
-						role: "cell",
-						"aria-colspan": G.length,
-						className: "block",
-						children: /* @__PURE__ */ y("div", {
-							role: "alert",
-							children: /* @__PURE__ */ y(se, {
-								size: "compact",
-								title: L("dataTable.loadFailed", "Couldn't load these rows"),
-								actions: k && /* @__PURE__ */ y(re, {
-									size: "sm",
-									onClick: k,
-									children: L("dataTable.tryAgain", "Try again")
-								})
-							})
-						})
-					})
-				}) : D && J.length === 0 ? Array.from({ length: 8 }, (t, n) => /* @__PURE__ */ y("div", {
-					role: "row",
-					className: e("grid", S.density[c].classes),
-					style: q,
-					children: G.map((t, r) => /* @__PURE__ */ y("div", {
-						role: "cell",
-						className: e(Q(r), t.columnDef.meta?.align === "end" && "justify-end"),
-						children: /* @__PURE__ */ y(ae, {
-							shape: "line",
-							style: { width: `${40 + (n * 7 + r * 13) % 45}%` }
-						})
-					}, t.id))
-				}, n)) : J.length === 0 ? /* @__PURE__ */ y("div", {
-					role: "row",
-					children: /* @__PURE__ */ y("div", {
-						role: "cell",
-						"aria-colspan": G.length,
-						className: "block",
-						children: A ?? /* @__PURE__ */ y(se, {
-							size: "compact",
-							title: L("dataTable.noRows", "No rows"),
-							description: L("dataTable.noMatches", "Nothing matches these filters.")
-						})
-					})
-				}) : Y ? /* @__PURE__ */ y("div", {
-					className: "relative",
-					style: { height: Z.getTotalSize() },
-					children: Z.getVirtualItems().map((e) => nt(J[e.index], e.index, {
-						position: "absolute",
-						top: 0,
-						left: 0,
-						transform: `translateY(${Math.round(e.start - Xe)}px)`
-					}))
-				}) : J.map((e, t) => nt(e, t))
-			})]
-		}), j && /* @__PURE__ */ y(oe, {
-			variant: "load-more",
-			hasMore: !0,
-			loading: M,
-			onLoadMore: Se
-		})]
-	});
-}
-var D = /* @__PURE__ */ h(E);
-process.env.NODE_ENV !== "production" && (D.displayName = "DataTable");
-var O = D;
-//#endregion
-//#region src/components/data-table/columns.tsx
-function k(e, t, n, r = {}, i) {
-	return {
-		id: e.id,
-		header: () => e.header,
-		accessorFn: t,
-		cell: (e) => n(e.getValue(), e.row.original),
-		...e.size ? { size: e.size } : {},
-		...i ? { sortingFn: i } : {},
-		meta: {
-			...e.priority === void 0 ? {} : { priority: e.priority },
-			...e.grow ? { grow: !0 } : {},
-			...e.minWidth === void 0 ? {} : { minWidth: e.minWidth },
-			...e.tone ? { tone: e.tone } : {},
-			...r
-		}
-	};
-}
-function A({ value: e }) {
-	let t = i()("dataTable.tokenCount", "{count} tokens", { count: s(e) });
-	return /* @__PURE__ */ y(d, {
-		content: t,
-		children: /* @__PURE__ */ b("span", { children: [/* @__PURE__ */ y("span", {
-			"aria-hidden": !0,
-			children: l(e)
-		}), /* @__PURE__ */ y("span", {
-			className: "sr-only",
-			children: t
-		})] })
-	});
-}
-function j({ value: e, now: t }) {
-	let n = a(e, {
-		time: !0,
-		seconds: !0
-	});
-	return /* @__PURE__ */ y(d, {
-		content: `${n} · ${a(e, {
-			time: !0,
-			utc: !0
-		})}`,
-		shape: "multiline",
-		children: /* @__PURE__ */ b("span", {
-			className: "text-fg-secondary",
-			children: [/* @__PURE__ */ y("time", {
-				dateTime: new Date(e).toISOString(),
-				children: c(e, t)
-			}), /* @__PURE__ */ b("span", {
-				className: "sr-only",
-				children: [" ", n]
-			})]
-		})
-	});
-}
-var M = {
-	text: (e, t) => k(e, t, (e) => e, { text: (e) => t(e) }),
-	mono: (e, t) => k(e, t, (e) => e, {
-		mono: !0,
-		text: (e) => t(e)
-	}),
-	number: (e, t) => k(e, t, (e) => s(e), { align: "end" }),
-	money: (e, t, n = {}) => k(e, t, (e) => u(e, n.decimals === void 0 ? {} : { decimals: n.decimals }), {
-		align: "end",
-		mono: !1
-	}, (e, t, n) => Number(e.getValue(n)) - Number(t.getValue(n))),
-	tokens: (e, t) => k(e, t, (e) => /* @__PURE__ */ y(A, { value: e }), { align: "end" }),
-	duration: (e, t) => k(e, t, (e) => o(e), { align: "end" }),
-	date: (e, t) => k(e, t, (e) => /* @__PURE__ */ y("time", {
-		dateTime: new Date(e).toISOString(),
-		children: a(e, { time: !0 })
-	}), {}, "datetime"),
-	relative: (e, t, n = {}) => k(e, t, (e) => /* @__PURE__ */ y(j, {
-		value: e,
-		now: n.now ?? Date.now()
-	}), {}, (e, t, n) => new Date(e.getValue(n)).getTime() - new Date(t.getValue(n)).getTime()),
-	status: (e, t) => k(e, t, (e) => /* @__PURE__ */ y(p, {
-		tone: e.tone,
-		children: e.label
-	}), { text: void 0 }),
-	avatar: (e, t) => k(e, t, (e) => /* @__PURE__ */ b("span", {
-		className: "inline-flex min-w-0 items-center gap-8",
-		children: [/* @__PURE__ */ y(m, {
-			name: e.name,
-			...e.src ? { src: e.src } : {},
-			size: 24,
-			decorative: !0
-		}), /* @__PURE__ */ y("span", {
-			className: "truncate",
-			children: e.name
-		})]
-	})),
-	custom: (e, t, n, r = {}) => k(e, t, n, r)
-};
-//#endregion
-export { w as DATA_TABLE_GROW_MIN, O as DataTable, C as KAESO_DATA_TABLE_DEFAULT_VARIANTS, S as KAESO_DATA_TABLE_VARIANTS, M as col, T as fitColumns };
-
-//# sourceMappingURL=data-table.js.map
+export { n as DATA_TABLE_GROW_MIN, r as DataTable, i as KAESO_DATA_TABLE_DEFAULT_VARIANTS, a as KAESO_DATA_TABLE_VARIANTS, t as col, o as fitColumns } from "../chunks/data-table-CqY8_6IS.js";