@optimum-intelligence/opti-ui 0.2.0 → 0.4.0

package/dist/components/data-table/useDataTable.js

@@ -0,0 +1,666 @@
+"use client";
+import { datePart, pad } from "../calendar/date-utils.js";
+import { normalizeText } from "../../utils/search.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+//#region src/components/data-table/useDataTable.ts
+var defaultLabels = {
+	search: "Search…",
+	clearSearch: "Clear search",
+	selectAll: "Select all",
+	selectRow: (label) => `Select ${label}`,
+	count: (count) => `${count} ${count === 1 ? "record" : "records"}`,
+	selected: (count) => `${count} selected`,
+	emptyTitle: "No records yet",
+	emptyDescription: "Records will appear here once added.",
+	noMatchTitle: "No matching records",
+	noMatchDescription: "Try a different search.",
+	loading: "Loading",
+	errorTitle: "Could not load records",
+	retry: "Try again",
+	filters: "Filters",
+	filterAll: "All",
+	clearFilters: "Clear filters",
+	actions: "Actions",
+	edit: "Edit",
+	save: "Save",
+	cancel: "Cancel",
+	delete: "Delete"
+};
+function useControlled(value, initial, onChange) {
+	const $ = c(5);
+	const [inner, setInner] = React.useState(initial);
+	let t0;
+	if ($[0] !== onChange) {
+		t0 = (next) => {
+			setInner(next);
+			onChange?.(next);
+		};
+		$[0] = onChange;
+		$[1] = t0;
+	} else t0 = $[1];
+	const set = t0;
+	const t1 = value === void 0 ? inner : value;
+	let t2;
+	if ($[2] !== set || $[3] !== t1) {
+		t2 = [t1, set];
+		$[2] = set;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+/** The value a column sorts, searches and filters by. */
+function getColumnValue(column, row) {
+	return column.accessor ? column.accessor(row) : row[column.id];
+}
+function isEmpty(value) {
+	return value === null || value === void 0 || value === "";
+}
+function hasValue(column) {
+	return column.accessor !== void 0 || column.cell === void 0;
+}
+/** A toggle filter without `match` reads the value as a flag; "No", "false" and "0" count as off. */
+function isOn(value) {
+	if (typeof value !== "string") return Boolean(value);
+	return ![
+		"",
+		"no",
+		"false",
+		"0"
+	].includes(value.trim().toLowerCase());
+}
+/** Local calendar day of a row's date, as `"2026-03-09"`. */
+function dayOf(value) {
+	if (isEmpty(value)) return null;
+	if (typeof value === "string" && datePart(value)) return datePart(value);
+	const date = value instanceof Date ? value : new Date(value);
+	if (Number.isNaN(date.getTime())) return null;
+	return `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+var WORD_CHARACTER = /[\p{L}\p{N}]/u;
+/** True when `term` occurs in `text` as a whole word (or run of words). */
+function hasWord(text, term) {
+	for (let from = text.indexOf(term); from !== -1; from = text.indexOf(term, from + 1)) {
+		const before = text[from - 1];
+		const after = text[from + term.length];
+		if (!(before && WORD_CHARACTER.test(before)) && !(after && WORD_CHARACTER.test(after))) return true;
+	}
+	return false;
+}
+/** Every term has to occur in one of the columns. */
+function matchesTerms(columns, row, terms) {
+	const values = columns.map((column) => ({
+		exact: column.searchMode === "exact",
+		text: normalizeText(getColumnValue(column, row))
+	}));
+	return terms.every((term) => values.some(({ exact, text }) => exact ? hasWord(text, term) : text.includes(term)));
+}
+function resolveFilter(filter, read, data, collator) {
+	const { id, label } = filter;
+	if (filter.type === "toggle") {
+		const match = filter.match ?? ((row) => isOn(read(row)));
+		return {
+			id,
+			label,
+			type: "toggle",
+			options: [],
+			test: (row) => match(row)
+		};
+	}
+	const get = filter.value ?? read;
+	if (filter.type === "dateRange") {
+		const { presets, min, max } = filter;
+		return {
+			id,
+			label,
+			type: "dateRange",
+			options: [],
+			presets,
+			min,
+			max,
+			test: (row, value) => {
+				const day = dayOf(get(row));
+				const range = value;
+				return day !== null && day >= range.start && day <= range.end;
+			}
+		};
+	}
+	const items = (row) => {
+		const value = get(row);
+		return (Array.isArray(value) ? value : [value]).filter((item) => !isEmpty(item)).map(String);
+	};
+	return {
+		id,
+		label,
+		type: "select",
+		options: filter.options ?? [...new Set(data.flatMap(items))].sort(collator.compare).map((value) => ({
+			value,
+			label: value
+		})),
+		test: (row, value) => items(row).includes(value)
+	};
+}
+/**
+* State and row processing of a `DataTable`, without any markup. Pass the
+* result to `DataTable.Root` to lay the parts out yourself, or read `rows`,
+* `filterValues` and the rest to drive something else (an export, a chart).
+*/
+function useDataTable(t0) {
+	const $ = c(146);
+	const { data, columns, mode: t1, total, loading: t2, error, onRetry, getRowId, locale, searchable: t3, search: searchProp, defaultSearch: t4, onSearchChange, searchDebounce, filter, filters: filtersProp, filterValues: filterValuesProp, defaultFilterValues, onFilterValuesChange, sort: sortProp, defaultSort: t5, onSortChange, paginated: t6, page: pageProp, onPageChange, pageSize: pageSizeProp, defaultPageSize: t7, onPageSizeChange, selection: selectionProp, onSelectionChange, onRowClick, rowLabel, rowActions, rowTone, rowProps, onRowSave, onRowDelete, labels } = t0;
+	const mode = t1 === void 0 ? "client" : t1;
+	const loading = t2 === void 0 ? false : t2;
+	const searchable = t3 === void 0 ? true : t3;
+	const defaultSearch = t4 === void 0 ? "" : t4;
+	const defaultSort = t5 === void 0 ? null : t5;
+	const paginated = t6 === void 0 ? true : t6;
+	const defaultPageSize = t7 === void 0 ? 10 : t7;
+	const [search, setSearchState] = useControlled(searchProp, defaultSearch, onSearchChange);
+	let t8;
+	if ($[0] !== defaultFilterValues) {
+		t8 = defaultFilterValues ?? {};
+		$[0] = defaultFilterValues;
+		$[1] = t8;
+	} else t8 = $[1];
+	const [filterValues, setFilterValues] = useControlled(filterValuesProp, t8, onFilterValuesChange);
+	const [sort, setSort] = useControlled(sortProp, defaultSort, onSortChange);
+	const [page, setPage] = useControlled(pageProp, 1, onPageChange);
+	const [pageSize, setPageSizeState] = useControlled(pageSizeProp, defaultPageSize, onPageSizeChange);
+	const [edit, setEdit] = React.useState(null);
+	const [saving, setSaving] = React.useState(false);
+	const server = mode === "server";
+	let activeFilters;
+	let currentPage;
+	let entries;
+	let filters;
+	let isSortable;
+	let matchCount;
+	let pageCount;
+	let pageRows;
+	let query;
+	let rows;
+	let selected;
+	let selection;
+	let t9;
+	let text;
+	if ($[2] !== columns || $[3] !== data || $[4] !== filter || $[5] !== filterValues || $[6] !== filtersProp || $[7] !== getRowId || $[8] !== labels || $[9] !== locale || $[10] !== page || $[11] !== pageSize || $[12] !== paginated || $[13] !== search || $[14] !== selectionProp || $[15] !== server || $[16] !== sort || $[17] !== total) {
+		const collator = new Intl.Collator(locale, {
+			numeric: true,
+			sensitivity: "base"
+		});
+		const count = labels?.count ?? defaultLabels.count;
+		let t10;
+		if ($[32] !== count) {
+			t10 = (matches, all) => React.createElement(React.Fragment, null, matches, " / ", count(all));
+			$[32] = count;
+			$[33] = t10;
+		} else t10 = $[33];
+		const t11 = labels?.noMatchDescription ?? "Try different filters, or clear them.";
+		let t12;
+		if ($[34] !== labels || $[35] !== t10 || $[36] !== t11) {
+			t12 = {
+				...defaultLabels,
+				filteredCount: t10,
+				noFilterMatchDescription: t11,
+				...labels
+			};
+			$[34] = labels;
+			$[35] = t10;
+			$[36] = t11;
+			$[37] = t12;
+		} else t12 = $[37];
+		text = t12;
+		filters = [...columns.flatMap((column) => {
+			if (!column.filter) return [];
+			const config = typeof column.filter === "string" ? { type: column.filter } : column.filter;
+			const label = ("label" in config ? config.label : void 0) ?? column.label ?? (typeof column.header === "string" ? column.header : column.id);
+			return [resolveFilter({
+				...config,
+				id: column.id,
+				label
+			}, (row) => getColumnValue(column, row), data, collator)];
+		}), ...(filtersProp ?? []).map((definition_0) => resolveFilter(definition_0, (row_0) => row_0[definition_0.id], data, collator))];
+		activeFilters = filters.filter((t13) => {
+			const { id } = t13;
+			return filterValues[id] !== void 0;
+		});
+		let t14;
+		if ($[38] !== getRowId) {
+			t14 = (row_1, index) => getRowId?.(row_1, index) ?? String(row_1.id ?? index);
+			$[38] = getRowId;
+			$[39] = t14;
+		} else t14 = $[39];
+		const idOf = t14;
+		let t15;
+		if ($[40] !== idOf) {
+			t15 = (row_2, index_0) => ({
+				row: row_2,
+				id: idOf(row_2, index_0)
+			});
+			$[40] = idOf;
+			$[41] = t15;
+		} else t15 = $[41];
+		entries = data.map(t15);
+		rows = entries;
+		if (!server && activeFilters.length) rows = rows.filter((t16) => {
+			const { row: row_3 } = t16;
+			return activeFilters.every((t17) => {
+				const { id: id_0, test } = t17;
+				return test(row_3, filterValues[id_0]);
+			});
+		});
+		query = search.trim();
+		if (!server && query) {
+			const searchColumns = columns.filter(_temp);
+			const terms = normalizeText(query).split(/\s+/).filter(Boolean);
+			rows = rows.filter((t16) => {
+				const { row: row_4 } = t16;
+				return filter ? filter(row_4, search) : matchesTerms(searchColumns, row_4, terms);
+			});
+		}
+		isSortable = _temp2;
+		const sortColumn = sort && columns.find((candidate) => candidate.id === sort.id);
+		if (!server && sort && sortColumn) {
+			const direction = sort.direction === "asc" ? 1 : -1;
+			rows = [...rows].sort((a, b) => {
+				if (sortColumn.compare) return direction * sortColumn.compare(a.row, b.row);
+				const [av, bv] = [getColumnValue(sortColumn, a.row), getColumnValue(sortColumn, b.row)];
+				if (isEmpty(av) || isEmpty(bv)) return Number(isEmpty(av)) - Number(isEmpty(bv));
+				if (typeof av === "number" && typeof bv === "number") return direction * (av - bv);
+				if (av instanceof Date && bv instanceof Date) return direction * (av.getTime() - bv.getTime());
+				if (typeof av === "boolean" && typeof bv === "boolean") return direction * (Number(av) - Number(bv));
+				return direction * collator.compare(String(av), String(bv));
+			});
+		}
+		matchCount = server ? total ?? rows.length : rows.length;
+		pageCount = Math.max(1, Math.ceil(matchCount / pageSize));
+		currentPage = Math.min(Math.max(1, page), pageCount);
+		pageRows = paginated && !server ? rows.slice((currentPage - 1) * pageSize, currentPage * pageSize) : rows;
+		let t16;
+		if ($[42] !== selectionProp) {
+			t16 = selectionProp ?? [];
+			$[42] = selectionProp;
+			$[43] = t16;
+		} else t16 = $[43];
+		selection = t16;
+		let t17;
+		if ($[44] !== selection) {
+			t17 = new Set(selection);
+			$[44] = selection;
+			$[45] = t17;
+		} else t17 = $[45];
+		selected = t17;
+		let t18;
+		if ($[46] !== selected) {
+			t18 = (t19) => {
+				const { id: id_1 } = t19;
+				return selected.has(id_1);
+			};
+			$[46] = selected;
+			$[47] = t18;
+		} else t18 = $[47];
+		t9 = rows.filter(t18);
+		$[2] = columns;
+		$[3] = data;
+		$[4] = filter;
+		$[5] = filterValues;
+		$[6] = filtersProp;
+		$[7] = getRowId;
+		$[8] = labels;
+		$[9] = locale;
+		$[10] = page;
+		$[11] = pageSize;
+		$[12] = paginated;
+		$[13] = search;
+		$[14] = selectionProp;
+		$[15] = server;
+		$[16] = sort;
+		$[17] = total;
+		$[18] = activeFilters;
+		$[19] = currentPage;
+		$[20] = entries;
+		$[21] = filters;
+		$[22] = isSortable;
+		$[23] = matchCount;
+		$[24] = pageCount;
+		$[25] = pageRows;
+		$[26] = query;
+		$[27] = rows;
+		$[28] = selected;
+		$[29] = selection;
+		$[30] = t9;
+		$[31] = text;
+	} else {
+		activeFilters = $[18];
+		currentPage = $[19];
+		entries = $[20];
+		filters = $[21];
+		isSortable = $[22];
+		matchCount = $[23];
+		pageCount = $[24];
+		pageRows = $[25];
+		query = $[26];
+		rows = $[27];
+		selected = $[28];
+		selection = $[29];
+		t9 = $[30];
+		text = $[31];
+	}
+	const selectedInView = t9.length;
+	const allSelected = rows.length > 0 && selectedInView === rows.length;
+	let t10;
+	if ($[48] !== setPage || $[49] !== setSearchState) {
+		t10 = (next) => {
+			setSearchState(next);
+			setPage(1);
+		};
+		$[48] = setPage;
+		$[49] = setSearchState;
+		$[50] = t10;
+	} else t10 = $[50];
+	const setSearch = t10;
+	let t11;
+	if ($[51] !== setFilterValues || $[52] !== setPage) {
+		t11 = (next_0) => {
+			setFilterValues(next_0);
+			setPage(1);
+		};
+		$[51] = setFilterValues;
+		$[52] = setPage;
+		$[53] = t11;
+	} else t11 = $[53];
+	const changeFilters = t11;
+	let t12;
+	if ($[54] !== changeFilters || $[55] !== filterValues) {
+		t12 = (id_2, value) => {
+			const others = Object.entries(filterValues).filter((t13) => {
+				const [key] = t13;
+				return key !== id_2;
+			});
+			changeFilters(Object.fromEntries(value === void 0 ? others : [...others, [id_2, value]]));
+		};
+		$[54] = changeFilters;
+		$[55] = filterValues;
+		$[56] = t12;
+	} else t12 = $[56];
+	const setFilterValue = t12;
+	let t13;
+	if ($[57] !== edit || $[58] !== entries || $[59] !== onRowSave || $[60] !== saving) {
+		t13 = () => {
+			const entry = edit && entries.find((t14) => {
+				const { id: id_3 } = t14;
+				return id_3 === edit.id;
+			});
+			if (!entry || !onRowSave || saving) return;
+			setSaving(true);
+			Promise.resolve().then(() => onRowSave({
+				...entry.row,
+				...edit.draft
+			}, entry.row)).then(() => setEdit(null), _temp3).then(() => setSaving(false));
+		};
+		$[57] = edit;
+		$[58] = entries;
+		$[59] = onRowSave;
+		$[60] = saving;
+		$[61] = t13;
+	} else t13 = $[61];
+	const saveEdit = t13;
+	let t14;
+	if ($[62] !== columns) {
+		t14 = columns.filter(_temp4);
+		$[62] = columns;
+		$[63] = t14;
+	} else t14 = $[63];
+	const t15 = rows;
+	const t16 = server ? matchCount : data.length;
+	const t17 = Boolean(query) || activeFilters.length > 0;
+	let t18;
+	if ($[64] !== changeFilters || $[65] !== setSearchState) {
+		t18 = () => {
+			setSearchState("");
+			changeFilters({});
+		};
+		$[64] = changeFilters;
+		$[65] = setSearchState;
+		$[66] = t18;
+	} else t18 = $[66];
+	const t19 = loading && !rows.length && !error;
+	const t20 = searchDebounce ?? (server ? 300 : 0);
+	let t21;
+	if ($[67] !== changeFilters) {
+		t21 = () => changeFilters({});
+		$[67] = changeFilters;
+		$[68] = t21;
+	} else t21 = $[68];
+	const t22 = activeFilters.length;
+	let t23;
+	if ($[69] !== setSort || $[70] !== sort) {
+		t23 = (id_4) => setSort(sort?.id !== id_4 ? {
+			id: id_4,
+			direction: "asc"
+		} : sort.direction === "asc" ? {
+			id: id_4,
+			direction: "desc"
+		} : null);
+		$[69] = setSort;
+		$[70] = sort;
+		$[71] = t23;
+	} else t23 = $[71];
+	let t24;
+	if ($[72] !== setPage || $[73] !== setPageSizeState) {
+		t24 = (size) => {
+			setPageSizeState(size);
+			setPage(1);
+		};
+		$[72] = setPage;
+		$[73] = setPageSizeState;
+		$[74] = t24;
+	} else t24 = $[74];
+	const t25 = Boolean(onSelectionChange);
+	let t26;
+	if ($[75] !== selected) {
+		t26 = (id_5) => selected.has(id_5);
+		$[75] = selected;
+		$[76] = t26;
+	} else t26 = $[76];
+	let t27;
+	if ($[77] !== onSelectionChange || $[78] !== selection) {
+		t27 = (id_6, checked) => onSelectionChange?.(checked ? [...selection.filter((item) => item !== id_6), id_6] : selection.filter((item_0) => item_0 !== id_6));
+		$[77] = onSelectionChange;
+		$[78] = selection;
+		$[79] = t27;
+	} else t27 = $[79];
+	let t28;
+	if ($[80] !== onSelectionChange || $[81] !== rows || $[82] !== selection) {
+		t28 = (checked_0) => {
+			const ids = new Set(rows.map(_temp5));
+			const kept = selection.filter((id_8) => !ids.has(id_8));
+			onSelectionChange?.(checked_0 ? [...kept, ...ids] : kept);
+		};
+		$[80] = onSelectionChange;
+		$[81] = rows;
+		$[82] = selection;
+		$[83] = t28;
+	} else t28 = $[83];
+	const t29 = selectedInView > 0 && !allSelected;
+	const t30 = Boolean(onRowSave);
+	const t31 = Boolean(onRowDelete);
+	const t32 = edit?.id ?? null;
+	let t33;
+	let t34;
+	if ($[84] === Symbol.for("react.memo_cache_sentinel")) {
+		t33 = (id_9) => setEdit({
+			id: id_9,
+			draft: {}
+		});
+		t34 = () => setEdit(null);
+		$[84] = t33;
+		$[85] = t34;
+	} else {
+		t33 = $[84];
+		t34 = $[85];
+	}
+	let t35;
+	if ($[86] !== edit) {
+		t35 = (row_5, field) => edit && field in edit.draft ? edit.draft[field] : row_5[field];
+		$[86] = edit;
+		$[87] = t35;
+	} else t35 = $[87];
+	let t36;
+	if ($[88] === Symbol.for("react.memo_cache_sentinel")) {
+		t36 = (field_0, value_0) => setEdit((current) => current && {
+			...current,
+			draft: {
+				...current.draft,
+				[field_0]: value_0
+			}
+		});
+		$[88] = t36;
+	} else t36 = $[88];
+	let t37;
+	if ($[89] !== onRowDelete) {
+		t37 = (row_6) => {
+			onRowDelete?.(row_6);
+			setEdit(null);
+		};
+		$[89] = onRowDelete;
+		$[90] = t37;
+	} else t37 = $[90];
+	let t38;
+	if ($[91] !== activeFilters.length || $[92] !== allSelected || $[93] !== columns || $[94] !== currentPage || $[95] !== entries || $[96] !== error || $[97] !== filterValues || $[98] !== filters || $[99] !== isSortable || $[100] !== loading || $[101] !== locale || $[102] !== matchCount || $[103] !== mode || $[104] !== onRetry || $[105] !== onRowClick || $[106] !== pageCount || $[107] !== pageRows || $[108] !== pageSize || $[109] !== paginated || $[110] !== rowActions || $[111] !== rowLabel || $[112] !== rowProps || $[113] !== rowTone || $[114] !== rows || $[115] !== saveEdit || $[116] !== saving || $[117] !== search || $[118] !== searchable || $[119] !== selection || $[120] !== setFilterValue || $[121] !== setPage || $[122] !== setSearch || $[123] !== setSort || $[124] !== sort || $[125] !== t14 || $[126] !== t16 || $[127] !== t17 || $[128] !== t18 || $[129] !== t19 || $[130] !== t20 || $[131] !== t21 || $[132] !== t23 || $[133] !== t24 || $[134] !== t25 || $[135] !== t26 || $[136] !== t27 || $[137] !== t28 || $[138] !== t29 || $[139] !== t30 || $[140] !== t31 || $[141] !== t32 || $[142] !== t35 || $[143] !== t37 || $[144] !== text) {
+		t38 = {
+			mode,
+			columns,
+			visibleColumns: t14,
+			labels: text,
+			locale,
+			allRows: entries,
+			rows: t15,
+			pageRows,
+			count: matchCount,
+			totalCount: t16,
+			filtered: t17,
+			reset: t18,
+			loading,
+			pending: t19,
+			error,
+			onRetry,
+			searchable,
+			search,
+			setSearch,
+			searchDebounce: t20,
+			filters,
+			filterValues,
+			setFilterValue,
+			clearFilters: t21,
+			activeFilterCount: t22,
+			sort,
+			setSort,
+			toggleSort: t23,
+			isSortable,
+			paginated,
+			page: currentPage,
+			pageCount,
+			pageSize,
+			setPage,
+			setPageSize: t24,
+			selectable: t25,
+			selection,
+			isSelected: t26,
+			toggleRow: t27,
+			toggleAll: t28,
+			allSelected,
+			someSelected: t29,
+			editable: t30,
+			deletable: t31,
+			editingId: t32,
+			saving,
+			startEdit: t33,
+			cancelEdit: t34,
+			editValue: t35,
+			setEditValue: t36,
+			saveEdit,
+			deleteRow: t37,
+			onRowClick,
+			rowLabel,
+			rowActions,
+			rowTone,
+			rowProps
+		};
+		$[91] = activeFilters.length;
+		$[92] = allSelected;
+		$[93] = columns;
+		$[94] = currentPage;
+		$[95] = entries;
+		$[96] = error;
+		$[97] = filterValues;
+		$[98] = filters;
+		$[99] = isSortable;
+		$[100] = loading;
+		$[101] = locale;
+		$[102] = matchCount;
+		$[103] = mode;
+		$[104] = onRetry;
+		$[105] = onRowClick;
+		$[106] = pageCount;
+		$[107] = pageRows;
+		$[108] = pageSize;
+		$[109] = paginated;
+		$[110] = rowActions;
+		$[111] = rowLabel;
+		$[112] = rowProps;
+		$[113] = rowTone;
+		$[114] = rows;
+		$[115] = saveEdit;
+		$[116] = saving;
+		$[117] = search;
+		$[118] = searchable;
+		$[119] = selection;
+		$[120] = setFilterValue;
+		$[121] = setPage;
+		$[122] = setSearch;
+		$[123] = setSort;
+		$[124] = sort;
+		$[125] = t14;
+		$[126] = t16;
+		$[127] = t17;
+		$[128] = t18;
+		$[129] = t19;
+		$[130] = t20;
+		$[131] = t21;
+		$[132] = t23;
+		$[133] = t24;
+		$[134] = t25;
+		$[135] = t26;
+		$[136] = t27;
+		$[137] = t28;
+		$[138] = t29;
+		$[139] = t30;
+		$[140] = t31;
+		$[141] = t32;
+		$[142] = t35;
+		$[143] = t37;
+		$[144] = text;
+		$[145] = t38;
+	} else t38 = $[145];
+	return t38;
+}
+function _temp5(t0) {
+	const { id: id_7 } = t0;
+	return id_7;
+}
+function _temp4(column_2) {
+	return !column_2.hidden;
+}
+function _temp3() {}
+function _temp2(column_1) {
+	return column_1.sortable ?? hasValue(column_1);
+}
+function _temp(column_0) {
+	return column_0.searchable ?? hasValue(column_0);
+}
+//#endregion
+export { getColumnValue, useDataTable };
+
+//# sourceMappingURL=useDataTable.js.map