ajo-ui 0.1.0

package/dist/chunks/data-table-DpkWv4y4.js

@@ -0,0 +1,1039 @@
+import { syncCheckedState } from "../utils.js";
+import { Checkbox } from "../checkbox.js";
+import { l as MenuSeparator, m as MenuTrigger, n as MenuCheckboxItem, o as MenuLabel, r as MenuContent, t as Menu } from "./menu-B45IyHHC.js";
+import { Select, SelectContent, SelectItem, SelectList, SelectTrigger, SelectValue } from "../select.js";
+import { Toolbar } from "../toolbar.js";
+import { announce, dom, statefulRootAttrs } from "ajo-cloves";
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+import { columnFilteringFeature, columnVisibilityFeature, constructTable, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, globalFilteringFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, tableFeatures } from "@tanstack/table-core";
+import { storeReactivityBindings } from "@tanstack/table-core/store-reactivity-bindings";
+//#region packages/ajo-ui/src/data-table-model.ts
+var dataTableStrategy = tableFeatures({
+	columnFilteringFeature,
+	columnVisibilityFeature,
+	globalFilteringFeature,
+	rowPaginationFeature,
+	rowSelectionFeature,
+	rowSortingFeature,
+	filteredRowModel: createFilteredRowModel(),
+	paginatedRowModel: createPaginatedRowModel(),
+	sortedRowModel: createSortedRowModel()
+});
+var DEFAULT_SIZES = [
+	10,
+	25,
+	50
+];
+var dataTableDefaultLabels = {
+	columns: "Columns",
+	deselectPage: "Deselect page",
+	deselectResults: "Deselect filtered results",
+	deselectRow: (row) => `Deselect ${row}`,
+	firstPage: "First page",
+	lastPage: "Last page",
+	nextPage: "Next page",
+	page: (page, pages) => `Page ${page} of ${pages}`,
+	pagination: (table) => `${table} pagination`,
+	previousPage: "Previous page",
+	reset: "Reset",
+	results: (count) => `${count} result${count === 1 ? "" : "s"}`,
+	rowsPerPage: "Rows per page",
+	search: "Search",
+	selectPage: "Select page",
+	selectResults: "Select filtered results",
+	selectRow: (row) => `Select ${row}`,
+	selected: (selected, total) => `${selected} of ${total} ${total === 1 ? "row" : "rows"} selected.`,
+	sort: (column, next) => `Sort ${column} ${next}`,
+	toolbar: (table) => `${table} controls`
+};
+var assertText = (value, name) => {
+	if (typeof value !== "string" || !value.trim()) throw new TypeError(`DataTable invalid ${name}`);
+	return value;
+};
+var encodeKey = (key, index) => {
+	if (typeof key === "string") {
+		if (!key) throw new TypeError(`DataTable invalid row key${index === void 0 ? "" : ` at ${index}`}`);
+		return `s:${key}`;
+	}
+	if (!Number.isFinite(key)) throw new TypeError(`DataTable invalid row key${index === void 0 ? "" : ` at ${index}`}`);
+	return `n:${Object.is(key, -0) ? 0 : key}`;
+};
+var columnId = (column) => {
+	return assertText(column.id ?? (typeof column.value === "string" ? column.value : void 0), "column id");
+};
+var scalarText = (value, column, index) => {
+	if (value == null) return "";
+	if (typeof value === "string" || typeof value === "boolean") return String(value);
+	if (typeof value === "number" && Number.isFinite(value)) return String(value);
+	throw new TypeError(`DataTable invalid searchable value ${column} at ${index}`);
+};
+var facetValues = (model, row, index) => {
+	const raw = model.column.facet?.values?.(row, index);
+	if (raw !== void 0) return (Array.isArray(raw) ? raw : [raw]).map((value) => assertText(value, `facet value ${model.id}`));
+	return [scalarText(model.read?.(row, index), model.id, index)];
+};
+var compareValues = (left, right, leftRow, rightRow, columnId, alphanumeric) => {
+	const leftMissing = left == null;
+	const rightMissing = right == null;
+	if (leftMissing || rightMissing) return leftMissing === rightMissing ? 0 : leftMissing ? 1 : -1;
+	if (typeof left !== typeof right) throw new TypeError(`DataTable mixed sort values ${columnId}`);
+	if (typeof left === "string") return alphanumeric();
+	if (typeof left === "number" && typeof right === "number") {
+		if (!Number.isFinite(left) || !Number.isFinite(right)) throw new TypeError(`DataTable invalid sort value ${columnId} at ${!Number.isFinite(left) ? leftRow.index : rightRow.index}`);
+		return left === right ? 0 : left < right ? -1 : 1;
+	}
+	if (typeof left === "boolean" && typeof right === "boolean") return left === right ? 0 : left ? 1 : -1;
+	throw new TypeError(`DataTable invalid sort value ${columnId}`);
+};
+var paginationConfig = (pagination) => {
+	const sizes = pagination === false ? DEFAULT_SIZES : pagination?.sizes ?? DEFAULT_SIZES;
+	if (!sizes.length) throw new RangeError("DataTable empty page sizes");
+	const seen = /* @__PURE__ */ new Set();
+	for (const size of sizes) {
+		if (!Number.isInteger(size) || size <= 0 || seen.has(size)) throw new RangeError("DataTable invalid page sizes");
+		seen.add(size);
+	}
+	const size = pagination === false ? sizes[0] : pagination?.defaultSize ?? sizes[0];
+	if (!seen.has(size)) throw new RangeError("DataTable default page size is unavailable");
+	return {
+		enabled: pagination !== false,
+		size,
+		sizes
+	};
+};
+var dataTableReactivity = (host) => {
+	const subscriptions = /* @__PURE__ */ new Set();
+	let disposed = false;
+	const dispose = () => {
+		if (disposed) return;
+		disposed = true;
+		for (const subscription of subscriptions) subscription.unsubscribe();
+		subscriptions.clear();
+	};
+	const add = (subscription) => {
+		if (disposed) subscription.unsubscribe();
+		else subscriptions.add(subscription);
+		return subscription;
+	};
+	const bindings = {
+		...storeReactivityBindings(),
+		addSubscription: (subscription) => {
+			add(subscription);
+		},
+		createOptionsStore: false,
+		schedule: (fn) => queueMicrotask(() => {
+			if (disposed || host.signal.aborted) return;
+			try {
+				fn();
+			} catch (error) {
+				host.throw(error);
+			}
+		}),
+		unmount: dispose,
+		wrapExternalAtoms: false
+	};
+	host.signal.addEventListener("abort", dispose, { once: true });
+	return {
+		add,
+		bindings
+	};
+};
+var createDataTableModel = (host, initialArgs) => {
+	const reactive = dataTableReactivity(host);
+	const features = tableFeatures({
+		...dataTableStrategy,
+		coreReactivityFeature: reactive.bindings
+	});
+	let args = initialArgs;
+	let actionEvent;
+	let syncing = false;
+	let stateVersion = 0;
+	let renderedVersion = 0;
+	let requestedVersion = 0;
+	let queued = false;
+	let optionsInitialized = false;
+	let rowsRef;
+	let rowsLength = 0;
+	let keyGetter;
+	let tableData = initialArgs.rows;
+	let rowIds = [];
+	let rowKeys = [];
+	let rowById = /* @__PURE__ */ new Map();
+	let columnsRef;
+	let columnsLength = 0;
+	let models = [];
+	let modelById = /* @__PURE__ */ new Map();
+	let definitions = [];
+	let knownColumns = /* @__PURE__ */ new Map();
+	let selectionEnabled = Boolean(initialArgs.selection);
+	let selectionControlled = initialArgs.selection?.value !== void 0;
+	let searchEnabled = Boolean(initialArgs.search);
+	let searchValue = "";
+	let pageConfig = paginationConfig(initialArgs.pagination);
+	const snapshotRows = (current) => {
+		if (current.rows === rowsRef && current.getRowKey === keyGetter) {
+			if (current.rows.length !== rowsLength) throw new TypeError("DataTable mutated rows");
+			if (rowsLength) {
+				const last = rowsLength - 1;
+				if (encodeKey(current.getRowKey(current.rows[0], 0)) !== rowIds[0] || encodeKey(current.getRowKey(current.rows[last], last)) !== rowIds[last]) throw new TypeError("DataTable mutated rows");
+			}
+			return false;
+		}
+		const replaced = current.rows !== rowsRef;
+		rowsRef = current.rows;
+		rowsLength = current.rows.length;
+		keyGetter = current.getRowKey;
+		tableData = replaced ? current.rows : [...current.rows];
+		rowIds = [];
+		rowKeys = [];
+		rowById = /* @__PURE__ */ new Map();
+		current.rows.forEach((row, index) => {
+			const key = current.getRowKey(row, index);
+			const id = encodeKey(key, index);
+			const previous = rowById.get(id);
+			if (previous !== void 0) throw new TypeError(`DataTable duplicate row key ${JSON.stringify(key)} ${previous}/${index}`);
+			rowById.set(id, index);
+			rowIds.push(id);
+			rowKeys.push(key);
+		});
+		return true;
+	};
+	const snapshotColumns = (current) => {
+		if (current.columns === columnsRef) {
+			if (current.columns.length !== columnsLength) throw new TypeError("DataTable mutated columns");
+			return false;
+		}
+		if (!current.columns.length) throw new TypeError("DataTable needs columns");
+		columnsRef = current.columns;
+		columnsLength = current.columns.length;
+		models = [];
+		modelById = /* @__PURE__ */ new Map();
+		for (const column of current.columns) {
+			assertText(column.label, "column label");
+			const id = columnId(column);
+			if (modelById.has(id)) throw new TypeError(`DataTable duplicate column ${JSON.stringify(id)}`);
+			const read = column.value === void 0 ? void 0 : typeof column.value === "function" ? column.value : (row) => row[column.value];
+			if (!read && !column.cell) throw new TypeError(`DataTable display column ${JSON.stringify(id)} needs a cell`);
+			if (!read && column.facet) throw new TypeError(`DataTable display column ${JSON.stringify(id)} cannot define a facet`);
+			if (column.facet) {
+				assertText(column.facet.label, `facet label ${id}`);
+				const options = /* @__PURE__ */ new Set();
+				for (const option of column.facet.options) {
+					assertText(option.label, `facet option label ${id}`);
+					assertText(option.value, `facet option value ${id}`);
+					if (options.has(option.value)) throw new TypeError(`DataTable duplicate facet option ${id}/${option.value}`);
+					options.add(option.value);
+				}
+			}
+			const model = {
+				column,
+				id,
+				read
+			};
+			models.push(model);
+			modelById.set(id, model);
+		}
+		if (models.every(({ column }) => column.defaultHidden)) throw new TypeError("DataTable needs a visible column");
+		definitions = models.map((model) => {
+			const { column, id, read } = model;
+			const definition = {
+				enableGlobalFilter: Boolean(read && column.search !== false),
+				enableHiding: column.hideable !== false,
+				enableSorting: Boolean(read && column.sort !== false),
+				filterFn: (row, _columnId, active) => {
+					const selected = active;
+					return !selected.length || facetValues(model, row.original, row.index).some((value) => selected.includes(value));
+				},
+				header: column.label,
+				id,
+				sortFn: (left, right, columnId) => {
+					if (typeof column.sort === "function") {
+						const result = column.sort(left.original, right.original);
+						if (!Number.isFinite(result)) throw new TypeError(`DataTable invalid comparator ${columnId}`);
+						return result;
+					}
+					return compareValues(left.getValue(columnId), right.getValue(columnId), left, right, columnId, () => sortFn_alphanumeric(left, right, columnId));
+				},
+				sortUndefined: false
+			};
+			return read ? {
+				...definition,
+				accessorFn: read
+			} : definition;
+		});
+		return true;
+	};
+	const selectionState = (keys) => {
+		const state = Object.create(null);
+		const seen = /* @__PURE__ */ new Set();
+		for (const key of keys ?? []) {
+			const id = encodeKey(key);
+			if (seen.has(id)) throw new TypeError(`DataTable duplicate selection key ${JSON.stringify(key)}`);
+			seen.add(id);
+			if (rowById.has(id)) state[id] = true;
+		}
+		return state;
+	};
+	const selectionInput = (selection) => {
+		const fallback = selectionState(selection?.defaultValue);
+		return selection?.value === void 0 ? fallback : selectionState(selection.value);
+	};
+	const sameSelection = (left, right) => {
+		for (const id of Object.keys(left)) if (Boolean(left[id]) !== Boolean(right[id])) return false;
+		for (const id of Object.keys(right)) if (Boolean(left[id]) !== Boolean(right[id])) return false;
+		return true;
+	};
+	snapshotRows(initialArgs);
+	snapshotColumns(initialArgs);
+	knownColumns = new Map(modelById);
+	assertText(initialArgs.label, "label");
+	const initialSelection = selectionInput(initialArgs.selection);
+	const initialVisibility = Object.fromEntries(models.map(({ column, id }) => [id, column.hideable === false || !column.defaultHidden]));
+	const table = constructTable({
+		autoResetPageIndex: false,
+		columns: definitions,
+		data: tableData,
+		enableMultiSort: false,
+		enableRowRangeSelection: false,
+		enableRowSelection: selectionEnabled,
+		features,
+		getColumnCanGlobalFilter: (column) => column.columnDef.enableGlobalFilter === true,
+		getRowId: (_row, index) => rowIds[index],
+		globalFilterFn: (row, columnId) => {
+			const model = modelById.get(columnId);
+			if (!model?.read || model.column.search === false) return false;
+			return scalarText(typeof model.column.search === "function" ? model.column.search(row.original, row.index) : row.getValue(columnId), columnId, row.index).toLowerCase().includes(searchValue);
+		},
+		initialState: {
+			columnFilters: [],
+			columnVisibility: initialVisibility,
+			globalFilter: "",
+			pagination: {
+				pageIndex: 0,
+				pageSize: pageConfig.size
+			},
+			rowSelection: initialSelection,
+			sorting: []
+		}
+	});
+	const defaultSelectionUpdater = table.options.onRowSelectionChange;
+	const selectedKeys = (state = table.atoms.rowSelection.get()) => {
+		const indexes = [];
+		for (const id of Object.keys(state)) {
+			const index = rowById.get(id);
+			if (state[id] && index !== void 0) indexes.push(index);
+		}
+		indexes.sort((left, right) => left - right);
+		return indexes.map((index) => rowKeys[index]);
+	};
+	const countSelected = (state = table.atoms.rowSelection.get()) => {
+		let count = 0;
+		for (const id of Object.keys(state)) if (state[id] && rowById.has(id)) count++;
+		return count;
+	};
+	const pageSelection = () => {
+		const rows = pageConfig.enabled ? table.getRowModel().rows : table.getPrePaginatedRowModel().rows;
+		let selected = 0;
+		for (const row of rows) if (row.getIsSelected()) selected++;
+		const all = rows.length > 0 && selected === rows.length;
+		return {
+			all,
+			some: selected > 0 && !all
+		};
+	};
+	const invalidate = (version) => {
+		requestedVersion = Math.max(requestedVersion, version);
+		if (queued || host.signal.aborted) return;
+		queued = true;
+		queueMicrotask(() => {
+			queued = false;
+			if (host.signal.aborted || renderedVersion >= requestedVersion) return;
+			try {
+				host.next();
+			} catch (error) {
+				if (!host.signal.aborted) host.throw(error);
+			}
+		});
+	};
+	const selectionUpdater = (updater) => {
+		const selection = args.selection;
+		if (!selection) return;
+		if (selection.value !== void 0) {
+			const current = selectionState(selection.value);
+			const next = typeof updater === "function" ? updater(current) : updater;
+			selection.onValueChange(selectedKeys(next), actionEvent);
+			return;
+		}
+		defaultSelectionUpdater(updater);
+		selection.onValueChange?.(selectedKeys(), actionEvent);
+	};
+	reactive.add(table.store.subscribe(() => {
+		const version = ++stateVersion;
+		if (!syncing) invalidate(version);
+	}));
+	const withAction = (event, action) => {
+		if (host.signal.aborted) return;
+		const previous = actionEvent;
+		actionEvent = event;
+		try {
+			action();
+		} finally {
+			actionEvent = previous;
+		}
+	};
+	const firstPage = () => {
+		if (!host.signal.aborted && pageConfig.enabled) table.firstPage();
+	};
+	const resetPage = () => {
+		if (pageConfig.enabled) table.setPageIndex(0);
+	};
+	const reconcileColumns = (changed) => {
+		if (!changed) return;
+		const visibility = table.atoms.columnVisibility.get();
+		const nextVisibility = {};
+		for (const model of models) {
+			const previous = knownColumns.get(model.id);
+			nextVisibility[model.id] = model.column.hideable === false ? true : previous ? visibility[model.id] !== false : !model.column.defaultHidden;
+		}
+		if (!Object.values(nextVisibility).some(Boolean)) nextVisibility[models[0].id] = true;
+		table.baseAtoms.columnVisibility.set(nextVisibility);
+		let reset = false;
+		if (table.atoms.sorting.get().some((sort) => {
+			const model = modelById.get(sort.id);
+			return !model?.read || model.column.sort === false;
+		})) {
+			table.baseAtoms.sorting.set([]);
+			reset = true;
+		}
+		const currentFilters = table.atoms.columnFilters.get();
+		const filters = currentFilters.flatMap((filter) => {
+			const facet = modelById.get(filter.id)?.column.facet;
+			if (!facet) return [];
+			const allowed = new Set(facet.options.map((option) => option.value));
+			const values = filter.value.filter((value) => allowed.has(value));
+			return values.length ? [{
+				id: filter.id,
+				value: values
+			}] : [];
+		});
+		if (filters.length !== currentFilters.length || filters.some((filter, index) => {
+			const current = currentFilters[index];
+			const values = filter.value;
+			const currentValues = current?.value;
+			return !current || current.id !== filter.id || values.length !== currentValues?.length || values.some((value, valueIndex) => value !== currentValues[valueIndex]);
+		})) {
+			table.baseAtoms.columnFilters.set(filters);
+			reset = true;
+		}
+		knownColumns = new Map(modelById);
+		if (reset) resetPage();
+	};
+	const sync = (nextArgs) => {
+		args = nextArgs;
+		assertText(args.label, "label");
+		const rowsChanged = snapshotRows(args);
+		const columnsChanged = snapshotColumns(args);
+		if (columnsChanged && !rowsChanged) tableData = [...args.rows];
+		const nextPage = paginationConfig(args.pagination);
+		const nextSelection = Boolean(args.selection);
+		const nextSelectionState = selectionInput(args.selection);
+		const nextSelectionControlled = args.selection?.value !== void 0;
+		const nextSearch = Boolean(args.search);
+		const optionsChanged = !optionsInitialized || rowsChanged || columnsChanged || selectionEnabled !== nextSelection || searchEnabled !== nextSearch || selectionControlled !== nextSelectionControlled || nextSelectionControlled && !sameSelection(table.atoms.rowSelection.get(), nextSelectionState);
+		syncing = true;
+		try {
+			if (selectionEnabled !== nextSelection) table.baseAtoms.rowSelection.set(nextSelection ? nextSelectionState : {});
+			if (searchEnabled !== nextSearch) {
+				searchValue = "";
+				table.baseAtoms.globalFilter.set("");
+			}
+			if (pageConfig.enabled !== nextPage.enabled) table.baseAtoms.pagination.set({
+				pageIndex: 0,
+				pageSize: nextPage.size
+			});
+			else if (!nextPage.sizes.includes(table.atoms.pagination.get().pageSize)) table.baseAtoms.pagination.set({
+				pageIndex: 0,
+				pageSize: nextPage.size
+			});
+			selectionEnabled = nextSelection;
+			selectionControlled = nextSelectionControlled;
+			searchEnabled = nextSearch;
+			pageConfig = nextPage;
+			if (optionsChanged) {
+				table.setOptions((previous) => ({
+					...previous,
+					columns: definitions,
+					data: tableData,
+					enableGlobalFilter: searchEnabled,
+					enableRowSelection: selectionEnabled,
+					onRowSelectionChange: selectionUpdater,
+					state: selectionControlled ? { rowSelection: nextSelectionState } : void 0
+				}));
+				optionsInitialized = true;
+			}
+			reconcileColumns(columnsChanged);
+			if (rowsChanged && args.selection?.value === void 0) {
+				const current = table.atoms.rowSelection.get();
+				const pruned = Object.create(null);
+				for (const id of Object.keys(current)) if (rowById.has(id)) pruned[id] = true;
+				if (Object.keys(pruned).length !== Object.keys(current).length) table.baseAtoms.rowSelection.set(pruned);
+			}
+			if (pageConfig.enabled) {
+				const pageCount = Math.max(1, table.getPageCount());
+				const current = table.atoms.pagination.get();
+				if (current.pageIndex >= pageCount) table.baseAtoms.pagination.set({
+					...current,
+					pageIndex: pageCount - 1
+				});
+			}
+		} finally {
+			syncing = false;
+		}
+		const pagination = table.atoms.pagination.get();
+		const pageCount = pageConfig.enabled ? Math.max(1, table.getPageCount()) : 1;
+		const sourceRows = pageConfig.enabled ? table.getRowModel().rows : table.getPrePaginatedRowModel().rows;
+		const allColumns = models.map((model) => ({
+			...model,
+			active: table.getColumn(model.id).getFilterValue() ?? [],
+			sorted: table.getColumn(model.id).getIsSorted(),
+			visible: table.getColumn(model.id).getIsVisible()
+		}));
+		const visibleRows = sourceRows.map((row) => ({
+			cells: row.getVisibleCells().map((cell) => ({
+				column: modelById.get(cell.column.id),
+				value: cell.getValue()
+			})),
+			id: row.id,
+			key: rowKeys[row.index],
+			original: row.original,
+			selected: row.getIsSelected(),
+			sourceIndex: row.index
+		}));
+		const selected = countSelected();
+		const pageSelected = pageSelection();
+		const filters = table.atoms.columnFilters.get();
+		const query = searchEnabled ? String(table.atoms.globalFilter.get() ?? "") : "";
+		renderedVersion = stateVersion;
+		return {
+			columns: allColumns,
+			filteredCount: table.getFilteredRowModel().rows.length,
+			hasFilters: Boolean(query || filters.length),
+			page: {
+				count: pageCount,
+				enabled: pageConfig.enabled,
+				index: pageConfig.enabled ? pagination.pageIndex : 0,
+				size: pagination.pageSize,
+				sizes: pageConfig.sizes
+			},
+			query,
+			rows: visibleRows,
+			selectedCount: selected,
+			selection: {
+				enabled: selectionEnabled,
+				...pageSelected
+			},
+			sourceCount: args.rows.length,
+			visibility: models.length > 1 && models.some((model) => model.column.hideable !== false)
+		};
+	};
+	return {
+		cell(cell, row) {
+			if (cell.column.column.cell) return cell.column.column.cell(row.original, {
+				columnId: cell.column.id,
+				sourceIndex: row.sourceIndex,
+				value: cell.value
+			});
+			if (cell.value == null) return "";
+			if ([
+				"bigint",
+				"boolean",
+				"number",
+				"string"
+			].includes(typeof cell.value)) return String(cell.value);
+			throw new TypeError(`DataTable cannot render ${cell.column.id} at ${row.sourceIndex}`);
+		},
+		firstPage,
+		lastPage: () => {
+			if (!host.signal.aborted && pageConfig.enabled) table.lastPage();
+		},
+		nextPage: () => {
+			if (!host.signal.aborted && pageConfig.enabled) table.nextPage();
+		},
+		previousPage: () => {
+			if (!host.signal.aborted && pageConfig.enabled) table.previousPage();
+		},
+		reset(event) {
+			withAction(event, () => {
+				searchValue = "";
+				table.setGlobalFilter("");
+				table.setColumnFilters([]);
+				resetPage();
+			});
+		},
+		selected: (id) => table.atoms.rowSelection.get()[id] === true,
+		selection: pageSelection,
+		setFacet(id, value, checked, event) {
+			if (!(modelById.get(id)?.column.facet)?.options.some((option) => option.value === value)) return;
+			withAction(event, () => {
+				const column = table.getColumn(id);
+				const active = new Set(column?.getFilterValue());
+				if (active.has(value) === checked) return;
+				if (checked) active.add(value);
+				else active.delete(value);
+				column?.setFilterValue(active.size ? [...active] : void 0);
+				resetPage();
+			});
+		},
+		setPageSize(size) {
+			if (host.signal.aborted || !pageConfig.enabled || !pageConfig.sizes.includes(size)) return;
+			table.setPagination({
+				pageIndex: 0,
+				pageSize: size
+			});
+		},
+		setQuery(query, event) {
+			if (!searchEnabled) return;
+			withAction(event, () => {
+				const value = query.trim();
+				searchValue = value.toLowerCase();
+				table.setGlobalFilter(value);
+				resetPage();
+			});
+		},
+		sort(id, event) {
+			const model = modelById.get(id);
+			if (!model?.read || model.column.sort === false) return;
+			withAction(event, () => {
+				const current = table.atoms.sorting.get()[0];
+				const next = current?.id !== id ? [{
+					id,
+					desc: false
+				}] : !current.desc ? [{
+					id,
+					desc: true
+				}] : [];
+				table.setSorting(next);
+				resetPage();
+			});
+		},
+		sync,
+		toggleColumn(id, visible) {
+			if (host.signal.aborted) return;
+			const column = table.getColumn(id);
+			if (!column?.getCanHide()) return;
+			if (!visible && table.getVisibleLeafColumns().length <= 1) return;
+			column.toggleVisibility(visible);
+		},
+		togglePage(checked, event) {
+			if (!selectionEnabled) return;
+			withAction(event, () => {
+				const state = { ...table.atoms.rowSelection.get() };
+				const rows = pageConfig.enabled ? table.getRowModel().rows : table.getPrePaginatedRowModel().rows;
+				for (const row of rows) if (checked) state[row.id] = true;
+				else delete state[row.id];
+				table.setRowSelection(state);
+			});
+		},
+		toggleRow(id, checked, event) {
+			if (!selectionEnabled || !rowById.has(id)) return;
+			withAction(event, () => {
+				const state = { ...table.atoms.rowSelection.get() };
+				if (checked) state[id] = true;
+				else delete state[id];
+				table.setRowSelection(state);
+			});
+		}
+	};
+};
+//#endregion
+//#region packages/ajo-ui/src/data-table.tsx
+var validLabel = (value, name) => {
+	if (typeof value !== "string" || !value.trim()) throw new TypeError(`DataTable invalid ${name}`);
+	return value;
+};
+var align = (value) => value ?? "left";
+var activeElement = (host) => {
+	const active = host.ownerDocument.activeElement;
+	return active instanceof HTMLElement && host.contains(active) ? active : null;
+};
+var coordinate = (host) => {
+	let node = activeElement(host);
+	let column;
+	while (node && node !== host) {
+		column ??= node.dataset.columnId;
+		if (node.dataset.rowId) return {
+			column,
+			row: node.dataset.rowId
+		};
+		node = node.parentElement;
+	}
+};
+var findCoordinate = (host, target) => {
+	for (const row of host.querySelectorAll("[data-row-id]")) {
+		if (row.dataset.rowId !== target.row) continue;
+		if (!target.column) return row;
+		for (const cell of row.querySelectorAll("[data-column-id]")) if (cell.dataset.columnId === target.column) return cell.querySelector("button,input,[tabindex]:not([tabindex=\"-1\"])") ?? cell;
+	}
+};
+var restoreCheckbox = (event, checked, indeterminate = false) => {
+	const input = event.currentTarget;
+	input.checked = checked;
+	input.indeterminate = indeterminate;
+	syncCheckedState(input, input.closest("[data-slot=\"checkbox\"]"));
+};
+var DataTableRoot = function* () {
+	let model;
+	let table = null;
+	let resultsTimer;
+	let composing = false;
+	let announceAfterRender;
+	const live = announce(this);
+	const preserveFocus = () => {
+		const active = dom(this) ? activeElement(this) : null;
+		const target = active ? coordinate(this) : void 0;
+		if (!active) return;
+		queueMicrotask(() => {
+			if (!dom(this) || this.signal.aborted) return;
+			const current = this.ownerDocument.activeElement;
+			if (current && current !== this.ownerDocument.body && current !== this.ownerDocument.documentElement && !current.matches(":disabled")) return;
+			((target ? findCoordinate(this, target) : void 0) ?? table)?.focus({ preventScroll: true });
+		});
+	};
+	this.signal.addEventListener("abort", () => {
+		if (resultsTimer !== void 0) clearTimeout(resultsTimer);
+		table = null;
+		model = void 0;
+	}, { once: true });
+	for (const args of this) {
+		preserveFocus();
+		model ??= createDataTableModel(this, args);
+		const view = model.sync(args);
+		const labels = {
+			...dataTableDefaultLabels,
+			...args.labels
+		};
+		const text = (name) => validLabel(labels[name], `label ${name}`);
+		const call = (name, ...values) => validLabel(labels[name](...values), `label ${name}`);
+		const visibleColumns = view.columns.filter((column) => column.visible);
+		const visibleCount = visibleColumns.length;
+		const controlledSelection = args.selection?.value !== void 0;
+		const selectAllLabel = () => view.selection.all ? text(view.page.enabled ? "deselectPage" : "deselectResults") : text(view.page.enabled ? "selectPage" : "selectResults");
+		if (announceAfterRender) {
+			const message = call("results", view.filteredCount);
+			if (resultsTimer !== void 0) clearTimeout(resultsTimer);
+			if (announceAfterRender === "immediate") live.polite(message);
+			else resultsTimer = setTimeout(() => live.polite(message), 200);
+			announceAfterRender = void 0;
+		}
+		const announceResults = (mode) => {
+			announceAfterRender = mode;
+		};
+		const selectLabel = (row) => {
+			const selection = args.selection;
+			const rowLabel = validLabel(selection.getRowLabel(row.original, row.sourceIndex), "row label");
+			return row.selected ? call("deselectRow", rowLabel) : call("selectRow", rowLabel);
+		};
+		yield /* @__PURE__ */ jsxs(Fragment, { children: [
+			args.search || view.columns.some((column) => column.column.facet?.options.length) || view.visibility ? /* @__PURE__ */ jsxs(Toolbar, {
+				"aria-label": call("toolbar", args.label),
+				"data-slot": "data-table-toolbar",
+				children: [/* @__PURE__ */ jsxs("div", {
+					"data-slot": "data-table-toolbar-controls",
+					children: [
+						args.search ? /* @__PURE__ */ jsx("input", {
+							"aria-label": text("search"),
+							"data-slot": "data-table-search",
+							placeholder: args.search.placeholder ?? text("search"),
+							"set:oncompositionend": (event) => {
+								composing = false;
+								announceResults("deferred");
+								model.setQuery(event.currentTarget.value, event);
+							},
+							"set:oncompositionstart": () => {
+								composing = true;
+							},
+							"set:oninput": (event) => {
+								if (!composing) announceResults("deferred");
+								model.setQuery(event.currentTarget.value, event);
+							},
+							"set:onkeydown": (event) => {
+								if (event.key !== "Enter" || event.isComposing) return;
+								announceAfterRender = void 0;
+								if (resultsTimer !== void 0) clearTimeout(resultsTimer);
+								resultsTimer = void 0;
+								live.polite(call("results", view.filteredCount));
+							},
+							"set:value": view.query,
+							type: "search"
+						}) : null,
+						view.columns.flatMap((column) => {
+							const facet = column.column.facet;
+							if (!facet?.options.length) return [];
+							return [/* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsxs(MenuTrigger, {
+								"data-slot": "data-table-facet",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										"aria-hidden": "true",
+										"data-slot": "data-table-facet-icon"
+									}),
+									facet.label,
+									column.active.length ? /* @__PURE__ */ jsx("span", {
+										"data-slot": "data-table-facet-count",
+										children: column.active.length
+									}) : null
+								]
+							}), /* @__PURE__ */ jsxs(MenuContent, {
+								"data-slot": "data-table-facet-content",
+								children: [
+									/* @__PURE__ */ jsx(MenuLabel, { children: facet.label }),
+									/* @__PURE__ */ jsx(MenuSeparator, {}),
+									facet.options.map((option) => /* @__PURE__ */ jsxs(MenuCheckboxItem, {
+										checked: column.active.includes(option.value),
+										onCheckedChange: (checked, event) => {
+											announceResults("immediate");
+											model.setFacet(column.id, option.value, checked, event);
+										},
+										textValue: option.label,
+										children: [option.icon ? /* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											"data-slot": "data-table-facet-option-icon",
+											children: option.icon
+										}) : null, option.label]
+									}, option.value))
+								]
+							})] }, column.id)];
+						}),
+						view.hasFilters ? /* @__PURE__ */ jsxs("button", {
+							"data-slot": "data-table-reset",
+							"set:onclick": (event) => {
+								announceResults("immediate");
+								model.reset(event);
+							},
+							type: "button",
+							children: [text("reset"), /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								"data-slot": "data-table-reset-icon"
+							})]
+						}) : null
+					]
+				}), view.visibility ? /* @__PURE__ */ jsxs(Menu, {
+					placement: "bottom-end",
+					children: [/* @__PURE__ */ jsxs(MenuTrigger, {
+						"data-slot": "data-table-columns",
+						children: [text("columns"), /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							"data-slot": "data-table-columns-icon"
+						})]
+					}), /* @__PURE__ */ jsxs(MenuContent, {
+						"data-slot": "data-table-columns-content",
+						children: [
+							/* @__PURE__ */ jsx(MenuLabel, { children: text("columns") }),
+							/* @__PURE__ */ jsx(MenuSeparator, {}),
+							view.columns.filter((column) => column.column.hideable !== false).map((column) => /* @__PURE__ */ jsx(MenuCheckboxItem, {
+								checked: column.visible,
+								disabled: column.visible && visibleCount === 1,
+								onCheckedChange: (checked) => model.toggleColumn(column.id, checked),
+								textValue: column.column.label,
+								children: column.column.label
+							}, column.id))
+						]
+					})]
+				}) : null]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "data-table-container",
+				children: /* @__PURE__ */ jsxs("table", {
+					"aria-label": args.label,
+					"data-slot": "table",
+					ref: (element) => table = element,
+					tabindex: -1,
+					children: [/* @__PURE__ */ jsx("thead", {
+						"data-slot": "table-header",
+						children: /* @__PURE__ */ jsxs("tr", {
+							"data-slot": "table-row",
+							children: [view.selection.enabled ? /* @__PURE__ */ jsx("th", {
+								"data-slot": "table-head",
+								scope: "col",
+								children: /* @__PURE__ */ jsx(Checkbox, {
+									"aria-label": selectAllLabel(),
+									disabled: !view.rows.length,
+									"set:checked": view.selection.all,
+									"set:indeterminate": view.selection.some,
+									onCheckedChange: (checked, event) => {
+										try {
+											model.togglePage(checked, event);
+										} finally {
+											if (controlledSelection && model) {
+												const selection = model.selection();
+												restoreCheckbox(event, selection.all, selection.some);
+											}
+										}
+									}
+								})
+							}) : null, visibleColumns.map((column) => {
+								const next = column.sorted === false ? "ascending" : column.sorted === "asc" ? "descending" : "none";
+								const sortable = column.column.value !== void 0 && column.column.sort !== false;
+								return /* @__PURE__ */ jsx("th", {
+									"aria-sort": column.sorted === "asc" ? "ascending" : column.sorted === "desc" ? "descending" : void 0,
+									"data-align": align(column.column.align),
+									"data-column-id": column.id,
+									"data-slot": "table-head",
+									scope: "col",
+									children: sortable ? /* @__PURE__ */ jsxs("button", {
+										"aria-label": call("sort", column.column.label, next),
+										"data-slot": "data-table-sort-trigger",
+										"set:onclick": (event) => model.sort(column.id, event),
+										type: "button",
+										children: [/* @__PURE__ */ jsx("span", { children: column.column.header ?? column.column.label }), /* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											"data-slot": "data-table-sort-icon",
+											"data-sort": column.sorted || "none"
+										})]
+									}) : column.column.header ?? column.column.label
+								}, column.id);
+							})]
+						})
+					}), /* @__PURE__ */ jsx("tbody", {
+						"data-slot": "table-body",
+						children: view.rows.length ? view.rows.map((row) => /* @__PURE__ */ jsxs("tr", {
+							"data-row-id": row.id,
+							"data-slot": "table-row",
+							"data-state": row.selected ? "selected" : void 0,
+							children: [view.selection.enabled ? /* @__PURE__ */ jsx("td", {
+								"data-column-id": "\\0selection",
+								"data-slot": "table-cell",
+								children: /* @__PURE__ */ jsx(Checkbox, {
+									"aria-label": selectLabel(row),
+									"set:checked": row.selected,
+									onCheckedChange: (checked, event) => {
+										try {
+											model.toggleRow(row.id, checked, event);
+										} finally {
+											if (controlledSelection && model) restoreCheckbox(event, model.selected(row.id));
+										}
+									}
+								})
+							}) : null, row.cells.map((cell) => /* @__PURE__ */ jsx("td", {
+								"data-align": align(cell.column.column.align),
+								"data-column-id": cell.column.id,
+								"data-slot": "table-cell",
+								children: model.cell(cell, row)
+							}, cell.column.id))]
+						}, row.id)) : /* @__PURE__ */ jsx("tr", {
+							"data-slot": "table-row",
+							children: /* @__PURE__ */ jsx("td", {
+								colspan: visibleCount + (view.selection.enabled ? 1 : 0),
+								"data-slot": "data-table-empty",
+								children: args.empty ?? "No results."
+							})
+						})
+					})]
+				})
+			}),
+			view.selection.enabled || view.page.enabled ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "data-table-footer",
+				children: [view.selection.enabled ? /* @__PURE__ */ jsx("div", {
+					"aria-live": "polite",
+					"data-slot": "data-table-selection-summary",
+					role: "status",
+					children: call("selected", view.selectedCount, view.sourceCount)
+				}) : null, view.page.enabled ? /* @__PURE__ */ jsxs("nav", {
+					"aria-label": call("pagination", args.label),
+					"data-slot": "data-table-pagination",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							"data-slot": "data-table-page-size",
+							children: [/* @__PURE__ */ jsx("span", { children: text("rowsPerPage") }), /* @__PURE__ */ jsxs(Select, {
+								value: view.page.size,
+								onValueChange: (value) => {
+									if (value !== null) model.setPageSize(value);
+								},
+								children: [/* @__PURE__ */ jsx(SelectTrigger, {
+									"aria-label": text("rowsPerPage"),
+									children: /* @__PURE__ */ jsx(SelectValue, {})
+								}), /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectList, { children: view.page.sizes.map((size) => /* @__PURE__ */ jsx(SelectItem, {
+									value: size,
+									children: size
+								}, size)) }) })]
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"data-slot": "data-table-page-indicator",
+							children: call("page", view.page.index + 1, view.page.count)
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							"data-slot": "data-table-pagination-actions",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									"aria-label": text("firstPage"),
+									"data-action": "first",
+									"data-slot": "data-table-pagination-action",
+									disabled: view.page.index === 0,
+									"set:onclick": () => model.firstPage(),
+									type: "button",
+									children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+								}),
+								/* @__PURE__ */ jsx("button", {
+									"aria-label": text("previousPage"),
+									"data-action": "previous",
+									"data-slot": "data-table-pagination-action",
+									disabled: view.page.index === 0,
+									"set:onclick": () => model.previousPage(),
+									type: "button",
+									children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+								}),
+								/* @__PURE__ */ jsx("button", {
+									"aria-label": text("nextPage"),
+									"data-action": "next",
+									"data-slot": "data-table-pagination-action",
+									disabled: view.page.index >= view.page.count - 1,
+									"set:onclick": () => model.nextPage(),
+									type: "button",
+									children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+								}),
+								/* @__PURE__ */ jsx("button", {
+									"aria-label": text("lastPage"),
+									"data-action": "last",
+									"data-slot": "data-table-pagination-action",
+									disabled: view.page.index >= view.page.count - 1,
+									"set:onclick": () => model.lastPage(),
+									type: "button",
+									children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+								})
+							]
+						})
+					]
+				}) : null]
+			}) : null
+		] });
+	}
+};
+var safeRootAttrs = (attrs) => {
+	const result = { ...statefulRootAttrs(attrs) };
+	for (const name of [
+		"aria-label",
+		"aria-labelledby",
+		"attr:aria-label",
+		"attr:aria-labelledby",
+		"set:ariaLabel",
+		"set:ariaLabelledByElements"
+	]) delete result[name];
+	return result;
+};
+/** Native, Ajo-owned client DataTable powered by a private TanStack Table v9 model. */
+var DataTable = ({ children: _children, class: classes, columns, empty, getRowKey, label, labels, pagination, rows, search, selection, ...attrs }) => /* @__PURE__ */ jsx(DataTableRoot, {
+	...safeRootAttrs(attrs),
+	columns,
+	empty,
+	getRowKey,
+	label,
+	labels,
+	pagination,
+	rows,
+	search,
+	selection,
+	"attr:class": classes,
+	"attr:data-slot": "data-table"
+});
+//#endregion
+export { DataTable as t };