@igne-agency/react-web-ui 0.3.0 → 0.4.0

package/dist/data-table/data-table-parts.js

@@ -0,0 +1,1182 @@
+import { Skeleton } from "../components/skeleton/skeleton.js";
+import { Stale } from "../components/stale/stale.js";
+import { useDataTable } from "./data-table-context.js";
+import { resolveView } from "./resolve-view.js";
+import { useStickyOffsets } from "./use-sticky-offsets.js";
+import data_table_module_default from "./data-table.module.js";
+import { c } from "react/compiler-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/data-table/data-table-parts.tsx
+var ARIA_SORT = {
+	asc: "ascending",
+	desc: "descending"
+};
+/**
+* The `aria-sort` value for a header cell, given its column's sort state.
+*
+* @example
+* ariaSort("desc"); // -> "descending"
+* ariaSort(false); // -> undefined
+*/
+var ariaSort = (sorted) => sorted === false ? void 0 : ARIA_SORT[sorted];
+/**
+* Which way a column sorts, read from the table's sorting state.
+*
+* @example
+* sortOf([{ id: "amount", desc: true }], "amount"); // -> "desc"
+*/
+var sortOf = (sorting, columnId) => {
+	const entry = sorting.find((sort) => sort.id === columnId);
+	return entry === void 0 ? false : entry.desc ? "desc" : "asc";
+};
+/**
+* The edge a column is pinned to and its position in that edge's group, or
+* `undefined` for a column that scrolls.
+*
+* @example
+* columnPin(columns, "actions"); // -> { side: "end", index: 0 }
+*/
+var columnPin = (columns, id) => {
+	const side = columns.find((column) => column.id === id)?.columnDef.meta?.sticky;
+	if (side === void 0) return;
+	return {
+		side,
+		index: columns.filter((column) => column.columnDef.meta?.sticky === side).findIndex((column) => column.id === id)
+	};
+};
+/**
+* How many columns are pinned to an edge.
+*
+* @example
+* pinCount(columns, "start"); // -> 1
+*/
+var pinCount = (columns, side) => columns.filter((column) => column.columnDef.meta?.sticky === side).length;
+/**
+* The props a column's layout options put on its header and body cells: the
+* data attributes the stylesheet reads, plus the inset a pinned cell sits at.
+*
+* @example
+* <td {...cellProps(cell.column.columnDef.meta, columnPin(columns, cell.column.id))} />
+*/
+var cellProps = (meta, pin, inlineStyle) => ({
+	"data-fit": meta?.fit ? "true" : void 0,
+	"data-numeric": meta?.numeric ? "true" : void 0,
+	"data-sticky": pin?.side,
+	style: pin === void 0 ? inlineStyle : pin.side === "start" ? {
+		insetInlineStart: `var(--table-sticky-inset-${pin.index}, 0px)`,
+		...inlineStyle
+	} : {
+		insetInlineEnd: `var(--table-sticky-end-${pin.index}, 0px)`,
+		...inlineStyle
+	}
+});
+/**
+* Which body the enclosing `DataTable` shows, whether its rows are stale, and
+* whether a refresh failed over rows still on screen.
+*
+* @example
+* const { view } = useDataTableView();
+* if (view === "empty") return <DataTable.StateRow>No invoices yet.</DataTable.StateRow>;
+*/
+var useDataTableView = () => {
+	const $ = c(6);
+	const { table, status, isFetching } = useDataTable();
+	let t0;
+	if ($[0] !== table) {
+		t0 = table.getRowModel();
+		$[0] = table;
+		$[1] = t0;
+	} else t0 = $[1];
+	const t1 = t0.rows.length > 0;
+	let t2;
+	if ($[2] !== isFetching || $[3] !== status || $[4] !== t1) {
+		t2 = resolveView({
+			status,
+			isFetching,
+			hasRows: t1
+		});
+		$[2] = isFetching;
+		$[3] = status;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+/** The alert above rows still on screen when a refresh fails. Renders nothing otherwise. */
+var RefreshFailed = (t0) => {
+	const $ = c(15);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	const { refreshFailed } = useDataTableView();
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(data_table_module_default.refreshFailed, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			role: "alert",
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== refreshFailed || $[12] !== render || $[13] !== t2) {
+		t3 = {
+			defaultTagName: "div",
+			render,
+			ref,
+			enabled: refreshFailed,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = refreshFailed;
+		$[12] = render;
+		$[13] = t2;
+		$[14] = t3;
+	} else t3 = $[14];
+	return useRender(t3);
+};
+/**
+* The frame that stays put around the scroller: it measures the pinned columns
+* and holds the stale state, so it takes a `Scroller` and a `StaleOverlay`.
+*/
+var Frame = (t0) => {
+	const $ = c(25);
+	let children;
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = render;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+		render = $[5];
+	}
+	const { table } = useDataTable();
+	const { stale } = useDataTableView();
+	let t1;
+	let t2;
+	if ($[6] !== table) {
+		const columns = table.getAllLeafColumns();
+		t1 = useStickyOffsets;
+		t2 = columns.filter(_temp).map(_temp2).join(",");
+		$[6] = table;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t1 = $[7];
+		t2 = $[8];
+	}
+	const frameRef = t1(t2);
+	let t3;
+	if ($[9] !== frameRef || $[10] !== ref) {
+		t3 = ref === void 0 ? frameRef : [frameRef, ref];
+		$[9] = frameRef;
+		$[10] = ref;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== className) {
+		t4 = clsx(data_table_module_default.scrollFrame, className);
+		$[12] = className;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== children || $[15] !== stale) {
+		t5 = /* @__PURE__ */ jsx(Stale.Root, {
+			busy: stale,
+			className: data_table_module_default.stale,
+			children
+		});
+		$[14] = children;
+		$[15] = stale;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== props || $[18] !== t4 || $[19] !== t5) {
+		t6 = {
+			...props,
+			className: t4,
+			children: t5
+		};
+		$[17] = props;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+	} else t6 = $[20];
+	let t7;
+	if ($[21] !== render || $[22] !== t3 || $[23] !== t6) {
+		t7 = {
+			defaultTagName: "div",
+			render,
+			ref: t3,
+			props: t6
+		};
+		$[21] = render;
+		$[22] = t3;
+		$[23] = t6;
+		$[24] = t7;
+	} else t7 = $[24];
+	return useRender(t7);
+};
+/** The scrolling card that holds the `Table`, dimmed while its rows are stale. */
+var Scroller = (t0) => {
+	const $ = c(16);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(data_table_module_default.contentWrap, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			"data-scroller": true,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "div",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	const element = useRender(t3);
+	let t4;
+	if ($[14] !== element) {
+		t4 = /* @__PURE__ */ jsx(Stale.Content, {
+			className: data_table_module_default.stale,
+			children: element
+		});
+		$[14] = element;
+		$[15] = t4;
+	} else t4 = $[15];
+	return t4;
+};
+/** What covers the table once a refresh is slow: its `Stale.Message` and `Stale.Retry`. */
+var StaleOverlay = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(data_table_module_default.staleOverlay, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Stale.Overlay, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** The `<table>`, marked busy while its first page loads. */
+var Table = (t0) => {
+	const $ = c(15);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	const { view } = useDataTableView();
+	const t1 = view === "loading" ? "true" : void 0;
+	let t2;
+	if ($[5] !== className) {
+		t2 = clsx(data_table_module_default.table, className);
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== props || $[8] !== t1 || $[9] !== t2) {
+		t3 = {
+			"aria-busy": t1,
+			...props,
+			className: t2
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== ref || $[12] !== render || $[13] !== t3) {
+		t4 = {
+			defaultTagName: "table",
+			render,
+			ref,
+			props: t3
+		};
+		$[11] = ref;
+		$[12] = render;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	return useRender(t4);
+};
+/** What is announced while the first page loads, such as "Loading invoices". Renders nothing otherwise. */
+var LoadingCaption = (t0) => {
+	const $ = c(15);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	const { view } = useDataTableView();
+	const t1 = view === "loading";
+	let t2;
+	if ($[5] !== className) {
+		t2 = clsx(data_table_module_default.busyCaption, className);
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== props || $[8] !== t2) {
+		t3 = {
+			...props,
+			className: t2
+		};
+		$[7] = props;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t1 || $[13] !== t3) {
+		t4 = {
+			defaultTagName: "caption",
+			render,
+			ref,
+			enabled: t1,
+			props: t3
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t1;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	return useRender(t4);
+};
+/** The header, stuck to the top of the scroller. */
+var Head = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(data_table_module_default.thead, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "thead",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+/** One row of header cells. */
+var HeaderRow = (t0) => {
+	const $ = c(8);
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = ref;
+		$[3] = render;
+	} else {
+		props = $[1];
+		ref = $[2];
+		render = $[3];
+	}
+	let t1;
+	if ($[4] !== props || $[5] !== ref || $[6] !== render) {
+		t1 = {
+			defaultTagName: "tr",
+			render,
+			ref,
+			props
+		};
+		$[4] = props;
+		$[5] = ref;
+		$[6] = render;
+		$[7] = t1;
+	} else t1 = $[7];
+	return useRender(t1);
+};
+/**
+* A column header, laid out by its column's `meta` and announcing its sort.
+* It draws the column's header unless given children, such as a `SortButton`.
+*/
+var HeaderCell = (t0) => {
+	const $ = c(33);
+	let children;
+	let className;
+	let header;
+	let inlineStyle;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({header, render, className, style: inlineStyle, ref, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = header;
+		$[4] = inlineStyle;
+		$[5] = props;
+		$[6] = ref;
+		$[7] = render;
+	} else {
+		children = $[1];
+		className = $[2];
+		header = $[3];
+		inlineStyle = $[4];
+		props = $[5];
+		ref = $[6];
+		render = $[7];
+	}
+	const { table, sorting } = useDataTable();
+	const t1 = header.colSpan;
+	let t2;
+	if ($[8] !== header.column.id || $[9] !== sorting) {
+		t2 = ariaSort(sortOf(sorting, header.column.id));
+		$[8] = header.column.id;
+		$[9] = sorting;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== header.column.columnDef.meta || $[12] !== header.column.id || $[13] !== inlineStyle || $[14] !== table) {
+		t3 = cellProps(header.column.columnDef.meta, columnPin(table.getAllLeafColumns(), header.column.id), inlineStyle);
+		$[11] = header.column.columnDef.meta;
+		$[12] = header.column.id;
+		$[13] = inlineStyle;
+		$[14] = table;
+		$[15] = t3;
+	} else t3 = $[15];
+	let t4;
+	if ($[16] !== className) {
+		t4 = clsx(data_table_module_default.th, className);
+		$[16] = className;
+		$[17] = t4;
+	} else t4 = $[17];
+	let t5;
+	if ($[18] !== children || $[19] !== header || $[20] !== table.FlexRender) {
+		t5 = children === void 0 ? header.isPlaceholder ? null : /* @__PURE__ */ jsx(table.FlexRender, { header }) : children;
+		$[18] = children;
+		$[19] = header;
+		$[20] = table.FlexRender;
+		$[21] = t5;
+	} else t5 = $[21];
+	let t6;
+	if ($[22] !== header.colSpan || $[23] !== props || $[24] !== t2 || $[25] !== t3 || $[26] !== t4 || $[27] !== t5) {
+		t6 = {
+			scope: "col",
+			colSpan: t1,
+			"aria-sort": t2,
+			...props,
+			...t3,
+			className: t4,
+			children: t5
+		};
+		$[22] = header.colSpan;
+		$[23] = props;
+		$[24] = t2;
+		$[25] = t3;
+		$[26] = t4;
+		$[27] = t5;
+		$[28] = t6;
+	} else t6 = $[28];
+	let t7;
+	if ($[29] !== ref || $[30] !== render || $[31] !== t6) {
+		t7 = {
+			defaultTagName: "th",
+			render,
+			ref,
+			props: t6
+		};
+		$[29] = ref;
+		$[30] = render;
+		$[31] = t6;
+		$[32] = t7;
+	} else t7 = $[32];
+	return useRender(t7);
+};
+/**
+* The header's sort toggle, which returns the table to its first page. It
+* draws the column's header unless given children, followed by the glyph for
+* the column's sort, where one is given.
+*/
+var SortButton = (t0) => {
+	const $ = c(31);
+	let children;
+	let className;
+	let header;
+	let onClick;
+	let props;
+	let sortAscendingIcon;
+	let sortDescendingIcon;
+	let unsortedIcon;
+	if ($[0] !== t0) {
+		({header, sortAscendingIcon, sortDescendingIcon, unsortedIcon, className, children, onClick, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = header;
+		$[4] = onClick;
+		$[5] = props;
+		$[6] = sortAscendingIcon;
+		$[7] = sortDescendingIcon;
+		$[8] = unsortedIcon;
+	} else {
+		children = $[1];
+		className = $[2];
+		header = $[3];
+		onClick = $[4];
+		props = $[5];
+		sortAscendingIcon = $[6];
+		sortDescendingIcon = $[7];
+		unsortedIcon = $[8];
+	}
+	const { table, sorting } = useDataTable();
+	let t1;
+	if ($[9] !== header.column.id || $[10] !== sorting) {
+		t1 = sortOf(sorting, header.column.id);
+		$[9] = header.column.id;
+		$[10] = sorting;
+		$[11] = t1;
+	} else t1 = $[11];
+	const sorted = t1;
+	const icon = sorted === "asc" ? sortAscendingIcon : sorted === "desc" ? sortDescendingIcon : unsortedIcon;
+	let t2;
+	if ($[12] !== className) {
+		t2 = clsx(data_table_module_default.sortToggle, className);
+		$[12] = className;
+		$[13] = t2;
+	} else t2 = $[13];
+	let t3;
+	if ($[14] !== header.column || $[15] !== onClick || $[16] !== table) {
+		t3 = (event) => {
+			onClick?.(event);
+			header.column.toggleSorting();
+			table.setPageIndex(0);
+		};
+		$[14] = header.column;
+		$[15] = onClick;
+		$[16] = table;
+		$[17] = t3;
+	} else t3 = $[17];
+	let t4;
+	if ($[18] !== children || $[19] !== header || $[20] !== table) {
+		t4 = children ?? /* @__PURE__ */ jsx(table.FlexRender, { header });
+		$[18] = children;
+		$[19] = header;
+		$[20] = table;
+		$[21] = t4;
+	} else t4 = $[21];
+	let t5;
+	if ($[22] !== icon || $[23] !== sorted) {
+		t5 = icon === void 0 || icon === null ? null : /* @__PURE__ */ jsx("span", {
+			className: data_table_module_default.sortIcon,
+			"data-sort": sorted === false ? "none" : sorted,
+			"aria-hidden": "true",
+			children: icon
+		});
+		$[22] = icon;
+		$[23] = sorted;
+		$[24] = t5;
+	} else t5 = $[24];
+	let t6;
+	if ($[25] !== props || $[26] !== t2 || $[27] !== t3 || $[28] !== t4 || $[29] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			...props,
+			className: t2,
+			onClick: t3,
+			children: [t4, t5]
+		});
+		$[25] = props;
+		$[26] = t2;
+		$[27] = t3;
+		$[28] = t4;
+		$[29] = t5;
+		$[30] = t6;
+	} else t6 = $[30];
+	return t6;
+};
+/** The body: the page's `Row`s, the `PlaceholderRows` or a `StateRow`. */
+var Body = (t0) => {
+	const $ = c(8);
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = ref;
+		$[3] = render;
+	} else {
+		props = $[1];
+		ref = $[2];
+		render = $[3];
+	}
+	let t1;
+	if ($[4] !== props || $[5] !== ref || $[6] !== render) {
+		t1 = {
+			defaultTagName: "tbody",
+			render,
+			ref,
+			props
+		};
+		$[4] = props;
+		$[5] = ref;
+		$[6] = render;
+		$[7] = t1;
+	} else t1 = $[7];
+	return useRender(t1);
+};
+/** A body row, striped on every other row. */
+var Row = (t0) => {
+	const $ = c(16);
+	let className;
+	let props;
+	let ref;
+	let render;
+	let row;
+	if ($[0] !== t0) {
+		({row, render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+		$[5] = row;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+		row = $[5];
+	}
+	const t1 = row.index % 2 === 1 ? "true" : void 0;
+	let t2;
+	if ($[6] !== className) {
+		t2 = clsx(data_table_module_default.row, className);
+		$[6] = className;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== props || $[9] !== t1 || $[10] !== t2) {
+		t3 = {
+			"data-stripe": t1,
+			...props,
+			className: t2
+		};
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== ref || $[13] !== render || $[14] !== t3) {
+		t4 = {
+			defaultTagName: "tr",
+			render,
+			ref,
+			props: t3
+		};
+		$[12] = ref;
+		$[13] = render;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
+	return useRender(t4);
+};
+/** A body cell, laid out by its column's `meta`. It draws the column's cell unless given children. */
+var Cell = (t0) => {
+	const $ = c(28);
+	let cell;
+	let children;
+	let className;
+	let inlineStyle;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({cell, render, className, style: inlineStyle, ref, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = cell;
+		$[2] = children;
+		$[3] = className;
+		$[4] = inlineStyle;
+		$[5] = props;
+		$[6] = ref;
+		$[7] = render;
+	} else {
+		cell = $[1];
+		children = $[2];
+		className = $[3];
+		inlineStyle = $[4];
+		props = $[5];
+		ref = $[6];
+		render = $[7];
+	}
+	const { table } = useDataTable();
+	let t1;
+	if ($[8] !== cell.column.columnDef.meta || $[9] !== cell.column.id || $[10] !== inlineStyle || $[11] !== table) {
+		t1 = cellProps(cell.column.columnDef.meta, columnPin(table.getAllLeafColumns(), cell.column.id), inlineStyle);
+		$[8] = cell.column.columnDef.meta;
+		$[9] = cell.column.id;
+		$[10] = inlineStyle;
+		$[11] = table;
+		$[12] = t1;
+	} else t1 = $[12];
+	let t2;
+	if ($[13] !== className) {
+		t2 = clsx(data_table_module_default.td, className);
+		$[13] = className;
+		$[14] = t2;
+	} else t2 = $[14];
+	let t3;
+	if ($[15] !== cell || $[16] !== children || $[17] !== table.FlexRender) {
+		t3 = children ?? /* @__PURE__ */ jsx(table.FlexRender, { cell });
+		$[15] = cell;
+		$[16] = children;
+		$[17] = table.FlexRender;
+		$[18] = t3;
+	} else t3 = $[18];
+	let t4;
+	if ($[19] !== props || $[20] !== t1 || $[21] !== t2 || $[22] !== t3) {
+		t4 = {
+			...props,
+			...t1,
+			className: t2,
+			children: t3
+		};
+		$[19] = props;
+		$[20] = t1;
+		$[21] = t2;
+		$[22] = t3;
+		$[23] = t4;
+	} else t4 = $[23];
+	let t5;
+	if ($[24] !== ref || $[25] !== render || $[26] !== t4) {
+		t5 = {
+			defaultTagName: "td",
+			render,
+			ref,
+			props: t4
+		};
+		$[24] = ref;
+		$[25] = render;
+		$[26] = t4;
+		$[27] = t5;
+	} else t5 = $[27];
+	return useRender(t5);
+};
+/**
+* The full-width row beneath an expanded row, holding its children. The pinned
+* columns keep their place beside it.
+*/
+var SubRow = (t0) => {
+	const $ = c(31);
+	let children;
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = render;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+		render = $[5];
+	}
+	const { table } = useDataTable();
+	let columns;
+	let startPins;
+	let t1;
+	if ($[6] !== table) {
+		columns = table.getAllLeafColumns();
+		startPins = pinCount(columns, "start");
+		t1 = pinCount(columns, "end");
+		$[6] = table;
+		$[7] = columns;
+		$[8] = startPins;
+		$[9] = t1;
+	} else {
+		columns = $[7];
+		startPins = $[8];
+		t1 = $[9];
+	}
+	const endPins = t1;
+	let t2;
+	if ($[10] !== className) {
+		t2 = clsx(data_table_module_default.subRow, className);
+		$[10] = className;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== startPins) {
+		t3 = startPins > 0 ? /* @__PURE__ */ jsx("td", {
+			className: data_table_module_default.td,
+			colSpan: startPins,
+			"data-sticky": "start",
+			style: { insetInlineStart: 0 }
+		}) : null;
+		$[12] = startPins;
+		$[13] = t3;
+	} else t3 = $[13];
+	const t4 = columns.length - startPins - endPins;
+	let t5;
+	if ($[14] !== children || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsx("td", {
+			colSpan: t4,
+			children
+		});
+		$[14] = children;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== endPins) {
+		t6 = endPins > 0 ? /* @__PURE__ */ jsx("td", {
+			className: data_table_module_default.td,
+			colSpan: endPins,
+			"data-sticky": "end",
+			style: { insetInlineEnd: 0 }
+		}) : null;
+		$[17] = endPins;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== t3 || $[20] !== t5 || $[21] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t3,
+			t5,
+			t6
+		] });
+		$[19] = t3;
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = t7;
+	} else t7 = $[22];
+	let t8;
+	if ($[23] !== props || $[24] !== t2 || $[25] !== t7) {
+		t8 = {
+			...props,
+			className: t2,
+			children: t7
+		};
+		$[23] = props;
+		$[24] = t2;
+		$[25] = t7;
+		$[26] = t8;
+	} else t8 = $[26];
+	let t9;
+	if ($[27] !== ref || $[28] !== render || $[29] !== t8) {
+		t9 = {
+			defaultTagName: "tr",
+			render,
+			ref,
+			props: t8
+		};
+		$[27] = ref;
+		$[28] = render;
+		$[29] = t8;
+		$[30] = t9;
+	} else t9 = $[30];
+	return useRender(t9);
+};
+/**
+* Inert placeholder rows for a first load: one row per row of the selected page
+* size. A column that declares a `placeholderCell` draws it; every other column
+* gets a skeleton bar.
+*/
+var PlaceholderRows = () => {
+	const $ = c(2);
+	const { table } = useDataTable();
+	let t0;
+	if ($[0] !== table) {
+		const columns = table.getAllLeafColumns();
+		t0 = Array.from({ length: table.state.pagination.pageSize }, (_, index) => /* @__PURE__ */ jsx("tr", {
+			className: data_table_module_default.row,
+			"data-stripe": index % 2 === 1 ? "true" : void 0,
+			inert: true,
+			children: columns.map((column) => /* @__PURE__ */ jsx("td", {
+				className: data_table_module_default.td,
+				...cellProps(column.columnDef.meta, columnPin(columns, column.id), void 0),
+				children: column.columnDef.meta?.placeholderCell?.() ?? /* @__PURE__ */ jsx(Skeleton, { className: data_table_module_default.skeletonBar })
+			}, column.id))
+		}, index));
+		$[0] = table;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+/** A row across every column for the body's state, such as the empty state or an `ErrorMessage`. */
+var StateRow = (t0) => {
+	const $ = c(17);
+	let children;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, ref, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		children = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	const { table } = useDataTable();
+	let t1;
+	if ($[5] !== table) {
+		t1 = table.getAllLeafColumns();
+		$[5] = table;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children || $[8] !== t1.length) {
+		t2 = /* @__PURE__ */ jsx("td", {
+			colSpan: t1.length,
+			className: data_table_module_default.stateCell,
+			children
+		});
+		$[7] = children;
+		$[8] = t1.length;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== props || $[11] !== t2) {
+		t3 = {
+			...props,
+			children: t2
+		};
+		$[10] = props;
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== ref || $[14] !== render || $[15] !== t3) {
+		t4 = {
+			defaultTagName: "tr",
+			render,
+			ref,
+			props: t3
+		};
+		$[13] = ref;
+		$[14] = render;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return useRender(t4);
+};
+/** What a failed first load says, as an alert. */
+var ErrorMessage = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(data_table_module_default.errorState, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			role: "alert",
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+function _temp(column) {
+	return column.columnDef.meta?.sticky !== void 0;
+}
+function _temp2(column_0) {
+	return `${column_0.id}:${column_0.columnDef.meta?.sticky}`;
+}
+export { Body, Cell, ErrorMessage, Frame, Head, HeaderCell, HeaderRow, LoadingCaption, PlaceholderRows, RefreshFailed, Row, Scroller, SortButton, StaleOverlay, StateRow, SubRow, Table, useDataTableView };