@datum-cloud/datum-ui 1.0.0 → 1.2.0

package/dist/grouped-table/index.mjs

@@ -0,0 +1,352 @@
+import { t as cn } from "../cn-dlASUkDY.mjs";
+import { t as Icon } from "../icon-wrapper-DKfJlJd0.mjs";
+import { n as CollapsibleContent, r as CollapsibleTrigger, t as Collapsible } from "../collapsible-BeCdkxTJ.mjs";
+import { t as Input } from "../input-DBzgl-pN.mjs";
+import { t as Skeleton } from "../skeleton-CGU89HPB.mjs";
+import { c as TableRow, i as TableCell, n as TableBody, o as TableHead, s as TableHeader } from "../table-BR3mwU8X.mjs";
+import { f as rowMatchesSearch, h as createSelectionColumn, m as DataTableColumnHeader, p as DataTableRowActions } from "../data-table-BTIxzB7O.mjs";
+import { ChevronRight } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { flexRender, getCoreRowModel, getFilteredRowModel, useReactTable } from "@tanstack/react-table";
+//#region src/components/features/grouped-table/components/grouped-skeleton.tsx
+function GroupedSkeleton({ columns = 4, groups = 2, rowsPerGroup = 3 }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "gt-skeleton",
+		children: Array.from({ length: groups }, (_, g) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "gt-skeleton-band",
+			className: "flex items-center gap-2 bg-muted/40 px-3 py-2 [&:not(:first-child)]:border-t",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-4 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" })]
+		}), Array.from({ length: rowsPerGroup }, (_, r) => /* @__PURE__ */ jsx("div", {
+			"data-slot": "gt-skeleton-row",
+			className: "flex items-center gap-3 px-3 py-2 [&:not(:last-child)]:border-b",
+			children: Array.from({ length: columns }, (_, c) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, c))
+		}, r))] }, g))
+	});
+}
+//#endregion
+//#region src/components/features/grouped-table/components/grouped-toolbar.tsx
+const DEFAULT_DEBOUNCE_MS = 300;
+function GroupedToolbar({ search, onSearchChange, placeholder = "Search...", debounceMs = DEFAULT_DEBOUNCE_MS, className }) {
+	const [value, setValue] = useState(search);
+	useEffect(() => {
+		setValue(search);
+	}, [search]);
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			if (value !== search) onSearchChange(value);
+		}, debounceMs);
+		return () => clearTimeout(timer);
+	}, [
+		value,
+		debounceMs,
+		search,
+		onSearchChange
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("pb-3", className),
+		"data-slot": "gt-toolbar",
+		children: /* @__PURE__ */ jsx(Input, {
+			placeholder,
+			value,
+			onChange: (e) => setValue(e.target.value),
+			"aria-label": placeholder,
+			"data-slot": "gt-search"
+		})
+	});
+}
+//#endregion
+//#region src/components/features/grouped-table/lib/bucket-rows.ts
+/**
+* Build per-group buckets of `filteredRows`, preserving the filtered order.
+* `coreRows` are the unfiltered rows in group-concatenated order; we use their
+* positions to learn which row id belongs to which group, so bucketing is correct
+* regardless of a custom getRowId.
+*/
+function bucketRows(groups, coreRows, filteredRows) {
+	const idToGroup = /* @__PURE__ */ new Map();
+	let offset = 0;
+	for (const group of groups) {
+		for (let i = 0; i < group.rows.length; i++) {
+			const core = coreRows[offset + i];
+			if (core) idToGroup.set(core.id, group.id);
+		}
+		offset += group.rows.length;
+	}
+	const buckets = new Map(groups.map((g) => [g.id, []]));
+	for (const row of filteredRows) {
+		const groupId = idToGroup.get(row.id);
+		if (groupId) buckets.get(groupId).push(row);
+	}
+	return buckets;
+}
+//#endregion
+//#region src/components/features/grouped-table/lib/compose-columns.tsx
+/** Wrap plain string headers in the sortable header; leave all other columns untouched. */
+function withSortableHeaders(columns) {
+	return columns.map((col) => {
+		if (typeof col.header !== "string") return col;
+		const title = col.header;
+		return {
+			...col,
+			enableSorting: col.enableSorting ?? true,
+			header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+				column,
+				title
+			})
+		};
+	});
+}
+function composeColumns(columns, options) {
+	const { enableRowSelection, enableSorting, rowActions, rowActionsSheetTitle } = options;
+	let cols = columns;
+	if (enableSorting) cols = withSortableHeaders(cols);
+	if (enableRowSelection) cols = [createSelectionColumn(typeof enableRowSelection === "object" ? enableRowSelection : {}), ...cols];
+	if (rowActions) cols = [...cols, {
+		id: "actions",
+		size: 44,
+		enableSorting: false,
+		cell: ({ row }) => /* @__PURE__ */ jsx(DataTableRowActions, {
+			row,
+			actions: rowActions(row.original),
+			sheetTitle: rowActionsSheetTitle
+		})
+	}];
+	return cols;
+}
+//#endregion
+//#region src/components/features/grouped-table/lib/sort-rows.ts
+function compare(a, b) {
+	if (a == null && b == null) return 0;
+	if (a == null) return -1;
+	if (b == null) return 1;
+	if (typeof a === "number" && typeof b === "number") return a - b;
+	return String(a).localeCompare(String(b));
+}
+/**
+* Sort a single group's rows by the active sort (first entry; v1 is single-sort).
+* Returns the same reference when there is no sort, so React can skip re-renders.
+*/
+function sortRows(rows, sorting) {
+	if (sorting.length === 0) return rows;
+	const { id, desc } = sorting[0];
+	const sorted = [...rows].sort((ra, rb) => compare(ra.getValue(id), rb.getValue(id)));
+	if (desc) sorted.reverse();
+	return sorted;
+}
+//#endregion
+//#region src/components/features/grouped-table/lib/use-controllable-state.ts
+/**
+* Uncontrolled-by-default state with an optional controlled override.
+* When `controlled` is undefined the hook owns the value; otherwise the prop wins.
+* `onChange` always fires. Accepts TanStack-style updater functions.
+*/
+function useControllableState(controlled, defaultValue, onChange) {
+	const [internal, setInternal] = useState(defaultValue);
+	const isControlled = controlled !== void 0;
+	const value = isControlled ? controlled : internal;
+	return [value, useCallback((next) => {
+		const resolved = typeof next === "function" ? next(value) : next;
+		if (!isControlled) setInternal(resolved);
+		onChange?.(resolved);
+	}, [
+		isControlled,
+		onChange,
+		value
+	])];
+}
+//#endregion
+//#region src/components/features/grouped-table/use-grouped-expansion.ts
+function defaultFor(group, def) {
+	const fallback = def === "all" ? true : def === "none" ? false : Array.isArray(def) ? def.includes(group.id) : true;
+	return group.defaultOpen ?? fallback;
+}
+function useGroupedExpansion(groups, opts) {
+	const { defaultExpanded = "all", expanded, onExpandedChange } = opts;
+	const controlled = expanded !== void 0;
+	const [overrides, setOverrides] = useState({});
+	const isOpen = useCallback((id) => {
+		if (controlled) return expanded.includes(id);
+		if (id in overrides) return overrides[id];
+		const g = groups.find((x) => x.id === id);
+		return g ? defaultFor(g, defaultExpanded) : false;
+	}, [
+		controlled,
+		expanded,
+		overrides,
+		groups,
+		defaultExpanded
+	]);
+	return {
+		isOpen,
+		toggle: useCallback((id) => {
+			const now = isOpen(id);
+			if (!controlled) setOverrides((o) => ({
+				...o,
+				[id]: !now
+			}));
+			const next = groups.filter((g) => g.id === id ? !now : isOpen(g.id)).map((g) => g.id);
+			onExpandedChange?.(next);
+		}, [
+			controlled,
+			groups,
+			isOpen,
+			onExpandedChange
+		])
+	};
+}
+//#endregion
+//#region src/components/features/grouped-table/grouped-table.tsx
+/** Floor width for unsized (flex) columns so they keep their share instead of collapsing on narrow viewports. */
+const MIN_FLEX_COLUMN_WIDTH = 120;
+function columnWidth(col) {
+	return typeof col.size === "number" ? `${col.size}px` : "auto";
+}
+/** Minimum width the table track needs so every column keeps a usable size; below this the area scrolls horizontally. */
+function trackMinWidth(resolvedColumns) {
+	return resolvedColumns.reduce((total, col) => total + (typeof col.size === "number" ? col.size : MIN_FLEX_COLUMN_WIDTH), 0);
+}
+function renderColGroup(resolvedColumns) {
+	return /* @__PURE__ */ jsx("colgroup", { children: resolvedColumns.map((col, i) => /* @__PURE__ */ jsx("col", { style: { width: columnWidth(col) } }, `col-${i}`)) });
+}
+/** Resolve a static or per-item className override (mirrors data-table). */
+function resolveClassName(value, item) {
+	return typeof value === "function" ? value(item) : value;
+}
+function GroupedTable(props) {
+	const { columns, groups, defaultExpanded, expanded, onExpandedChange, getRowId, enableRowSelection, rowSelection: rowSelectionProp, onRowSelectionChange, rowActions, rowActionsSheetTitle, enableSorting, sorting: sortingProp, onSortingChange, enableSearch, searchPlaceholder, searchableColumns, searchFn, search: searchProp, onSearchChange, searchDebounceMs, isLoading, empty, className, toolbarClassName, tableClassName, headerRowClassName, headerCellClassName, groupHeaderClassName, bodyClassName, rowClassName, cellClassName } = props;
+	const [sorting, setSorting] = useControllableState(sortingProp, [], onSortingChange);
+	const [rowSelection, setRowSelection] = useControllableState(rowSelectionProp, {}, onRowSelectionChange);
+	const [search, setSearch] = useControllableState(searchProp, "", onSearchChange);
+	const isSearching = search.trim().length > 0;
+	const { isOpen, toggle } = useGroupedExpansion(groups, {
+		defaultExpanded,
+		expanded,
+		onExpandedChange
+	});
+	const resolvedColumns = useMemo(() => composeColumns(columns, {
+		enableRowSelection,
+		enableSorting,
+		rowActions,
+		rowActionsSheetTitle
+	}), [
+		columns,
+		enableRowSelection,
+		enableSorting,
+		rowActions,
+		rowActionsSheetTitle
+	]);
+	const minWidth = useMemo(() => trackMinWidth(resolvedColumns), [resolvedColumns]);
+	const flatData = useMemo(() => groups.flatMap((g) => g.rows), [groups]);
+	const table = useReactTable({
+		data: flatData,
+		columns: resolvedColumns,
+		state: {
+			sorting,
+			rowSelection,
+			globalFilter: search
+		},
+		onSortingChange: setSorting,
+		onRowSelectionChange: setRowSelection,
+		onGlobalFilterChange: setSearch,
+		enableRowSelection: Boolean(enableRowSelection),
+		manualSorting: true,
+		enableMultiSort: false,
+		globalFilterFn: (row, _columnId, value) => rowMatchesSearch(row.original, String(value ?? ""), {
+			searchFn,
+			searchableColumns
+		}),
+		getRowId,
+		getCoreRowModel: getCoreRowModel(),
+		getFilteredRowModel: getFilteredRowModel()
+	});
+	const headerGroups = table.getHeaderGroups();
+	const coreRows = table.getCoreRowModel().rows;
+	const filteredRows = table.getRowModel().rows;
+	const buckets = useMemo(() => bucketRows(groups, coreRows, filteredRows), [
+		groups,
+		coreRows,
+		filteredRows
+	]);
+	const slices = useMemo(() => groups.map((g) => ({
+		group: g,
+		id: g.id,
+		title: g.title,
+		meta: g.meta,
+		rows: sortRows(buckets.get(g.id) ?? [], sorting)
+	})), [
+		groups,
+		buckets,
+		sorting
+	]);
+	const visibleSlices = isSearching ? slices.filter((s) => s.rows.length > 0) : slices;
+	const renderShell = (body, scrollable) => /* @__PURE__ */ jsxs("div", {
+		className: cn("w-full", className),
+		children: [enableSearch && /* @__PURE__ */ jsx(GroupedToolbar, {
+			search,
+			onSearchChange: setSearch,
+			placeholder: searchPlaceholder,
+			debounceMs: searchDebounceMs,
+			className: toolbarClassName
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("w-full rounded-md border", scrollable ? "overflow-x-auto" : "overflow-hidden"),
+			children: scrollable ? /* @__PURE__ */ jsx("div", {
+				style: { minWidth },
+				children: body
+			}) : body
+		})]
+	});
+	if (isLoading) return renderShell(/* @__PURE__ */ jsx(GroupedSkeleton, { columns: resolvedColumns.length }), false);
+	if (flatData.length === 0 || isSearching && visibleSlices.length === 0) return renderShell(empty ?? null, false);
+	return renderShell(/* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("table", {
+		className: cn("w-full table-fixed text-sm", tableClassName),
+		children: [renderColGroup(resolvedColumns), /* @__PURE__ */ jsx(TableHeader, { children: headerGroups.map((hg) => /* @__PURE__ */ jsx(TableRow, {
+			className: headerRowClassName,
+			children: hg.headers.map((header) => /* @__PURE__ */ jsx(TableHead, {
+				scope: "col",
+				className: headerCellClassName,
+				children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+			}, header.id))
+		}, hg.id)) })]
+	}), visibleSlices.map((slice) => {
+		const open = isSearching ? true : isOpen(slice.id);
+		return /* @__PURE__ */ jsxs(Collapsible, {
+			open,
+			onOpenChange: () => toggle(slice.id),
+			children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+				className: cn("flex h-10 w-full items-center gap-2 border-b bg-muted/40 px-2 text-left align-middle text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", resolveClassName(groupHeaderClassName, slice.group)),
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						icon: ChevronRight,
+						"aria-hidden": true,
+						className: cn("size-4 shrink-0 transition-transform", open && "rotate-90")
+					}),
+					/* @__PURE__ */ jsx("span", { children: slice.title }),
+					slice.meta != null && /* @__PURE__ */ jsx("span", {
+						className: "ml-auto flex items-center gap-2 font-medium",
+						children: slice.meta
+					})
+				]
+			}), /* @__PURE__ */ jsx(CollapsibleContent, {
+				className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+				children: /* @__PURE__ */ jsxs("table", {
+					className: cn("w-full table-fixed text-sm", tableClassName),
+					"aria-label": typeof slice.title === "string" ? slice.title : void 0,
+					children: [renderColGroup(resolvedColumns), /* @__PURE__ */ jsx(TableBody, {
+						className: bodyClassName,
+						children: slice.rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
+							"data-state": row.getIsSelected() ? "selected" : void 0,
+							className: resolveClassName(rowClassName, row),
+							children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
+								className: resolveClassName(cellClassName, cell),
+								children: flexRender(cell.column.columnDef.cell, cell.getContext())
+							}, cell.id))
+						}, row.id))
+					})]
+				})
+			})]
+		}, slice.id);
+	})] }), true);
+}
+//#endregion
+export { GroupedTable };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datum-cloud/datum-ui",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"
@@ -193,6 +193,11 @@
       "types": "./dist/components/base/table/index.d.ts",
       "default": "./dist/table/index.mjs"
     },
+    "./grouped-table": {
+      "source": "./src/components/features/grouped-table/index.ts",
+      "types": "./dist/components/features/grouped-table/index.d.ts",
+      "default": "./dist/grouped-table/index.mjs"
+    },
     "./tabs": {
       "source": "./src/components/base/tabs/index.ts",
       "types": "./dist/components/base/tabs/index.d.ts",
@@ -625,8 +630,8 @@
     "typescript": "^6.0.3",
     "vitest": "^4.1.8",
     "zod": "^4.4.3",
-    "@repo/config": "0.0.0",
-    "@repo/shadcn": "0.0.0"
+    "@repo/shadcn": "0.0.0",
+    "@repo/config": "0.0.0"
   },
   "publishConfig": {
     "access": "public"