@camstack/ui-library 1.2.254 → 1.2.256

package/dist/index.cjs

@@ -15034,13 +15034,12 @@ function usePrompt() {
 	return useDialogContext$1().prompt;
 }
 var VARIANT_STYLES$2 = {
-	danger: { button: "bg-red-500 hover:bg-red-600 text-white" },
-	warning: { button: "bg-orange-500 hover:bg-orange-600 text-white" },
-	default: { button: "bg-primary hover:bg-primary/90 text-white" }
+	danger: { button: "bg-danger hover:bg-danger/90 text-primary-foreground" },
+	warning: { button: "bg-warning hover:bg-warning/90 text-primary-foreground" },
+	default: { button: "bg-primary hover:bg-primary/90 text-primary-foreground" }
 };
 var CANCEL_CLASS = "px-3 py-1.5 text-xs font-medium rounded-md border border-border text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors";
 function variantOf(state) {
-	if (state.kind === "prompt") return "default";
 	return state.options.variant ?? "default";
 }
 /**
@@ -15259,7 +15258,7 @@ function PromptBody({ options, value, error, inputRef, onChange }) {
 	const inputId = "camstack-dialog-input";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		options.message !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "mt-2 text-xs text-foreground-subtle leading-relaxed",
+			className: "mt-2 max-h-48 overflow-y-auto text-xs text-foreground-subtle leading-relaxed whitespace-pre-line",
 			children: options.message
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
@@ -15283,7 +15282,7 @@ function PromptBody({ options, value, error, inputRef, onChange }) {
 			className: "mt-1 w-full rounded-md border border-border bg-surface px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary"
 		}),
 		error !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "mt-1.5 text-[11px] text-red-400",
+			className: "mt-1.5 text-[11px] text-danger",
 			children: error
 		})
 	] });
@@ -35266,6 +35265,147 @@ function resolveTableLayout({ mode, columnCount, isNarrow }) {
 	return columnCount >= 4 ? "cards" : "table";
 }
 //#endregion
+//#region src/composites/data-table-pager.tsx
+/**
+* The pager under a paginated {@link DataTable}: the range ("26–50 of 167")
+* and previous / next. A `<nav>` named after its table, because two paged
+* tables on one page are otherwise two identical landmarks.
+*
+* The range is a polite live region: a screen-reader user who pressed "Next"
+* hears where they landed without having to hunt for it.
+*/
+function DataTablePager({ page, labels, onPageChange }) {
+	const atStart = page.page === 0;
+	const atEnd = page.page >= page.pageCount - 1;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
+		"aria-label": labels.navLabel,
+		className: "flex items-center justify-end gap-2 pt-2",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-live": "polite",
+				className: "text-[11px] tabular-nums text-foreground-subtle",
+				children: labels.range(page.from, page.to, page.total)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				icon: ChevronLeft,
+				"aria-label": labels.previous,
+				title: labels.previous,
+				disabled: atStart,
+				onClick: () => onPageChange(page.page - 1)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				icon: ChevronRight,
+				"aria-label": labels.next,
+				title: labels.next,
+				disabled: atEnd,
+				onClick: () => onPageChange(page.page + 1)
+			})
+		]
+	});
+}
+//#endregion
+//#region src/composites/data-table-pagination.ts
+function paginateRows(rows, page, pageSize) {
+	const size = Math.max(1, Math.floor(pageSize));
+	const total = rows.length;
+	const pageCount = Math.max(1, Math.ceil(total / size));
+	const clamped = Math.min(Math.max(0, Math.floor(page)), pageCount - 1);
+	const start = clamped * size;
+	const pageRows = rows.slice(start, start + size);
+	return {
+		pageRows,
+		page: clamped,
+		pageCount,
+		from: pageRows.length === 0 ? 0 : start + 1,
+		to: start + pageRows.length,
+		total
+	};
+}
+var DEFAULT_PAGINATION_LABELS = {
+	navLabel: "Table pages",
+	previous: "Previous page",
+	next: "Next page",
+	range: (from, to, total) => `${from}–${to} of ${total}`
+};
+//#endregion
+//#region src/composites/data-table-selection.tsx
+/**
+* Row selection for {@link DataTable}, as a synthetic leading column.
+*
+* A column, not a second rendering path: the table and the card layout both
+* already know how to draw columns, so selection works in both without a
+* branch of its own (in cards, the unlabelled column lands in the card's
+* footer strip with the other controls).
+*
+* Rules a bulk action relies on — pinned in `data-table-paging-selection.test`:
+*  - the header box acts on the selectable rows of the page ON SCREEN only;
+*  - a row `isSelectable` rejects has no box and is never added;
+*  - keys of rows that are not on screen survive a page-level toggle.
+*/
+var SELECTION_COLUMN_KEY = "__select";
+var CHECKBOX = "cursor-pointer align-middle";
+function PageCheckbox({ checked, indeterminate, disabled, label, onToggle }) {
+	const ref = (0, react$1.useRef)(null);
+	(0, react$1.useEffect)(() => {
+		if (ref.current !== null) ref.current.indeterminate = indeterminate;
+	}, [indeterminate]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Checkbox, {
+		ref,
+		"aria-label": label,
+		checked,
+		disabled,
+		onChange: onToggle,
+		className: CHECKBOX
+	});
+}
+/** The selection column for the rows currently on screen. */
+function selectionColumn(selection, pageRows, keyOf) {
+	const selectable = selection.isSelectable ?? (() => true);
+	const pageKeys = pageRows.filter(selectable).map(keyOf);
+	const onPage = pageKeys.filter((k) => selection.selected.has(k)).length;
+	const allOnPage = pageKeys.length > 0 && onPage === pageKeys.length;
+	const togglePage = () => {
+		const next = new Set(selection.selected);
+		for (const key of pageKeys) if (allOnPage) next.delete(key);
+		else next.add(key);
+		selection.onChange(next);
+	};
+	const toggleRow = (key) => {
+		const next = new Set(selection.selected);
+		if (next.has(key)) next.delete(key);
+		else next.add(key);
+		selection.onChange(next);
+	};
+	return {
+		key: SELECTION_COLUMN_KEY,
+		width: "w-8",
+		headerRender: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageCheckbox, {
+			checked: allOnPage,
+			indeterminate: onPage > 0 && !allOnPage,
+			disabled: pageKeys.length === 0,
+			label: selection.pageLabel,
+			onToggle: togglePage
+		}),
+		render: (row) => {
+			if (!selectable(row)) return null;
+			const key = keyOf(row);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Checkbox, {
+				"aria-label": selection.rowLabel(row),
+				checked: selection.selected.has(key),
+				onChange: () => toggleRow(key),
+				onClick: (e) => e.stopPropagation(),
+				className: CHECKBOX
+			});
+		}
+	};
+}
+//#endregion
 //#region src/composites/setting-row.tsx
 function SettingRow({ label, children, actions, elements = "plain", className, valueClassName }) {
 	const LabelTag = elements === "description" ? "dt" : "span";
@@ -35437,9 +35577,19 @@ var ALIGN_CLASS = {
 	right: "text-right",
 	center: "text-center"
 };
-function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyMessage, className, bordered = true, rowClassName, mobileMode = "scroll", maxBodyHeight, defaultSort }) {
+function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyMessage, className, bordered = true, rowClassName, mobileMode = "scroll", maxBodyHeight, defaultSort, sort: sortProp, onSortChange, pageSize, page: pageProp, onPageChange, paginationLabels = DEFAULT_PAGINATION_LABELS, selection }) {
 	const isNarrow = useIsMobile();
-	const [sort, setSort] = (0, react$1.useState)(defaultSort ?? null);
+	const [innerSort, setInnerSort] = (0, react$1.useState)(defaultSort ?? null);
+	const [innerPage, setInnerPage] = (0, react$1.useState)(0);
+	const sort = sortProp !== void 0 ? sortProp : innerSort;
+	const changeSort = (next) => {
+		if (sortProp === void 0) setInnerSort(next);
+		onSortChange?.(next);
+	};
+	const changePage = (next) => {
+		if (pageProp === void 0) setInnerPage(next);
+		onPageChange?.(next);
+	};
 	const layout = resolveTableLayout({
 		mode: mobileMode,
 		columnCount: columns.length,
@@ -35454,36 +35604,48 @@ function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyM
 		sortValue
 	]);
 	const activeSort = sortedColumn === void 0 ? null : sort;
+	const paged = pageSize === void 0 ? null : paginateRows(displayRows, pageProp ?? innerPage, pageSize);
+	const pageRows = paged === null ? displayRows : paged.pageRows;
+	const pager = paged !== null && paged.pageCount > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTablePager, {
+		page: paged,
+		labels: paginationLabels,
+		onPageChange: changePage
+	}) : null;
+	const keyOf = (row) => String(rowKey ? rowKey(row, rows.indexOf(row)) : rows.indexOf(row));
+	const shownColumns = selection === void 0 ? columns : [selectionColumn(selection, pageRows, keyOf), ...columns];
 	if (rows.length === 0 && emptyMessage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: `rounded-lg ${bordered ? "border border-border" : ""} bg-surface px-3 py-4 text-xs text-foreground-subtle text-center ${className ?? ""}`,
 		children: emptyMessage
 	});
 	if (rows.length === 0) return null;
-	if (layout === "cards") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `space-y-2 ${scrolls ? `${maxBodyHeight} overflow-y-auto` : ""} ${className ?? ""}`,
-		children: displayRows.map((row, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableCard, {
-			row,
-			rowIndex,
-			columns,
-			bordered,
-			onRowClick,
-			rowClassName
-		}, rowKey ? rowKey(row, rowIndex) : rowIndex))
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	if (layout === "cards") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `space-y-2 ${scrolls ? `${maxBodyHeight} overflow-y-auto` : ""}`,
+			children: pageRows.map((row, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableCard, {
+				row,
+				rowIndex,
+				columns: shownColumns,
+				bordered,
+				onRowClick,
+				rowClassName
+			}, rowKey ? rowKey(row, rowIndex) : rowIndex))
+		}), pager]
+	});
+	const table = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: [
 			"rounded-lg",
 			bordered ? "border border-border" : "",
 			"bg-surface overflow-x-auto",
 			scrolls ? `${maxBodyHeight} overflow-y-auto` : "",
-			className ?? ""
+			pager === null ? className ?? "" : ""
 		].filter(Boolean).join(" "),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
 			className: `w-full text-xs ${scrolls ? "border-separate border-spacing-0" : ""}`,
 			style: { minWidth: `${minWidthPx}px` },
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
 				className: "bg-surface",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: columns.map((col) => {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: shownColumns.map((col) => {
 					const align = col.align ?? "left";
 					const nowrap = col.nowrap ?? true;
 					const sortable = col.sortValue !== void 0;
@@ -35502,21 +35664,22 @@ function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyM
 							label: col.headerRender ? col.headerRender() : col.header,
 							active: isSorted,
 							dir: isSorted && activeSort !== null ? activeSort.dir : "asc",
-							onSort: () => setSort((prev) => nextTableSort(prev, col.key))
+							onSort: () => changeSort(nextTableSort(sort, col.key))
 						}) : col.headerRender ? col.headerRender() : col.header
 					}, col.key);
 				}) })
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: displayRows.map((row, rowIndex) => {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: pageRows.map((row, rowIndex) => {
 				const key = rowKey ? rowKey(row, rowIndex) : rowIndex;
 				const extra = rowClassName?.(row, rowIndex) ?? "";
 				const interactive = onRowClick !== void 0;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
 					onClick: interactive ? () => onRowClick(row, rowIndex) : void 0,
 					className: [interactive ? "cursor-pointer hover:bg-primary/5" : "hover:bg-primary/5", extra].filter(Boolean).join(" "),
-					children: columns.map((col) => {
+					children: shownColumns.map((col) => {
 						const align = col.align ?? "left";
 						const nowrap = col.nowrap ?? true;
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							"data-cell": col.key,
 							className: [
 								"px-3 py-2 text-foreground border-b border-border",
 								ALIGN_CLASS[align],
@@ -35529,6 +35692,11 @@ function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyM
 			}) })]
 		})
 	});
+	if (pager === null) return table;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className,
+		children: [table, pager]
+	});
 }
 /**
 * One row as a card. Columns that carry a plain-text `header` become labelled
@@ -37789,8 +37957,28 @@ function dataTableFacets(rows, facetValue) {
 		count
 	})).toSorted((a, b) => b.count - a.count || a.value.localeCompare(b.value));
 }
+/** One chip row per configured group, each derived like {@link dataTableFacets}. */
+function dataTableFacetGroups(rows, groups) {
+	return (groups ?? []).map((group) => ({
+		id: group.id,
+		facets: dataTableFacets(rows, group.value)
+	}));
+}
 function isDataTableFilterActive(state) {
-	return state.search.trim() !== "" || state.facets.length > 0;
+	const anyGroup = Object.values(state.groups ?? {}).some((values) => values.length > 0);
+	return state.search.trim() !== "" || state.facets.length > 0 || anyGroup;
+}
+/** A new state with `value` added to, or removed from, group `groupId`. */
+function toggleDataTableGroupFacet(state, groupId, value) {
+	const current = state.groups?.[groupId] ?? [];
+	const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+	return {
+		...state,
+		groups: {
+			...state.groups,
+			[groupId]: next
+		}
+	};
 }
 /** A new state with `value` added to, or removed from, the selected facets. */
 function toggleDataTableFacet(state, value) {
@@ -37810,8 +37998,17 @@ function filterDataTableRows(rows, state, config) {
 	const facetValue = config.facetValue;
 	const present = new Set(dataTableFacets(rows, facetValue).map((f) => f.value));
 	const selected = new Set(state.facets.filter((v) => present.has(v)));
+	const groupGates = (config.facetGroups ?? []).flatMap((group) => {
+		const presentInGroup = new Set(dataTableFacets(rows, group.value).map((f) => f.value));
+		const chosen = new Set((state.groups?.[group.id] ?? []).filter((v) => presentInGroup.has(v)));
+		return chosen.size === 0 ? [] : [{
+			value: group.value,
+			chosen
+		}];
+	});
 	return rows.filter((row) => {
 		if (selected.size > 0 && facetValue !== void 0 && !selected.has(facetValue(row))) return false;
+		if (groupGates.some((gate) => !gate.chosen.has(gate.value(row)))) return false;
 		if (needle !== "" && !config.searchText(row).some((text) => fuzzyMatch(needle, text))) return false;
 		return true;
 	});
@@ -37830,8 +38027,8 @@ function filterDataTableRows(rows, state, config) {
 */
 var CHIP_ON = "rounded-full border border-primary bg-primary/10 px-2 py-0.5 text-[10px] text-foreground";
 var CHIP_OFF = "rounded-full border border-border px-2 py-0.5 text-[10px] text-foreground-muted hover:bg-surface-hover";
-function DataTableFilterBar({ state, facets, labels, onSearch, onToggleFacet, onClear, facetLabel }) {
-	const active = state.search.trim() !== "" || state.facets.length > 0;
+function DataTableFilterBar({ state, facets, labels, onSearch, onToggleFacet, onClear, facetLabel, groups = [], onToggleGroupFacet }) {
+	const active = isDataTableFilterActive(state);
 	const showFacets = facets.length > 1;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex flex-wrap items-center gap-2",
@@ -37869,6 +38066,32 @@ function DataTableFilterBar({ state, facets, labels, onSearch, onToggleFacet, on
 					}, facet.value);
 				})
 			}),
+			groups.filter((group) => group.facets.length > 1).map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				role: "group",
+				"aria-label": group.label,
+				className: "flex flex-wrap items-center gap-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": true,
+					className: "text-[10px] uppercase tracking-wide text-foreground-subtle",
+					children: group.label
+				}), group.facets.map((facet) => {
+					const pressed = group.selected.includes(facet.value);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						onClick: () => onToggleGroupFacet?.(group.id, facet.value),
+						"aria-pressed": pressed,
+						className: pressed ? CHIP_ON : CHIP_OFF,
+						children: [
+							group.facetLabel ? group.facetLabel(facet.value) : facet.value,
+							" ",
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-foreground-subtle tabular-nums",
+								children: facet.count
+							})
+						]
+					}, facet.value);
+				})]
+			}, group.id)),
 			active && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				type: "button",
 				onClick: onClear,
@@ -37900,22 +38123,37 @@ function useDataTableFilter(rows, config) {
 	const toggleFacet = (0, react$1.useCallback)((value) => {
 		setState((prev) => toggleDataTableFacet(prev, value));
 	}, []);
+	const toggleGroupFacet = (0, react$1.useCallback)((groupId, value) => {
+		setState((prev) => toggleDataTableGroupFacet(prev, groupId, value));
+	}, []);
 	const clear = (0, react$1.useCallback)(() => setState(EMPTY_DATA_TABLE_FILTER), []);
-	const { searchText, facetValue } = config;
+	const { searchText, facetValue, facetGroups } = config;
+	const facets = (0, react$1.useMemo)(() => dataTableFacets(rows, facetValue), [rows, facetValue]);
 	return {
 		state,
 		setSearch,
 		toggleFacet,
+		toggleGroupFacet,
+		groups: (0, react$1.useMemo)(() => dataTableFacetGroups(rows, facetGroups).map((group) => ({
+			...group,
+			selected: state.groups?.[group.id] ?? []
+		})), [
+			rows,
+			facetGroups,
+			state.groups
+		]),
 		clear,
-		facets: (0, react$1.useMemo)(() => dataTableFacets(rows, facetValue), [rows, facetValue]),
+		facets,
 		rows: (0, react$1.useMemo)(() => filterDataTableRows(rows, state, {
 			searchText,
-			facetValue
+			facetValue,
+			facetGroups
 		}), [
 			rows,
 			state,
 			searchText,
-			facetValue
+			facetValue,
+			facetGroups
 		]),
 		active: isDataTableFilterActive(state)
 	};
@@ -61843,6 +62081,7 @@ exports.CoverInlineControl = CoverInlineControl;
 exports.CoverPanel = CoverPanel;
 exports.CustomFieldRenderersProvider = CustomFieldRenderersProvider;
 exports.DEFAULT_COLOR = DEFAULT_COLOR;
+exports.DEFAULT_PAGINATION_LABELS = DEFAULT_PAGINATION_LABELS;
 exports.DEVICE_COLUMNS = DEVICE_COLUMNS;
 exports.DEVICE_EXPORT_PAGE_SIZE_KEY = DEVICE_EXPORT_PAGE_SIZE_KEY;
 exports.DEVICE_LIST_PAGE_SIZE_KEY = DEVICE_LIST_PAGE_SIZE_KEY;
@@ -61854,6 +62093,7 @@ exports.DEVICE_TYPE_META = DEVICE_TYPE_META;
 exports.DISPLAY_ICON_REGISTRY = DISPLAY_ICON_REGISTRY;
 exports.DataTable = DataTable;
 exports.DataTableFilterBar = DataTableFilterBar;
+exports.DataTablePager = DataTablePager;
 exports.DetectionCanvas = DetectionCanvas;
 exports.DetectionOverlay = DetectionOverlay;
 exports.DetectionResultTree = DetectionResultTree;
@@ -62154,6 +62394,7 @@ exports.createSharedContext = createSharedContext;
 exports.createTheme = require_theme_index.createTheme$1;
 exports.cursorFractionFor = cursorFractionFor;
 exports.darkColors = require_theme_index.darkColors$1;
+exports.dataTableFacetGroups = dataTableFacetGroups;
 exports.dataTableFacets = dataTableFacets;
 exports.defaultOfField = defaultOfField;
 exports.defaultTheme = require_theme_index.defaultTheme$1;
@@ -62237,6 +62478,7 @@ exports.orphanDeviceLabel = orphanDeviceLabel;
 exports.overrideEntityIdFromLink = overrideEntityIdFromLink;
 exports.pageRows = pageRows;
 exports.pageSizeLabel = pageSizeLabel;
+exports.paginateRows = paginateRows;
 exports.parentDetailOf = parentDetailOf;
 exports.parseIceCandidate = parseIceCandidate;
 exports.parsePickerGroupBy = parsePickerGroupBy;
@@ -62309,6 +62551,7 @@ exports.tankAlert = tankAlert;
 exports.themeToCss = require_theme_index.themeToCss$1;
 exports.toStationaryOverlayBox = toStationaryOverlayBox;
 exports.toggleDataTableFacet = toggleDataTableFacet;
+exports.toggleDataTableGroupFacet = toggleDataTableGroupFacet;
 exports.togglePickerDevice = togglePickerDevice;
 exports.togglePickerKey = togglePickerKey;
 exports.trainingRefusalText = trainingRefusalText;