@optimum-intelligence/opti-ui 0.2.0 → 0.3.0

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

@@ -1,444 +1,478 @@
 "use client";
 import { cx } from "../../utils/cx.js";
-import { Skeleton } from "../skeleton/Skeleton.js";
+import { createPrimitive } from "../../utils/primitive.js";
 import { Spinner } from "../spinner/Spinner.js";
-import { Button } from "../button/Button.js";
-import { Checkbox } from "../choice/Choice.js";
 import { SearchInput } from "../search-input/SearchInput.js";
-import { matchesQuery } from "../../utils/search.js";
 import { Pagination } from "../pagination/Pagination.js";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/Table.js";
-import { EmptyState } from "../empty-state/EmptyState.js";
+import { DataTableContext, useDataTableContext } from "./context.js";
+import { useDataTable } from "./useDataTable.js";
+import { DataTableContent } from "./DataTableContent.js";
+import { DataTableFilter, DataTableFilters } from "./DataTableFilters.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-table/DataTable.tsx
-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"
-};
-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);
+/** Provides a table to the parts inside it. */
+function DataTableRoot(t0) {
+	const $ = c(15);
+	let className;
+	let props;
+	let ref;
+	let table;
+	if ($[0] !== t0) {
+		({table, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = table;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		table = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = cx("oui-data-table", className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	const t2 = table.loading ? table.rows.length ? "refresh" : "initial" : void 0;
+	let t3;
+	if ($[7] !== props || $[8] !== ref || $[9] !== t1 || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			ref,
+			className: t1,
+			"data-loading": t2,
+			...props
+		});
+		$[7] = props;
+		$[8] = ref;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== t3 || $[13] !== table) {
+		t4 = /* @__PURE__ */ jsx(DataTableContext.Provider, {
+			value: table,
+			children: t3
+		});
+		$[12] = t3;
+		$[13] = table;
+		$[14] = t4;
+	} else t4 = $[14];
+	return t4;
+}
+var DataTableToolbar = createPrimitive("div", "oui-data-table__toolbar", "DataTableToolbar");
+var DataTableActions = createPrimitive("div", "oui-data-table__actions", "DataTableActions");
+/** Search box of the table. Typing applies after the table's `searchDebounce`; clearing applies at once. */
+function DataTableSearch(t0) {
+	const $ = c(26);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const table = useDataTableContext();
+	const { search, searchDebounce, labels: text } = table;
+	const [draft, setDraft] = React.useState(search);
+	const [seen, setSeen] = React.useState(search);
+	const [sent, setSent] = React.useState(search);
+	if (seen !== search) {
+		setSeen(search);
+		if (search !== sent) {
+			setSent(search);
+			setDraft(search);
+		}
+	}
+	let t1;
+	if ($[3] !== table) {
+		t1 = (next) => {
+			setSent(next);
+			table.setSearch(next);
 		};
-		$[0] = onChange;
-		$[1] = t0;
-	} else t0 = $[1];
-	const set = t0;
-	const t1 = value === void 0 ? inner : value;
+		$[3] = table;
+		$[4] = t1;
+	} else t1 = $[4];
+	const commit = t1;
 	let t2;
-	if ($[2] !== set || $[3] !== t1) {
-		t2 = [t1, set];
-		$[2] = set;
-		$[3] = t1;
-		$[4] = t2;
-	} else t2 = $[4];
-	return t2;
-}
-function valueOf(column, row) {
-	return column.accessor ? column.accessor(row) : row[column.id];
-}
-function isEmpty(value) {
-	return value === null || value === void 0 || value === "";
-}
-function compareValues(a, b) {
-	if (typeof a === "number" && typeof b === "number") return a - b;
-	if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
-	if (typeof a === "boolean" && typeof b === "boolean") return Number(a) - Number(b);
-	return String(a).localeCompare(String(b), void 0, {
-		numeric: true,
-		sensitivity: "base"
-	});
+	if ($[5] !== commit || $[6] !== draft || $[7] !== searchDebounce || $[8] !== sent) {
+		t2 = () => {
+			if (draft === sent) return;
+			const timer = window.setTimeout(() => commit(draft), searchDebounce);
+			return () => window.clearTimeout(timer);
+		};
+		$[5] = commit;
+		$[6] = draft;
+		$[7] = searchDebounce;
+		$[8] = sent;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== draft || $[11] !== searchDebounce || $[12] !== sent) {
+		t3 = [
+			draft,
+			sent,
+			searchDebounce
+		];
+		$[10] = draft;
+		$[11] = searchDebounce;
+		$[12] = sent;
+		$[13] = t3;
+	} else t3 = $[13];
+	React.useEffect(t2, t3);
+	let t4;
+	if ($[14] !== commit || $[15] !== searchDebounce) {
+		t4 = (next_0) => {
+			setDraft(next_0);
+			if (!searchDebounce || !next_0) commit(next_0);
+		};
+		$[14] = commit;
+		$[15] = searchDebounce;
+		$[16] = t4;
+	} else t4 = $[16];
+	const change = t4;
+	let t5;
+	if ($[17] !== className) {
+		t5 = cx("oui-data-table__search", className);
+		$[17] = className;
+		$[18] = t5;
+	} else t5 = $[18];
+	let t6;
+	if ($[19] !== change || $[20] !== draft || $[21] !== props || $[22] !== t5 || $[23] !== text.clearSearch || $[24] !== text.search) {
+		t6 = /* @__PURE__ */ jsx(SearchInput, {
+			className: t5,
+			"aria-label": text.search,
+			placeholder: text.search,
+			clearLabel: text.clearSearch,
+			...props,
+			value: draft,
+			onValueChange: change
+		});
+		$[19] = change;
+		$[20] = draft;
+		$[21] = props;
+		$[22] = t5;
+		$[23] = text.clearSearch;
+		$[24] = text.search;
+		$[25] = t6;
+	} else t6 = $[25];
+	return t6;
 }
-var INTERACTIVE = "a, button, input, select, textarea, label, [role=\"checkbox\"], [role=\"button\"]";
-/**
-* Table with built-in search, sorting, pagination and row selection. Every
-* piece of state works uncontrolled or controlled (`search` / `sort` / `page` /
-* `selection`), e.g. to persist it in the URL. With `mode="server"` the same
-* state drives an API instead: pass the fetched page as `data`, plus `total`
-* and `loading`. For custom layouts compose `Table` and `Pagination`.
-*/
-function DataTable(t0) {
-	const $ = c(66);
-	const { data, columns, mode: t1, total, loading, error, onRetry, getRowId, searchable: t2, search: searchProp, defaultSearch: t3, onSearchChange, filter, sort: sortProp, defaultSort: t4, onSortChange, paginated: t5, page: pageProp, onPageChange, pageSize: pageSizeProp, defaultPageSize: t6, onPageSizeChange, pageSizeOptions, selection, onSelectionChange, onRowClick, rowLabel, toolbar, empty, labels, density, striped, stickyHeader, className, tableProps } = t0;
-	const mode = t1 === void 0 ? "client" : t1;
-	const searchable = t2 === void 0 ? true : t2;
-	const defaultSearch = t3 === void 0 ? "" : t3;
-	const defaultSort = t4 === void 0 ? null : t4;
-	const paginated = t5 === void 0 ? true : t5;
-	const defaultPageSize = t6 === void 0 ? 10 : t6;
-	const text = {
-		...defaultLabels,
-		...labels
-	};
-	const [search, setSearch] = useControlled(searchProp, defaultSearch, onSearchChange);
-	const [sort, setSort] = useControlled(sortProp, defaultSort, onSortChange);
-	const [page, setPage] = useControlled(pageProp, 1, onPageChange);
-	const [pageSize, setPageSize] = useControlled(pageSizeProp, defaultPageSize, onPageSizeChange);
-	const server = mode === "server";
-	const selectable = Boolean(onSelectionChange);
-	let t7;
-	if ($[0] !== selection) {
-		t7 = new Set(selection);
-		$[0] = selection;
-		$[1] = t7;
-	} else t7 = $[1];
-	const selected = t7;
-	const sortable = _temp;
-	let t8;
-	if ($[2] !== getRowId) {
-		t8 = (row, index) => getRowId?.(row, index) ?? String(row.id ?? index);
-		$[2] = getRowId;
-		$[3] = t8;
-	} else t8 = $[3];
-	const idOf = t8;
-	let t9;
-	if ($[4] !== idOf) {
-		t9 = (row_0, index_0) => ({
-			row: row_0,
-			id: idOf(row_0, index_0)
+/** Row count, or the number of selected rows, with a spinner while loading. */
+function DataTableSummary(t0) {
+	const $ = c(24);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const table = useDataTableContext();
+	const text = table.labels;
+	let t1;
+	if ($[3] !== table.selection) {
+		t1 = new Set(table.selection);
+		$[3] = table.selection;
+		$[4] = t1;
+	} else t1 = $[4];
+	const selected = t1.size;
+	let t2;
+	if ($[5] !== table.loading || $[6] !== text) {
+		t2 = table.loading && /* @__PURE__ */ jsx(Spinner, {
+			className: "oui-data-table__spinner",
+			label: text.loading
 		});
-		$[4] = idOf;
-		$[5] = t9;
-	} else t9 = $[5];
-	let rows = data.map(t9);
-	if (!server && search.trim()) {
-		const searchColumns = columns.filter(_temp2);
-		rows = rows.filter((t10) => {
-			const { row: row_1 } = t10;
-			return filter ? filter(row_1, search) : matchesQuery(searchColumns.map((column_1) => valueOf(column_1, row_1) ?? "").join(" "), search);
+		$[5] = table.loading;
+		$[6] = text;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== className) {
+		t3 = cx("oui-data-table__summary", className);
+		$[8] = className;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== selected || $[11] !== table.count || $[12] !== table.pending || $[13] !== table.selectable || $[14] !== table.totalCount || $[15] !== text) {
+		t4 = table.selectable && selected ? text.selected(selected) : table.pending ? null : table.count !== table.totalCount ? text.filteredCount(table.count, table.totalCount) : text.count(table.count);
+		$[10] = selected;
+		$[11] = table.count;
+		$[12] = table.pending;
+		$[13] = table.selectable;
+		$[14] = table.totalCount;
+		$[15] = text;
+		$[16] = t4;
+	} else t4 = $[16];
+	let t5;
+	if ($[17] !== props || $[18] !== t3 || $[19] !== t4) {
+		t5 = /* @__PURE__ */ jsx("span", {
+			className: t3,
+			"aria-live": "polite",
+			...props,
+			children: t4
 		});
+		$[17] = props;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = t5;
+	} else t5 = $[20];
+	let t6;
+	if ($[21] !== t2 || $[22] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t5] });
+		$[21] = t2;
+		$[22] = t5;
+		$[23] = t6;
+	} else t6 = $[23];
+	return t6;
+}
+/** Page navigation of the table. Renders nothing when there are no rows, or the table is not paginated. */
+function DataTablePagination(t0) {
+	const $ = c(14);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
 	}
-	let t10;
-	if ($[6] !== columns || $[7] !== sort) {
-		t10 = sort && columns.find((candidate) => candidate.id === sort.id);
-		$[6] = columns;
-		$[7] = sort;
-		$[8] = t10;
-	} else t10 = $[8];
-	const sortColumn = t10;
-	if (!server && sort && sortColumn) {
-		const direction = sort.direction === "asc" ? 1 : -1;
-		let t11;
-		if ($[9] !== direction || $[10] !== sortColumn) {
-			t11 = (a, b) => {
-				if (sortColumn.compare) return direction * sortColumn.compare(a.row, b.row);
-				const [av, bv] = [valueOf(sortColumn, a.row), valueOf(sortColumn, b.row)];
-				if (isEmpty(av) || isEmpty(bv)) return Number(isEmpty(av)) - Number(isEmpty(bv));
-				return direction * compareValues(av, bv);
-			};
-			$[9] = direction;
-			$[10] = sortColumn;
-			$[11] = t11;
-		} else t11 = $[11];
-		rows = [...rows].sort(t11);
+	const table = useDataTableContext();
+	if (!table.paginated || table.count <= 0 || table.error) return null;
+	let t1;
+	if ($[3] !== className) {
+		t1 = cx("oui-data-table__pagination", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1 || $[7] !== table.count || $[8] !== table.labels || $[9] !== table.page || $[10] !== table.pageSize || $[11] !== table.setPage || $[12] !== table.setPageSize) {
+		t2 = /* @__PURE__ */ jsx(Pagination, {
+			className: t1,
+			variant: "simple",
+			labels: table.labels,
+			...props,
+			page: table.page,
+			pageSize: table.pageSize,
+			total: table.count,
+			onPageChange: table.setPage,
+			onPageSizeChange: table.setPageSize
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = table.count;
+		$[8] = table.labels;
+		$[9] = table.page;
+		$[10] = table.pageSize;
+		$[11] = table.setPage;
+		$[12] = table.setPageSize;
+		$[13] = t2;
+	} else t2 = $[13];
+	return t2;
+}
+function DataTableComponent(t0) {
+	const $ = c(51);
+	let className;
+	let controlSize;
+	let density;
+	let empty;
+	let layout;
+	let maxHeight;
+	let onEndReached;
+	let options;
+	let pageSizeOptions;
+	let stickyHeader;
+	let striped;
+	let tableProps;
+	let toolbar;
+	let virtualized;
+	if ($[0] !== t0) {
+		({density, striped, stickyHeader, layout, maxHeight, virtualized, onEndReached, empty, tableProps, pageSizeOptions, controlSize, toolbar, className, ...options} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = controlSize;
+		$[3] = density;
+		$[4] = empty;
+		$[5] = layout;
+		$[6] = maxHeight;
+		$[7] = onEndReached;
+		$[8] = options;
+		$[9] = pageSizeOptions;
+		$[10] = stickyHeader;
+		$[11] = striped;
+		$[12] = tableProps;
+		$[13] = toolbar;
+		$[14] = virtualized;
+	} else {
+		className = $[1];
+		controlSize = $[2];
+		density = $[3];
+		empty = $[4];
+		layout = $[5];
+		maxHeight = $[6];
+		onEndReached = $[7];
+		options = $[8];
+		pageSizeOptions = $[9];
+		stickyHeader = $[10];
+		striped = $[11];
+		tableProps = $[12];
+		toolbar = $[13];
+		virtualized = $[14];
 	}
-	const count = server ? total ?? rows.length : rows.length;
-	const pageCount = Math.max(1, Math.ceil(count / pageSize));
-	const currentPage = Math.min(Math.max(1, page), pageCount);
-	const visible = paginated && !server ? rows.slice((currentPage - 1) * pageSize, currentPage * pageSize) : rows;
-	let t11;
-	if ($[12] !== data.length || $[13] !== search || $[14] !== server) {
-		t11 = server ? Boolean(search.trim()) : data.length > 0;
-		$[12] = data.length;
-		$[13] = search;
-		$[14] = server;
-		$[15] = t11;
-	} else t11 = $[15];
-	const filtered = t11;
-	const placeholders = loading && !rows.length && !error ? Math.min(paginated ? pageSize : 5, 10) : 0;
-	let t12;
-	if ($[16] !== selected) {
-		t12 = (t13) => {
-			const { id } = t13;
-			return selected.has(id);
-		};
-		$[16] = selected;
-		$[17] = t12;
-	} else t12 = $[17];
-	const selectedInView = rows.filter(t12).length;
-	const allSelected = rows.length > 0 && selectedInView === rows.length;
-	const toggleAll = (checked) => {
-		const ids = new Set(rows.map(_temp3));
-		const kept = (selection ?? []).filter((id_1) => !ids.has(id_1));
-		onSelectionChange?.(checked ? [...kept, ...ids] : kept);
-	};
-	let t13;
-	if ($[18] !== setSort || $[19] !== sort) {
-		t13 = (id_2) => setSort(sort?.id !== id_2 ? {
-			id: id_2,
-			direction: "asc"
-		} : sort.direction === "asc" ? {
-			id: id_2,
-			direction: "desc"
-		} : null);
-		$[18] = setSort;
-		$[19] = sort;
-		$[20] = t13;
-	} else t13 = $[20];
-	const toggleSort = t13;
-	let t14;
-	if ($[21] !== setPage || $[22] !== setSearch) {
-		t14 = (next) => {
-			setSearch(next);
-			setPage(1);
+	const t1 = options.paginated ?? !virtualized;
+	let t2;
+	if ($[15] !== options || $[16] !== t1) {
+		t2 = {
+			...options,
+			paginated: t1
 		};
-		$[21] = setPage;
-		$[22] = setSearch;
-		$[23] = t14;
-	} else t14 = $[23];
-	const changeSearch = t14;
-	const extra = typeof toolbar === "function" ? toolbar({
-		rows: rows.map(_temp4),
-		selection: selection ?? []
-	}) : toolbar;
-	let t15;
-	if ($[24] !== className) {
-		t15 = cx("oui-data-table", className);
-		$[24] = className;
-		$[25] = t15;
-	} else t15 = $[25];
-	const T0 = Table;
-	const t16 = loading || void 0;
-	const t17 = selectable && /* @__PURE__ */ jsx(TableHead, {
-		className: "oui-data-table__check",
-		children: /* @__PURE__ */ jsx(Checkbox, {
-			size: "sm",
-			"aria-label": text.selectAll,
-			checked: allSelected,
-			indeterminate: selectedInView > 0 && !allSelected,
-			disabled: !rows.length,
-			onCheckedChange: (checked_0) => toggleAll(checked_0)
-		})
-	});
-	let t18;
-	if ($[26] !== columns || $[27] !== sort || $[28] !== toggleSort) {
-		let t19;
-		if ($[30] !== sort || $[31] !== toggleSort) {
-			t19 = (column_2) => /* @__PURE__ */ jsx(TableHead, {
-				align: column_2.align ?? (column_2.numeric ? "end" : "start"),
-				style: column_2.width !== void 0 ? { width: column_2.width } : void 0,
-				sort: sortable(column_2) ? sort?.id === column_2.id ? sort.direction : false : void 0,
-				onSort: () => toggleSort(column_2.id),
-				children: column_2.header
-			}, column_2.id);
-			$[30] = sort;
-			$[31] = toggleSort;
-			$[32] = t19;
-		} else t19 = $[32];
-		t18 = columns.map(t19);
-		$[26] = columns;
-		$[27] = sort;
-		$[28] = toggleSort;
-		$[29] = t18;
-	} else t18 = $[29];
-	let t19;
-	if ($[33] !== t17 || $[34] !== t18) {
-		t19 = /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [t17, t18] }) });
-		$[33] = t17;
-		$[34] = t18;
-		$[35] = t19;
-	} else t19 = $[35];
-	const T1 = TableBody;
-	let t20;
-	if ($[36] !== columns || $[37] !== placeholders || $[38] !== selectable) {
-		let t21;
-		if ($[40] !== columns || $[41] !== selectable) {
-			t21 = (_, index_1) => /* @__PURE__ */ jsxs(TableRow, {
-				"aria-hidden": true,
-				children: [selectable && /* @__PURE__ */ jsx(TableCell, { className: "oui-data-table__check" }), columns.map((column_3, position) => /* @__PURE__ */ jsx(TableCell, {
-					align: column_3.align,
-					numeric: column_3.numeric,
-					children: /* @__PURE__ */ jsx(Skeleton, {
-						className: "oui-data-table__skeleton",
-						width: `${45 + (index_1 * 3 + position * 5) % 7 * 8}%`
-					})
-				}, column_3.id))]
-			}, index_1);
-			$[40] = columns;
-			$[41] = selectable;
-			$[42] = t21;
-		} else t21 = $[42];
-		t20 = Array.from({ length: placeholders }, t21);
-		$[36] = columns;
-		$[37] = placeholders;
-		$[38] = selectable;
-		$[39] = t20;
-	} else t20 = $[39];
-	const t21 = !error && visible.map((t22) => {
-		const { row: row_3, id: id_3 } = t22;
-		const isSelected = selected.has(id_3);
-		return /* @__PURE__ */ jsxs(TableRow, {
-			"data-selected": isSelected || void 0,
-			"data-clickable": onRowClick ? "" : void 0,
-			tabIndex: onRowClick ? 0 : void 0,
-			"aria-label": onRowClick ? rowLabel?.(row_3) : void 0,
-			onClick: (event) => {
-				if (!onRowClick || event.ctrlKey || event.metaKey) return;
-				if (event.target.closest(INTERACTIVE)) return;
-				onRowClick(row_3);
-			},
-			onKeyDown: (event_0) => {
-				if (onRowClick && event_0.target === event_0.currentTarget && event_0.key === "Enter") onRowClick(row_3);
-			},
-			children: [selectable && /* @__PURE__ */ jsx(TableCell, {
-				className: "oui-data-table__check",
-				children: /* @__PURE__ */ jsx(Checkbox, {
-					size: "sm",
-					"aria-label": text.selectRow(rowLabel?.(row_3) ?? id_3),
-					checked: isSelected,
-					onCheckedChange: (checked_1) => onSelectionChange?.(checked_1 ? [...selection ?? [], id_3] : (selection ?? []).filter((item) => item !== id_3))
-				})
-			}), columns.map((column_4) => {
-				const value = column_4.cell ? column_4.cell(row_3) : valueOf(column_4, row_3);
-				return /* @__PURE__ */ jsx(TableCell, {
-					align: column_4.align,
-					numeric: column_4.numeric,
-					children: column_4.cell || React.isValidElement(value) ? value : isEmpty(value) ? "—" : String(value)
-				}, column_4.id);
-			})]
-		}, id_3);
-	});
-	let t23;
-	if ($[43] !== T1 || $[44] !== t20 || $[45] !== t21) {
-		t23 = /* @__PURE__ */ jsxs(T1, { children: [t20, t21] });
-		$[43] = T1;
-		$[44] = t20;
-		$[45] = t21;
-		$[46] = t23;
-	} else t23 = $[46];
-	let t24;
-	if ($[47] !== T0 || $[48] !== density || $[49] !== stickyHeader || $[50] !== striped || $[51] !== t16 || $[52] !== t19 || $[53] !== t23 || $[54] !== tableProps) {
-		t24 = /* @__PURE__ */ jsxs(T0, {
+		$[15] = options;
+		$[16] = t1;
+		$[17] = t2;
+	} else t2 = $[17];
+	const table = useDataTable(t2);
+	let t3;
+	if ($[18] !== table || $[19] !== toolbar) {
+		t3 = typeof toolbar === "function" ? toolbar({
+			rows: table.rows.map(_temp),
+			selection: table.selection,
+			table
+		}) : toolbar;
+		$[18] = table;
+		$[19] = toolbar;
+		$[20] = t3;
+	} else t3 = $[20];
+	const extra = t3;
+	let t4;
+	if ($[21] !== controlSize || $[22] !== table.searchable) {
+		t4 = table.searchable && /* @__PURE__ */ jsx(DataTableSearch, { size: controlSize });
+		$[21] = controlSize;
+		$[22] = table.searchable;
+		$[23] = t4;
+	} else t4 = $[23];
+	let t5;
+	if ($[24] !== controlSize) {
+		t5 = /* @__PURE__ */ jsx(DataTableFilters, { size: controlSize });
+		$[24] = controlSize;
+		$[25] = t5;
+	} else t5 = $[25];
+	let t6;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(DataTableSummary, {});
+		$[26] = t6;
+	} else t6 = $[26];
+	let t7;
+	if ($[27] !== extra) {
+		t7 = /* @__PURE__ */ jsxs(DataTableActions, { children: [t6, extra] });
+		$[27] = extra;
+		$[28] = t7;
+	} else t7 = $[28];
+	let t8;
+	if ($[29] !== t4 || $[30] !== t5 || $[31] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(DataTableToolbar, { children: [
+			t4,
+			t5,
+			t7
+		] });
+		$[29] = t4;
+		$[30] = t5;
+		$[31] = t7;
+		$[32] = t8;
+	} else t8 = $[32];
+	let t9;
+	if ($[33] !== density || $[34] !== empty || $[35] !== layout || $[36] !== maxHeight || $[37] !== onEndReached || $[38] !== stickyHeader || $[39] !== striped || $[40] !== tableProps || $[41] !== virtualized) {
+		t9 = /* @__PURE__ */ jsx(DataTableContent, {
 			density,
 			striped,
 			stickyHeader,
-			"aria-busy": t16,
-			...tableProps,
-			children: [t19, t23]
+			layout,
+			maxHeight,
+			virtualized,
+			onEndReached,
+			empty,
+			tableProps
 		});
-		$[47] = T0;
-		$[48] = density;
-		$[49] = stickyHeader;
-		$[50] = striped;
-		$[51] = t16;
-		$[52] = t19;
-		$[53] = t23;
-		$[54] = tableProps;
-		$[55] = t24;
-	} else t24 = $[55];
-	let t25;
-	if ($[56] !== count || $[57] !== currentPage || $[58] !== error || $[59] !== labels || $[60] !== pageSize || $[61] !== pageSizeOptions || $[62] !== paginated || $[63] !== setPage || $[64] !== setPageSize) {
-		t25 = paginated && count > 0 && !error && /* @__PURE__ */ jsx(Pagination, {
-			className: "oui-data-table__pagination",
-			variant: "simple",
-			page: currentPage,
-			pageSize,
-			total: count,
-			onPageChange: setPage,
-			onPageSizeChange: (size) => {
-				setPageSize(size);
-				setPage(1);
-			},
-			pageSizeOptions,
-			labels
+		$[33] = density;
+		$[34] = empty;
+		$[35] = layout;
+		$[36] = maxHeight;
+		$[37] = onEndReached;
+		$[38] = stickyHeader;
+		$[39] = striped;
+		$[40] = tableProps;
+		$[41] = virtualized;
+		$[42] = t9;
+	} else t9 = $[42];
+	let t10;
+	if ($[43] !== pageSizeOptions) {
+		t10 = /* @__PURE__ */ jsx(DataTablePagination, { pageSizeOptions });
+		$[43] = pageSizeOptions;
+		$[44] = t10;
+	} else t10 = $[44];
+	let t11;
+	if ($[45] !== className || $[46] !== t10 || $[47] !== t8 || $[48] !== t9 || $[49] !== table) {
+		t11 = /* @__PURE__ */ jsxs(DataTableRoot, {
+			table,
+			className,
+			children: [
+				t8,
+				t9,
+				t10
+			]
 		});
-		$[56] = count;
-		$[57] = currentPage;
-		$[58] = error;
-		$[59] = labels;
-		$[60] = pageSize;
-		$[61] = pageSizeOptions;
-		$[62] = paginated;
-		$[63] = setPage;
-		$[64] = setPageSize;
-		$[65] = t25;
-	} else t25 = $[65];
-	return /* @__PURE__ */ jsxs("div", {
-		className: t15,
-		"data-loading": loading ? rows.length ? "refresh" : "initial" : void 0,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "oui-data-table__toolbar",
-				children: [searchable && /* @__PURE__ */ jsx(SearchInput, {
-					className: "oui-data-table__search",
-					"aria-label": text.search,
-					placeholder: text.search,
-					clearLabel: text.clearSearch,
-					value: search,
-					onValueChange: changeSearch
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "oui-data-table__actions",
-					children: [
-						loading && /* @__PURE__ */ jsx(Spinner, {
-							className: "oui-data-table__spinner",
-							label: text.loading
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "oui-data-table__summary",
-							"aria-live": "polite",
-							children: selectable && selected.size ? text.selected(selected.size) : placeholders ? null : text.count(count)
-						}),
-						extra
-					]
-				})]
-			}),
-			t24,
-			error ? /* @__PURE__ */ jsx(EmptyState, {
-				role: "alert",
-				title: text.errorTitle,
-				description: error,
-				actions: onRetry ? /* @__PURE__ */ jsx(Button, {
-					size: "sm",
-					variant: "secondary",
-					onClick: onRetry,
-					children: text.retry
-				}) : void 0
-			}) : !rows.length && !loading && (empty ?? /* @__PURE__ */ jsx(EmptyState, {
-				title: filtered ? text.noMatchTitle : text.emptyTitle,
-				description: filtered ? text.noMatchDescription : text.emptyDescription,
-				actions: search ? /* @__PURE__ */ jsx(Button, {
-					size: "sm",
-					variant: "secondary",
-					onClick: () => changeSearch(""),
-					children: text.clearSearch
-				}) : void 0
-			})),
-			t25
-		]
-	});
+		$[45] = className;
+		$[46] = t10;
+		$[47] = t8;
+		$[48] = t9;
+		$[49] = table;
+		$[50] = t11;
+	} else t11 = $[50];
+	return t11;
 }
-function _temp4(t0) {
-	const { row: row_2 } = t0;
-	return row_2;
-}
-function _temp3(t0) {
-	const { id: id_0 } = t0;
-	return id_0;
-}
-function _temp2(column_0) {
-	return column_0.searchable ?? (column_0.accessor !== void 0 || column_0.cell === void 0);
-}
-function _temp(column) {
-	return column.sortable ?? (column.accessor !== void 0 || column.cell === void 0);
+/**
+* `<DataTable data={…} columns={…} />` renders a complete table with search,
+* filters, sorting, pagination, row selection, row actions and inline editing;
+* columns declare what they take part in. Every piece of state works
+* uncontrolled or controlled (`search` / `filterValues` / `sort` / `page` /
+* `selection`), and with `mode="server"` the same state drives an API.
+*
+* For another layout, create the table with `useDataTable` and compose the
+* parts: `DataTable.Root`, `DataTable.Toolbar`, `DataTable.Search`,
+* `DataTable.Filters`, `DataTable.Filter`, `DataTable.Actions`,
+* `DataTable.Summary`, `DataTable.Content`, `DataTable.Pagination`.
+*/
+function _temp(t0) {
+	const { row } = t0;
+	return row;
 }
+var DataTable = Object.assign(DataTableComponent, {
+	Root: DataTableRoot,
+	Toolbar: DataTableToolbar,
+	Search: DataTableSearch,
+	Filters: DataTableFilters,
+	Filter: DataTableFilter,
+	Actions: DataTableActions,
+	Summary: DataTableSummary,
+	Content: DataTableContent,
+	Pagination: DataTablePagination
+});
 //#endregion
-export { DataTable };
+export { DataTable, useDataTableContext };
 
 //# sourceMappingURL=DataTable.js.map