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

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

@@ -1,12 +1,14 @@
 import { Button } from "../components/button/button.js";
 import { Checkbox } from "../components/checkbox-field/checkbox.js";
 import { usePresence } from "../lib/hooks/use-presence.js";
+import { useRequiredContext } from "../lib/use-required-context.js";
 import { useDataTable } from "./data-table-context.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";
-import { useRef } from "react";
+import { createContext, useRef } from "react";
 // src/data-table/data-table-selection.tsx
 var useSelection = () => {
 	const { selection } = useDataTable();
@@ -151,173 +153,680 @@ var selectionColumn = ({ sticky, selectPageLabel, selectRowLabel, checkIcon, ind
 		checkIcon
 	})
 });
+var SelectionBarContext = createContext(null);
+var useSelectionBar = () => {
+	return useRequiredContext(SelectionBarContext, "DataTable.SelectionBar.* must be rendered inside <DataTable.SelectionBar.Root>.");
+};
 /**
-* The bar above a selectable table: the total while nothing is selected, then
-* the selected count, a clear button, the offer to select every matching row,
-* and the caller's bulk actions.
+* The bar above a selectable table, holding the selection for the parts inside
+* it and marked `data-selected` while any row is. It sits in a container that
+* lets it wrap where it is narrow.
+*
+* @example
+* <DataTable.SelectionBar.Root totalRows={30}>…</DataTable.SelectionBar.Root>
 */
-var DataTableSelectionBar = (t0) => {
-	const $ = c(38);
-	const { total, totalRows, countLabel, clearLabel, selectAllLabel, children, className } = t0;
+var SelectionBarRoot = (t0) => {
+	const $ = c(28);
+	let className;
+	let props;
+	let ref;
+	let render;
+	let totalRows;
+	if ($[0] !== t0) {
+		({totalRows, render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+		$[5] = totalRows;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+		totalRows = $[5];
+	}
 	const selection = useSelection();
 	const selected = selection.count(totalRows);
-	const empty = selected === 0;
 	const barRef = useRef(null);
 	const clearRef = useRef(null);
-	const canSelectAll = selected > 0 && selected < totalRows;
-	const selectAllRef = useRef(null);
-	const selectAll = usePresence(canSelectAll, selectAllRef);
-	const t1 = data_table_module_default;
-	const t2 = -1;
+	let t1;
+	if ($[6] !== ref) {
+		t1 = ref === void 0 ? barRef : [barRef, ref];
+		$[6] = ref;
+		$[7] = t1;
+	} else t1 = $[7];
+	const t2 = selected > 0 || void 0;
 	let t3;
-	if ($[0] !== className) {
+	if ($[8] !== className) {
 		t3 = clsx(data_table_module_default.selectionBar, className);
-		$[0] = className;
-		$[1] = t3;
-	} else t3 = $[1];
-	const t4 = !empty || void 0;
+		$[8] = className;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== props || $[11] !== t2 || $[12] !== t3) {
+		t4 = {
+			tabIndex: -1,
+			...props,
+			"data-selected": t2,
+			className: t3
+		};
+		$[10] = props;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
 	let t5;
-	if ($[2] !== total) {
-		t5 = /* @__PURE__ */ jsx("span", {
+	if ($[14] !== render || $[15] !== t1 || $[16] !== t4) {
+		t5 = {
+			defaultTagName: "div",
+			render,
+			ref: t1,
+			props: t4
+		};
+		$[14] = render;
+		$[15] = t1;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	const element = useRender(t5);
+	let t6;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => barRef.current?.focus();
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== selected || $[20] !== selection || $[21] !== totalRows) {
+		t7 = {
+			selection,
+			totalRows,
+			selected,
+			focusBar: t6,
+			clearRef
+		};
+		$[19] = selected;
+		$[20] = selection;
+		$[21] = totalRows;
+		$[22] = t7;
+	} else t7 = $[22];
+	let t8;
+	if ($[23] !== element) {
+		t8 = /* @__PURE__ */ jsx("div", {
+			className: data_table_module_default.selectionContainer,
+			children: element
+		});
+		$[23] = element;
+		$[24] = t8;
+	} else t8 = $[24];
+	let t9;
+	if ($[25] !== t7 || $[26] !== t8) {
+		t9 = /* @__PURE__ */ jsx(SelectionBarContext, {
+			value: t7,
+			children: t8
+		});
+		$[25] = t7;
+		$[26] = t8;
+		$[27] = t9;
+	} else t9 = $[27];
+	return t9;
+};
+/**
+* What the bar shows, hidden from assistive tech: the total while nothing is
+* selected, crossing over to the selected count, at the width of the longest
+* count.
+*
+* @example
+* <DataTable.SelectionBar.Summary total="30 invoices" countLabel={(n, total) => `${n} of ${total} selected`} />
+*/
+var SelectionBarSummary = (t0) => {
+	const $ = c(26);
+	let className;
+	let countLabel;
+	let props;
+	let ref;
+	let render;
+	let total;
+	if ($[0] !== t0) {
+		({total, countLabel, render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = countLabel;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = render;
+		$[6] = total;
+	} else {
+		className = $[1];
+		countLabel = $[2];
+		props = $[3];
+		ref = $[4];
+		render = $[5];
+		total = $[6];
+	}
+	const { totalRows, selected } = useSelectionBar();
+	let t1;
+	if ($[7] !== className) {
+		t1 = clsx(data_table_module_default.selectionSummary, className);
+		$[7] = className;
+		$[8] = t1;
+	} else t1 = $[8];
+	let t2;
+	if ($[9] !== total) {
+		t2 = /* @__PURE__ */ jsx("span", {
 			className: data_table_module_default.selectionTotal,
 			children: total
 		});
-		$[2] = total;
-		$[3] = t5;
-	} else t5 = $[3];
-	const t6 = totalRows > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-		className: data_table_module_default.selectionCount,
-		children: countLabel(selected, totalRows)
-	}), /* @__PURE__ */ jsx("span", {
-		className: data_table_module_default.selectionMeasure,
-		children: countLabel(totalRows, totalRows)
-	})] });
-	let t7;
-	if ($[4] !== t5 || $[5] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("span", {
-			className: data_table_module_default.selectionSummary,
+		$[9] = total;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== countLabel || $[12] !== selected || $[13] !== totalRows) {
+		t3 = totalRows > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: data_table_module_default.selectionCount,
+			children: countLabel(selected, totalRows)
+		}), /* @__PURE__ */ jsx("span", {
+			className: data_table_module_default.selectionMeasure,
+			children: countLabel(totalRows, totalRows)
+		})] });
+		$[11] = countLabel;
+		$[12] = selected;
+		$[13] = totalRows;
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== t2 || $[16] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t3] });
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t4;
+	} else t4 = $[17];
+	let t5;
+	if ($[18] !== props || $[19] !== t1 || $[20] !== t4) {
+		t5 = {
 			"aria-hidden": true,
-			children: [t5, t6]
-		});
-		$[4] = t5;
-		$[5] = t6;
-		$[6] = t7;
-	} else t7 = $[6];
-	const t8 = data_table_module_default;
-	const t9 = "status";
-	const t10 = empty ? total : countLabel(selected, totalRows);
-	let t11;
-	if ($[7] !== t10 || $[8] !== t8.selectionStatus) {
-		t11 = /* @__PURE__ */ jsx("span", {
-			className: t8.selectionStatus,
-			role: t9,
-			children: t10
-		});
-		$[7] = t10;
-		$[8] = t8.selectionStatus;
-		$[9] = t11;
-	} else t11 = $[9];
-	let t12;
-	if ($[10] !== selection) {
-		t12 = () => {
+			...props,
+			className: t1,
+			children: t4
+		};
+		$[18] = props;
+		$[19] = t1;
+		$[20] = t4;
+		$[21] = t5;
+	} else t5 = $[21];
+	let t6;
+	if ($[22] !== ref || $[23] !== render || $[24] !== t5) {
+		t6 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t5
+		};
+		$[22] = ref;
+		$[23] = render;
+		$[24] = t5;
+		$[25] = t6;
+	} else t6 = $[25];
+	return useRender(t6);
+};
+/**
+* The hidden live region that announces the total while nothing is selected,
+* and the selected count once something is.
+*
+* @example
+* <DataTable.SelectionBar.Status total="30 invoices" countLabel={(n, total) => `${n} of ${total} selected`} />
+*/
+var SelectionBarStatus = (t0) => {
+	const $ = c(22);
+	let className;
+	let countLabel;
+	let props;
+	let ref;
+	let render;
+	let total;
+	if ($[0] !== t0) {
+		({total, countLabel, render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = countLabel;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = render;
+		$[6] = total;
+	} else {
+		className = $[1];
+		countLabel = $[2];
+		props = $[3];
+		ref = $[4];
+		render = $[5];
+		total = $[6];
+	}
+	const { totalRows, selected } = useSelectionBar();
+	let t1;
+	if ($[7] !== className) {
+		t1 = clsx(data_table_module_default.selectionStatus, className);
+		$[7] = className;
+		$[8] = t1;
+	} else t1 = $[8];
+	let t2;
+	if ($[9] !== countLabel || $[10] !== selected || $[11] !== total || $[12] !== totalRows) {
+		t2 = selected === 0 ? total : countLabel(selected, totalRows);
+		$[9] = countLabel;
+		$[10] = selected;
+		$[11] = total;
+		$[12] = totalRows;
+		$[13] = t2;
+	} else t2 = $[13];
+	let t3;
+	if ($[14] !== props || $[15] !== t1 || $[16] !== t2) {
+		t3 = {
+			role: "status",
+			...props,
+			className: t1,
+			children: t2
+		};
+		$[14] = props;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+	} else t3 = $[17];
+	let t4;
+	if ($[18] !== ref || $[19] !== render || $[20] !== t3) {
+		t4 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t3
+		};
+		$[18] = ref;
+		$[19] = render;
+		$[20] = t3;
+		$[21] = t4;
+	} else t4 = $[21];
+	return useRender(t4);
+};
+/**
+* The row of actions on the selection, `Clear`, `SelectAll` and `Bulk`, out of
+* reach while nothing is selected.
+*
+* @example
+* <DataTable.SelectionBar.Actions>
+* 	<DataTable.SelectionBar.Clear render={<Button variant="tertiary">Clear selection</Button>} />
+* </DataTable.SelectionBar.Actions>
+*/
+var SelectionBarActions = (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 { selected } = useSelectionBar();
+	const t1 = selected === 0;
+	let t2;
+	if ($[5] !== className) {
+		t2 = clsx(data_table_module_default.selectionActions, className);
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== props || $[8] !== t1 || $[9] !== t2) {
+		t3 = {
+			...props,
+			inert: t1,
+			className: t2
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== ref || $[12] !== render || $[13] !== t3) {
+		t4 = {
+			defaultTagName: "div",
+			render,
+			ref,
+			props: t3
+		};
+		$[11] = ref;
+		$[12] = render;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	return useRender(t4);
+};
+/**
+* The button that clears the selection and returns focus to the bar. It
+* renders whichever button it is given.
+*
+* @example
+* <DataTable.SelectionBar.Clear render={<Button variant="tertiary">Clear selection</Button>} />
+*/
+var SelectionBarClear = (t0) => {
+	const $ = c(17);
+	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];
+	}
+	const { selection, focusBar, clearRef } = useSelectionBar();
+	let t1;
+	if ($[4] !== clearRef || $[5] !== ref) {
+		t1 = ref === void 0 ? clearRef : [clearRef, ref];
+		$[4] = clearRef;
+		$[5] = ref;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== focusBar || $[8] !== selection) {
+		t2 = () => {
 			selection.clear();
-			barRef.current?.focus();
+			focusBar();
 		};
+		$[7] = focusBar;
+		$[8] = selection;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== props || $[11] !== t2) {
+		t3 = {
+			...props,
+			type: "button",
+			onClick: t2
+		};
+		$[10] = props;
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== render || $[14] !== t1 || $[15] !== t3) {
+		t4 = {
+			render,
+			ref: t1,
+			props: t3
+		};
+		$[13] = render;
+		$[14] = t1;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return useRender(t4);
+};
+/**
+* The offer to select every matching row, fading in while some but not all are
+* selected, then handing focus to `Clear`. It renders whichever button it is
+* given.
+*
+* @example
+* <DataTable.SelectionBar.SelectAll render={<Button variant="tertiary">Select all 30</Button>} />
+*/
+var SelectionBarSelectAll = (t0) => {
+	const $ = c(23);
+	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 { selection, totalRows, selected, clearRef } = useSelectionBar();
+	const canSelectAll = selected > 0 && selected < totalRows;
+	const selectAllRef = useRef(null);
+	const presence = usePresence(canSelectAll, selectAllRef);
+	let t1;
+	if ($[5] !== ref) {
+		t1 = ref === void 0 ? selectAllRef : [selectAllRef, ref];
+		$[5] = ref;
+		$[6] = t1;
+	} else t1 = $[6];
+	const t2 = presence.mounted;
+	const t3 = presence.props;
+	const t4 = !canSelectAll;
+	let t5;
+	if ($[7] !== className) {
+		t5 = clsx(data_table_module_default.selectionSelectAll, className);
+		$[7] = className;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== clearRef || $[10] !== selection) {
+		t6 = () => {
+			selection.selectAllMatching();
+			clearRef.current?.focus();
+		};
+		$[9] = clearRef;
 		$[10] = selection;
-		$[11] = t12;
-	} else t12 = $[11];
-	let t13;
-	if ($[12] !== clearLabel || $[13] !== t12) {
-		t13 = /* @__PURE__ */ jsx(Button, {
-			ref: clearRef,
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== presence.props || $[13] !== props || $[14] !== t4 || $[15] !== t5 || $[16] !== t6) {
+		t7 = {
+			...props,
+			...t3,
+			type: "button",
+			inert: t4,
+			className: t5,
+			onClick: t6
+		};
+		$[12] = presence.props;
+		$[13] = props;
+		$[14] = t4;
+		$[15] = t5;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== presence.mounted || $[19] !== render || $[20] !== t1 || $[21] !== t7) {
+		t8 = {
+			render,
+			ref: t1,
+			enabled: t2,
+			props: t7
+		};
+		$[18] = presence.mounted;
+		$[19] = render;
+		$[20] = t1;
+		$[21] = t7;
+		$[22] = t8;
+	} else t8 = $[22];
+	return useRender(t8);
+};
+/**
+* The caller's bulk actions for the selection, at the end of the `Actions`.
+*
+* @example
+* <DataTable.SelectionBar.Bulk><Button>Export</Button></DataTable.SelectionBar.Bulk>
+*/
+var SelectionBarBulk = (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.selectionBulk, 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: "div",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+var SelectionBarPrefab = (t0) => {
+	const $ = c(23);
+	const { total, totalRows, countLabel, clearLabel, selectAllLabel, children, className } = t0;
+	let t1;
+	let t2;
+	if ($[0] !== countLabel || $[1] !== total) {
+		t1 = /* @__PURE__ */ jsx(SelectionBarSummary, {
+			total,
+			countLabel
+		});
+		t2 = /* @__PURE__ */ jsx(SelectionBarStatus, {
+			total,
+			countLabel
+		});
+		$[0] = countLabel;
+		$[1] = total;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== clearLabel) {
+		t3 = /* @__PURE__ */ jsx(SelectionBarClear, { render: /* @__PURE__ */ jsx(Button, {
 			variant: "tertiary",
-			onClick: t12,
 			children: clearLabel
-		});
-		$[12] = clearLabel;
-		$[13] = t12;
-		$[14] = t13;
-	} else t13 = $[14];
-	let t14;
-	if ($[15] !== canSelectAll || $[16] !== selectAll.mounted || $[17] !== selectAll.props || $[18] !== selectAllLabel || $[19] !== selection || $[20] !== totalRows) {
-		t14 = selectAll.mounted && /* @__PURE__ */ jsx(Button, {
-			ref: selectAllRef,
-			className: data_table_module_default.selectionSelectAll,
+		}) });
+		$[4] = clearLabel;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== selectAllLabel || $[7] !== totalRows) {
+		t4 = selectAllLabel(totalRows);
+		$[6] = selectAllLabel;
+		$[7] = totalRows;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(SelectionBarSelectAll, { render: /* @__PURE__ */ jsx(Button, {
 			variant: "tertiary",
-			inert: !canSelectAll,
-			onClick: () => {
-				selection.selectAllMatching();
-				clearRef.current?.focus();
-			},
-			...selectAll.props,
-			children: selectAllLabel(totalRows)
-		});
-		$[15] = canSelectAll;
-		$[16] = selectAll.mounted;
-		$[17] = selectAll.props;
-		$[18] = selectAllLabel;
-		$[19] = selection;
-		$[20] = totalRows;
-		$[21] = t14;
-	} else t14 = $[21];
-	let t15;
-	if ($[22] !== children) {
-		t15 = /* @__PURE__ */ jsx("div", {
-			className: data_table_module_default.selectionBulk,
-			children
-		});
-		$[22] = children;
-		$[23] = t15;
-	} else t15 = $[23];
-	let t16;
-	if ($[24] !== empty || $[25] !== t13 || $[26] !== t14 || $[27] !== t15) {
-		t16 = /* @__PURE__ */ jsxs("div", {
-			className: data_table_module_default.selectionActions,
-			inert: empty,
-			children: [
-				t13,
-				t14,
-				t15
-			]
-		});
-		$[24] = empty;
-		$[25] = t13;
-		$[26] = t14;
-		$[27] = t15;
-		$[28] = t16;
-	} else t16 = $[28];
-	let t17;
-	if ($[29] !== t11 || $[30] !== t16 || $[31] !== t3 || $[32] !== t4 || $[33] !== t7) {
-		t17 = /* @__PURE__ */ jsxs("div", {
-			ref: barRef,
-			tabIndex: t2,
-			className: t3,
-			"data-selected": t4,
+			children: t4
+		}) });
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== children) {
+		t6 = /* @__PURE__ */ jsx(SelectionBarBulk, { children });
+		$[11] = children;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t3 || $[14] !== t5 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(SelectionBarActions, { children: [
+			t3,
+			t5,
+			t6
+		] });
+		$[13] = t3;
+		$[14] = t5;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== className || $[18] !== t1 || $[19] !== t2 || $[20] !== t7 || $[21] !== totalRows) {
+		t8 = /* @__PURE__ */ jsxs(SelectionBarRoot, {
+			totalRows,
+			className,
 			children: [
-				t7,
-				t11,
-				t16
+				t1,
+				t2,
+				t7
 			]
 		});
-		$[29] = t11;
-		$[30] = t16;
-		$[31] = t3;
-		$[32] = t4;
-		$[33] = t7;
-		$[34] = t17;
-	} else t17 = $[34];
-	let t18;
-	if ($[35] !== t1.selectionContainer || $[36] !== t17) {
-		t18 = /* @__PURE__ */ jsx("div", {
-			className: t1.selectionContainer,
-			children: t17
-		});
-		$[35] = t1.selectionContainer;
-		$[36] = t17;
-		$[37] = t18;
-	} else t18 = $[37];
-	return t18;
+		$[17] = className;
+		$[18] = t1;
+		$[19] = t2;
+		$[20] = t7;
+		$[21] = totalRows;
+		$[22] = t8;
+	} else t8 = $[22];
+	return t8;
 };
+/**
+* The bar above a selectable table: the total while nothing is selected, then
+* the selected count, a clear button, the offer to select every matching row,
+* and the caller's bulk actions. Its parts compose another bar.
+*
+* @example
+* <DataTable.SelectionBar
+* 	totalRows={30}
+* 	total="30 invoices"
+* 	countLabel={(n, total) => `${n} of ${total} selected`}
+* 	clearLabel="Clear selection"
+* 	selectAllLabel={total => `Select all ${total}`}
+* />
+*/
+var DataTableSelectionBar = Object.assign(SelectionBarPrefab, {
+	Root: SelectionBarRoot,
+	Summary: SelectionBarSummary,
+	Status: SelectionBarStatus,
+	Actions: SelectionBarActions,
+	Clear: SelectionBarClear,
+	SelectAll: SelectionBarSelectAll,
+	Bulk: SelectionBarBulk
+});
 function _temp(row) {
 	return row.id;
 }