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

package/dist/data-table/data-table-parts.d.ts

@@ -19,12 +19,25 @@ export declare const RefreshFailed: ({ render, className, ref, ...props }: DataT
 export type DataTableFrameProps = useRender.ComponentProps<"div">;
 /**
  * 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`.
+ * and is the `Stale.Root` of the rows, so it takes a `Scroller` and a
+ * `StaleOverlay`.
+ *
+ * @example
+ * <DataTable.Frame>
+ * 	<DataTable.Scroller>…</DataTable.Scroller>
+ * 	<DataTable.StaleOverlay>…</DataTable.StaleOverlay>
+ * </DataTable.Frame>
  */
-export declare const Frame: ({ render, className, ref, children, ...props }: DataTableFrameProps) => ReactElement;
+export declare const Frame: ({ render, className, ref, ...props }: DataTableFrameProps) => ReactNode;
 export type DataTableScrollerProps = useRender.ComponentProps<"div">;
-/** The scrolling card that holds the `Table`, dimmed while its rows are stale. */
-export declare const Scroller: ({ render, className, ref, ...props }: DataTableScrollerProps) => ReactNode;
+/**
+ * The scrolling card that holds the `Table`: the `Stale.Content` of the rows,
+ * dimmed while they are stale.
+ *
+ * @example
+ * <DataTable.Scroller><DataTable.Table>…</DataTable.Table></DataTable.Scroller>
+ */
+export declare const Scroller: ({ className, ...props }: DataTableScrollerProps) => ReactNode;
 /** What covers the table once a refresh is slow: its `Stale.Message` and `Stale.Retry`. */
 export declare const StaleOverlay: ({ className, ...props }: StaleOverlayProps) => ReactNode;
 export type DataTableTableProps = useRender.ComponentProps<"table">;
@@ -51,19 +64,34 @@ export declare const HeaderCell: <TData extends Record<string, unknown>>({ heade
 export type DataTableSortButtonProps<TData extends Record<string, unknown>> = Omit<ComponentProps<"button">, "ref"> & Readonly<{
     /** The header whose column this sorts. */
     header: TableHeader<DataTableFeatures, TData>;
-    /** The glyph while the column sorts ascending. */
-    sortAscendingIcon?: ReactNode;
-    /** The glyph while the column sorts descending. */
-    sortDescendingIcon?: ReactNode;
-    /** The glyph while the column is not sorted. */
-    unsortedIcon?: ReactNode;
 }>;
 /**
  * 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.
+ * draws the column's header unless given children, such as the header and a
+ * `SortIcon`.
+ *
+ * @example
+ * <DataTable.SortButton header={header} />
+ */
+export declare const SortButton: <TData extends Record<string, unknown>>({ header, className, children, onClick, ...props }: DataTableSortButtonProps<TData>) => ReactNode;
+/** Which way a column sorts, or `none`, as a `SortIcon` hands it to its children. */
+export type DataTableSort = "asc" | "desc" | "none";
+export type DataTableSortIconProps<TData extends Record<string, unknown>> = Omit<useRender.ComponentProps<"span">, "children"> & Readonly<{
+    /** The header whose column's sort this shows. */
+    header: TableHeader<DataTableFeatures, TData>;
+    /** The glyph for the column's sort. Nothing returned, nothing drawn. */
+    children: (sort: DataTableSort) => ReactNode;
+}>;
+/**
+ * The glyph for a column's sort, beside the header in a `SortButton`, set as
+ * `data-sort`. Renders nothing for a sort without a glyph.
+ *
+ * @example
+ * <DataTable.SortIcon header={header}>
+ * 	{sort => (sort === "asc" ? <ArrowUpwardIcon /> : sort === "desc" ? <ArrowDownwardIcon /> : null)}
+ * </DataTable.SortIcon>
  */
-export declare const SortButton: <TData extends Record<string, unknown>>({ header, sortAscendingIcon, sortDescendingIcon, unsortedIcon, className, children, onClick, ...props }: DataTableSortButtonProps<TData>) => ReactNode;
+export declare const SortIcon: <TData extends Record<string, unknown>>({ header, render, className, ref, children, ...props }: DataTableSortIconProps<TData>) => ReactElement | null;
 export type DataTableBodyProps = useRender.ComponentProps<"tbody">;
 /** The body: the page's `Row`s, the `PlaceholderRows` or a `StateRow`. */
 export declare const Body: ({ render, ref, ...props }: DataTableBodyProps) => ReactElement;

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

@@ -161,158 +161,137 @@ var RefreshFailed = (t0) => {
 };
 /**
 * 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`.
+* and is the `Stale.Root` of the rows, so it takes a `Scroller` and a
+* `StaleOverlay`.
+*
+* @example
+* <DataTable.Frame>
+* 	<DataTable.Scroller>…</DataTable.Scroller>
+* 	<DataTable.StaleOverlay>…</DataTable.StaleOverlay>
+* </DataTable.Frame>
 */
 var Frame = (t0) => {
-	const $ = c(25);
-	let children;
+	const $ = c(23);
 	let className;
 	let props;
 	let ref;
 	let render;
 	if ($[0] !== t0) {
-		({render, className, ref, children, ...props} = t0);
+		({render, className, ref, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = ref;
-		$[5] = render;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
 	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-		ref = $[4];
-		render = $[5];
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
 	}
 	const { table } = useDataTable();
 	const { stale } = useDataTableView();
 	let t1;
 	let t2;
-	if ($[6] !== table) {
+	if ($[5] !== table) {
 		const columns = table.getAllLeafColumns();
 		t1 = useStickyOffsets;
 		t2 = columns.filter(_temp).map(_temp2).join(",");
-		$[6] = table;
-		$[7] = t1;
-		$[8] = t2;
+		$[5] = table;
+		$[6] = t1;
+		$[7] = t2;
 	} else {
-		t1 = $[7];
-		t2 = $[8];
+		t1 = $[6];
+		t2 = $[7];
 	}
 	const frameRef = t1(t2);
 	let t3;
-	if ($[9] !== frameRef || $[10] !== ref) {
+	if ($[8] !== frameRef || $[9] !== ref) {
 		t3 = ref === void 0 ? frameRef : [frameRef, ref];
-		$[9] = frameRef;
-		$[10] = ref;
-		$[11] = t3;
-	} else t3 = $[11];
+		$[8] = frameRef;
+		$[9] = ref;
+		$[10] = t3;
+	} else t3 = $[10];
 	let t4;
-	if ($[12] !== className) {
+	if ($[11] !== className) {
 		t4 = clsx(data_table_module_default.scrollFrame, className);
-		$[12] = className;
-		$[13] = t4;
-	} else t4 = $[13];
+		$[11] = className;
+		$[12] = t4;
+	} else t4 = $[12];
 	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 = {
+	if ($[13] !== props || $[14] !== t4) {
+		t5 = {
 			...props,
-			className: t4,
-			children: t5
+			className: t4
 		};
-		$[17] = props;
-		$[18] = t4;
-		$[19] = t5;
-		$[20] = t6;
-	} else t6 = $[20];
-	let t7;
-	if ($[21] !== render || $[22] !== t3 || $[23] !== t6) {
-		t7 = {
+		$[13] = props;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== render || $[17] !== t3 || $[18] !== t5) {
+		t6 = {
 			defaultTagName: "div",
 			render,
 			ref: t3,
-			props: t6
+			props: t5
 		};
-		$[21] = render;
-		$[22] = t3;
-		$[23] = t6;
-		$[24] = t7;
-	} else t7 = $[24];
-	return useRender(t7);
+		$[16] = render;
+		$[17] = t3;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	const element = useRender(t6);
+	let t7;
+	if ($[20] !== element || $[21] !== stale) {
+		t7 = /* @__PURE__ */ jsx(Stale.Root, {
+			busy: stale,
+			render: element
+		});
+		$[20] = element;
+		$[21] = stale;
+		$[22] = t7;
+	} else t7 = $[22];
+	return t7;
 };
-/** The scrolling card that holds the `Table`, dimmed while its rows are stale. */
+/**
+* The scrolling card that holds the `Table`: the `Stale.Content` of the rows,
+* dimmed while they are stale.
+*
+* @example
+* <DataTable.Scroller><DataTable.Table>…</DataTable.Table></DataTable.Scroller>
+*/
 var Scroller = (t0) => {
-	const $ = c(16);
+	const $ = c(8);
 	let className;
 	let props;
-	let ref;
-	let render;
 	if ($[0] !== t0) {
-		({render, className, ref, ...props} = t0);
+		({className, ...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) {
+	if ($[3] !== className) {
 		t1 = clsx(data_table_module_default.contentWrap, className);
-		$[5] = className;
-		$[6] = t1;
-	} else t1 = $[6];
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[7] !== props || $[8] !== t1) {
-		t2 = {
-			...props,
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Stale.Content, {
 			"data-scroller": true,
+			...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];
-	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;
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 };
 /** What covers the table once a refresh is slow: its `Stale.Message` and `Stale.Retry`. */
 var StaleOverlay = (t0) => {
@@ -639,105 +618,167 @@ var HeaderCell = (t0) => {
 };
 /**
 * 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.
+* draws the column's header unless given children, such as the header and a
+* `SortIcon`.
+*
+* @example
+* <DataTable.SortButton header={header} />
 */
 var SortButton = (t0) => {
-	const $ = c(31);
+	const $ = c(21);
 	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);
+		({header, 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();
+	const { table } = 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;
+	if ($[6] !== className) {
+		t1 = clsx(data_table_module_default.sortToggle, className);
+		$[6] = className;
+		$[7] = t1;
+	} else t1 = $[7];
 	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) => {
+	if ($[8] !== header || $[9] !== onClick || $[10] !== table) {
+		t2 = (event) => {
 			onClick?.(event);
 			header.column.toggleSorting();
 			table.setPageIndex(0);
 		};
-		$[14] = header.column;
-		$[15] = onClick;
-		$[16] = table;
-		$[17] = t3;
-	} else t3 = $[17];
+		$[8] = header;
+		$[9] = onClick;
+		$[10] = table;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== children || $[13] !== header || $[14] !== table) {
+		t3 = children ?? /* @__PURE__ */ jsx(table.FlexRender, { header });
+		$[12] = children;
+		$[13] = header;
+		$[14] = table;
+		$[15] = t3;
+	} else t3 = $[15];
 	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", {
+	if ($[16] !== props || $[17] !== t1 || $[18] !== t2 || $[19] !== t3) {
+		t4 = /* @__PURE__ */ jsx("button", {
 			type: "button",
 			...props,
-			className: t2,
-			onClick: t3,
-			children: [t4, t5]
+			className: t1,
+			onClick: t2,
+			children: t3
 		});
-		$[25] = props;
-		$[26] = t2;
-		$[27] = t3;
-		$[28] = t4;
-		$[29] = t5;
-		$[30] = t6;
-	} else t6 = $[30];
-	return t6;
+		$[16] = props;
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t3;
+		$[20] = t4;
+	} else t4 = $[20];
+	return t4;
+};
+/**
+* The glyph for a column's sort, beside the header in a `SortButton`, set as
+* `data-sort`. Renders nothing for a sort without a glyph.
+*
+* @example
+* <DataTable.SortIcon header={header}>
+* 	{sort => (sort === "asc" ? <ArrowUpwardIcon /> : sort === "desc" ? <ArrowDownwardIcon /> : null)}
+* </DataTable.SortIcon>
+*/
+var SortIcon = (t0) => {
+	const $ = c(24);
+	let children;
+	let className;
+	let header;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({header, render, className, ref, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = header;
+		$[4] = props;
+		$[5] = ref;
+		$[6] = render;
+	} else {
+		children = $[1];
+		className = $[2];
+		header = $[3];
+		props = $[4];
+		ref = $[5];
+		render = $[6];
+	}
+	const { sorting } = useDataTable();
+	let sort;
+	let t1;
+	if ($[7] !== children || $[8] !== header.column.id || $[9] !== sorting) {
+		const sorted = sortOf(sorting, header.column.id);
+		sort = sorted === false ? "none" : sorted;
+		t1 = children(sort);
+		$[7] = children;
+		$[8] = header.column.id;
+		$[9] = sorting;
+		$[10] = sort;
+		$[11] = t1;
+	} else {
+		sort = $[10];
+		t1 = $[11];
+	}
+	const icon = t1;
+	const t2 = icon !== void 0 && icon !== null;
+	let t3;
+	if ($[12] !== className) {
+		t3 = clsx(data_table_module_default.sortIcon, className);
+		$[12] = className;
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] !== icon || $[15] !== props || $[16] !== sort || $[17] !== t3) {
+		t4 = {
+			"aria-hidden": true,
+			...props,
+			"data-sort": sort,
+			className: t3,
+			children: icon
+		};
+		$[14] = icon;
+		$[15] = props;
+		$[16] = sort;
+		$[17] = t3;
+		$[18] = t4;
+	} else t4 = $[18];
+	let t5;
+	if ($[19] !== ref || $[20] !== render || $[21] !== t2 || $[22] !== t4) {
+		t5 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			enabled: t2,
+			props: t4
+		};
+		$[19] = ref;
+		$[20] = render;
+		$[21] = t2;
+		$[22] = t4;
+		$[23] = t5;
+	} else t5 = $[23];
+	return useRender(t5);
 };
 /** The body: the page's `Row`s, the `PlaceholderRows` or a `StateRow`. */
 var Body = (t0) => {
@@ -1179,4 +1220,4 @@ function _temp(column) {
 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 };
+export { Body, Cell, ErrorMessage, Frame, Head, HeaderCell, HeaderRow, LoadingCaption, PlaceholderRows, RefreshFailed, Row, Scroller, SortButton, SortIcon, StaleOverlay, StateRow, SubRow, Table, useDataTableView };

package/dist/data-table/data-table-selection.d.ts

@@ -1,5 +1,6 @@
+import { useRender } from "@base-ui/react/use-render";
 import type { ColumnDef } from "@tanstack/react-table";
-import { type ReactNode } from "react";
+import { type ComponentPropsWithRef, type ReactElement, type ReactNode } from "react";
 import type { DataTableColumnMeta, DataTableFeatures } from "./table-features.ts";
 export type SelectionColumnOptions = Readonly<{
     sticky?: DataTableColumnMeta["sticky"];
@@ -24,6 +25,86 @@ export type SelectionColumnOptions = Readonly<{
  * ];
  */
 export declare const selectionColumn: <TRow extends Record<string, unknown>>({ sticky, selectPageLabel, selectRowLabel, checkIcon, indeterminateIcon, }: SelectionColumnOptions) => ColumnDef<DataTableFeatures, TRow>;
+export type DataTableSelectionBarRootProps = useRender.ComponentProps<"div"> & Readonly<{
+    /** How many rows match, selected or not. */
+    totalRows: number;
+}>;
+/**
+ * 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>
+ */
+declare const SelectionBarRoot: ({ totalRows, render, className, ref, ...props }: DataTableSelectionBarRootProps) => ReactNode;
+export type DataTableSelectionBarSummaryProps = Omit<useRender.ComponentProps<"span">, "children"> & Readonly<{
+    /** What the bar says while nothing is selected, such as "30 invoices". */
+    total?: ReactNode;
+    /** How many of the matching rows are selected, such as "3 of 30 selected". */
+    countLabel: (selected: number, total: number) => string;
+}>;
+/**
+ * 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`} />
+ */
+declare const SelectionBarSummary: ({ total, countLabel, render, className, ref, ...props }: DataTableSelectionBarSummaryProps) => ReactElement;
+export type DataTableSelectionBarStatusProps = DataTableSelectionBarSummaryProps;
+/**
+ * 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`} />
+ */
+declare const SelectionBarStatus: ({ total, countLabel, render, className, ref, ...props }: DataTableSelectionBarStatusProps) => ReactElement;
+export type DataTableSelectionBarActionsProps = useRender.ComponentProps<"div">;
+/**
+ * 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>
+ */
+declare const SelectionBarActions: ({ render, className, ref, ...props }: DataTableSelectionBarActionsProps) => ReactElement;
+/** The props of a selection bar button part: the button's own, but the click, which the part owns. */
+type SelectionButtonProps = Omit<ComponentPropsWithRef<"button">, "onClick" | "type" | "children"> & Readonly<{
+    /** The button to render, such as `<Button variant="tertiary">Clear selection</Button>`. */
+    render: useRender.RenderProp;
+}>;
+export type DataTableSelectionBarClearProps = SelectionButtonProps;
+/**
+ * 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>} />
+ */
+declare const SelectionBarClear: ({ render, ref, ...props }: DataTableSelectionBarClearProps) => ReactElement;
+export type DataTableSelectionBarSelectAllProps = SelectionButtonProps;
+/**
+ * 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>} />
+ */
+declare const SelectionBarSelectAll: ({ render, className, ref, ...props }: DataTableSelectionBarSelectAllProps) => ReactElement | null;
+export type DataTableSelectionBarBulkProps = useRender.ComponentProps<"div">;
+/**
+ * The caller's bulk actions for the selection, at the end of the `Actions`.
+ *
+ * @example
+ * <DataTable.SelectionBar.Bulk><Button>Export</Button></DataTable.SelectionBar.Bulk>
+ */
+declare const SelectionBarBulk: ({ render, className, ref, ...props }: DataTableSelectionBarBulkProps) => ReactElement;
 export type DataTableSelectionBarProps = Readonly<{
     /** What the bar says while nothing is selected, such as "30 invoices". */
     total?: ReactNode;
@@ -38,9 +119,30 @@ export type DataTableSelectionBarProps = Readonly<{
     children?: ReactNode;
     className?: string;
 }>;
+declare const SelectionBarPrefab: ({ total, totalRows, countLabel, clearLabel, selectAllLabel, children, className, }: DataTableSelectionBarProps) => ReactNode;
+/** The parts of a selection bar, hanging off its prefab. */
+export type DataTableSelectionBarParts = typeof SelectionBarPrefab & Readonly<{
+    Root: typeof SelectionBarRoot;
+    Summary: typeof SelectionBarSummary;
+    Status: typeof SelectionBarStatus;
+    Actions: typeof SelectionBarActions;
+    Clear: typeof SelectionBarClear;
+    SelectAll: typeof SelectionBarSelectAll;
+    Bulk: typeof SelectionBarBulk;
+}>;
 /**
  * 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.
+ * 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}`}
+ * />
  */
-export declare const DataTableSelectionBar: ({ total, totalRows, countLabel, clearLabel, selectAllLabel, children, className, }: DataTableSelectionBarProps) => ReactNode;
+export declare const DataTableSelectionBar: DataTableSelectionBarParts;
+export {};