@primer/react 38.41.0 → 38.42.0-rc.242ba780a

package/dist/DataTable/DataTable.js

@@ -1,6 +1,6 @@
 import { c } from "../utils/react-compiler-runtime.js";
 import { useTable } from "./useTable.js";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableSortHeader } from "./Table.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableRowSelection, TableSelectionHeader, TableSortHeader } from "./Table.js";
 import { TableGroup } from "./TableGroup.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/DataTable/DataTable.tsx
@@ -8,34 +8,85 @@ function defaultGetRowId(row) {
 	return row.id;
 }
 function DataTableImplementation(t0) {
-	const $ = c(28);
-	const { "aria-labelledby": labelledby, "aria-describedby": describedby, cellPadding, columns, data, initialSortColumn, initialSortDirection, externalSorting, getRowId: t1, onToggleSort } = t0;
+	const $ = c(46);
+	const { "aria-labelledby": labelledby, "aria-describedby": describedby, cellPadding, columns, data, initialSortColumn, initialSortDirection, externalSorting, getRowId: t1, onToggleSort, rowSelection: t2, selectedRows, defaultSelectedRows, onSelectionChange, isRowSelectable } = t0;
 	const getRowId = t1 === void 0 ? defaultGetRowId : t1;
-	let t2;
-	if ($[0] !== columns || $[1] !== data || $[2] !== externalSorting || $[3] !== getRowId || $[4] !== initialSortColumn || $[5] !== initialSortDirection) {
-		t2 = {
+	const rowSelection = t2 === void 0 ? false : t2;
+	let t3;
+	if ($[0] !== columns || $[1] !== data || $[2] !== defaultSelectedRows || $[3] !== externalSorting || $[4] !== getRowId || $[5] !== initialSortColumn || $[6] !== initialSortDirection || $[7] !== isRowSelectable || $[8] !== onSelectionChange || $[9] !== rowSelection || $[10] !== selectedRows) {
+		t3 = {
 			data,
 			columns,
 			initialSortColumn,
 			initialSortDirection,
 			getRowId,
-			externalSorting
+			externalSorting,
+			rowSelection,
+			selectedRows,
+			defaultSelectedRows,
+			onSelectionChange,
+			isRowSelectable
 		};
 		$[0] = columns;
 		$[1] = data;
-		$[2] = externalSorting;
-		$[3] = getRowId;
-		$[4] = initialSortColumn;
-		$[5] = initialSortDirection;
-		$[6] = t2;
-	} else t2 = $[6];
-	const { headers, bodies, actions, gridTemplateColumns } = useTable(t2);
-	const renderRow = _temp;
-	let t3;
-	if ($[7] !== actions || $[8] !== headers || $[9] !== onToggleSort) {
-		let t4;
-		if ($[11] !== actions || $[12] !== onToggleSort) {
-			t4 = (header) => {
+		$[2] = defaultSelectedRows;
+		$[3] = externalSorting;
+		$[4] = getRowId;
+		$[5] = initialSortColumn;
+		$[6] = initialSortDirection;
+		$[7] = isRowSelectable;
+		$[8] = onSelectionChange;
+		$[9] = rowSelection;
+		$[10] = selectedRows;
+		$[11] = t3;
+	} else t3 = $[11];
+	const { headers, bodies, actions, selection, gridTemplateColumns } = useTable(t3);
+	let t4;
+	if ($[12] !== actions || $[13] !== rowSelection || $[14] !== selection) {
+		t4 = (row) => /* @__PURE__ */ jsxs(TableRow, { children: [rowSelection ? /* @__PURE__ */ jsx(TableRowSelection, {
+			selected: row.selected,
+			disabled: !row.selectable,
+			headers: selection.headerId,
+			"aria-label": row.selectionLabelledBy ? void 0 : `Select row ${row.selectionId}`,
+			"aria-labelledby": row.selectionLabelledBy,
+			onToggleSelect: () => {
+				actions.toggleRowSelection(row);
+			}
+		}) : null, row.getCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
+			id: cell.domId,
+			scope: cell.rowHeader ? "row" : void 0,
+			align: cell.column.align,
+			headers: cell.headers,
+			children: cell.column.renderCell ? cell.column.renderCell(row.getValue()) : cell.getValue()
+		}, cell.id))] }, `${typeof row.selectionId}:${row.selectionId}`);
+		$[12] = actions;
+		$[13] = rowSelection;
+		$[14] = selection;
+		$[15] = t4;
+	} else t4 = $[15];
+	const renderRow = t4;
+	let t5;
+	if ($[16] !== actions || $[17] !== rowSelection || $[18] !== selection) {
+		t5 = rowSelection ? /* @__PURE__ */ jsx(TableSelectionHeader, {
+			id: selection.headerId,
+			selection: selection.allSelected ? "all" : selection.someSelected ? "some" : "none",
+			disabled: selection.selectableCount === 0,
+			"aria-label": "Select rows",
+			"aria-description": selection.selectableCount > 0 ? `Select all ${selection.selectableCount} ${selection.selectableCount === 1 ? "row" : "rows"}` : void 0,
+			onToggleSelect: () => {
+				actions.toggleAllRows();
+			}
+		}) : null;
+		$[16] = actions;
+		$[17] = rowSelection;
+		$[18] = selection;
+		$[19] = t5;
+	} else t5 = $[19];
+	let t6;
+	if ($[20] !== actions || $[21] !== headers || $[22] !== onToggleSort) {
+		let t7;
+		if ($[24] !== actions || $[25] !== onToggleSort) {
+			t7 = (header) => {
 				if (header.isSortable()) return /* @__PURE__ */ jsx(TableSortHeader, {
 					id: header.domId,
 					align: header.column.align,
@@ -53,69 +104,65 @@ function DataTableImplementation(t0) {
 					children: typeof header.column.header === "string" ? header.column.header : header.column.header()
 				}, header.id);
 			};
-			$[11] = actions;
-			$[12] = onToggleSort;
-			$[13] = t4;
-		} else t4 = $[13];
-		t3 = headers.map(t4);
-		$[7] = actions;
-		$[8] = headers;
-		$[9] = onToggleSort;
-		$[10] = t3;
-	} else t3 = $[10];
-	let t4;
-	if ($[14] !== t3) {
-		t4 = /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: t3 }) });
-		$[14] = t3;
-		$[15] = t4;
-	} else t4 = $[15];
-	let t5;
-	if ($[16] !== bodies || $[17] !== headers.length) {
-		let t6;
-		if ($[19] !== headers.length) {
-			t6 = (body) => body.type === "row-group" ? /* @__PURE__ */ jsx(TableGroup, {
+			$[24] = actions;
+			$[25] = onToggleSort;
+			$[26] = t7;
+		} else t7 = $[26];
+		t6 = headers.map(t7);
+		$[20] = actions;
+		$[21] = headers;
+		$[22] = onToggleSort;
+		$[23] = t6;
+	} else t6 = $[23];
+	let t7;
+	if ($[27] !== t5 || $[28] !== t6) {
+		t7 = /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [t5, t6] }) });
+		$[27] = t5;
+		$[28] = t6;
+		$[29] = t7;
+	} else t7 = $[29];
+	let t8;
+	if ($[30] !== bodies || $[31] !== headers.length || $[32] !== renderRow || $[33] !== rowSelection) {
+		let t9;
+		if ($[35] !== headers.length || $[36] !== renderRow || $[37] !== rowSelection) {
+			t9 = (body) => body.type === "row-group" ? /* @__PURE__ */ jsx(TableGroup, {
 				id: body.id,
 				label: body.label,
 				rowCount: body.rows.length,
-				colSpan: headers.length,
+				colSpan: headers.length + (rowSelection ? 1 : 0),
 				"aria-label": body["aria-label"],
 				children: body.rows.map(renderRow)
 			}, body.key) : /* @__PURE__ */ jsx(TableBody, { children: body.rows.map(renderRow) }, body.key);
-			$[19] = headers.length;
-			$[20] = t6;
-		} else t6 = $[20];
-		t5 = bodies.map(t6);
-		$[16] = bodies;
-		$[17] = headers.length;
-		$[18] = t5;
-	} else t5 = $[18];
-	let t6;
-	if ($[21] !== cellPadding || $[22] !== describedby || $[23] !== gridTemplateColumns || $[24] !== labelledby || $[25] !== t4 || $[26] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(Table, {
+			$[35] = headers.length;
+			$[36] = renderRow;
+			$[37] = rowSelection;
+			$[38] = t9;
+		} else t9 = $[38];
+		t8 = bodies.map(t9);
+		$[30] = bodies;
+		$[31] = headers.length;
+		$[32] = renderRow;
+		$[33] = rowSelection;
+		$[34] = t8;
+	} else t8 = $[34];
+	let t9;
+	if ($[39] !== cellPadding || $[40] !== describedby || $[41] !== gridTemplateColumns || $[42] !== labelledby || $[43] !== t7 || $[44] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Table, {
 			"aria-labelledby": labelledby,
 			"aria-describedby": describedby,
 			cellPadding,
 			gridTemplateColumns,
-			children: [t4, t5]
+			children: [t7, t8]
 		});
-		$[21] = cellPadding;
-		$[22] = describedby;
-		$[23] = gridTemplateColumns;
-		$[24] = labelledby;
-		$[25] = t4;
-		$[26] = t5;
-		$[27] = t6;
-	} else t6 = $[27];
-	return t6;
-}
-function _temp(row) {
-	return /* @__PURE__ */ jsx(TableRow, { children: row.getCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
-		id: cell.domId,
-		scope: cell.rowHeader ? "row" : void 0,
-		align: cell.column.align,
-		headers: cell.headers,
-		children: cell.column.renderCell ? cell.column.renderCell(row.getValue()) : cell.getValue()
-	}, cell.id)) }, row.id);
+		$[39] = cellPadding;
+		$[40] = describedby;
+		$[41] = gridTemplateColumns;
+		$[42] = labelledby;
+		$[43] = t7;
+		$[44] = t8;
+		$[45] = t9;
+	} else t9 = $[45];
+	return t9;
 }
 const DataTable = DataTableImplementation;
 //#endregion

package/dist/DataTable/{Table-50e68700.css → Table-6ee6a868.css}

@@ -1,2 +1,2 @@
-.prc-DataTable-TableContainer-hn0p3{column-gap:var(--base-size-8,.5rem);display:grid;grid-template-areas:"title actions" "divider divider" "subtitle subtitle" "filter filter" "table table" "footer footer";grid-template-columns:1fr 1fr}.prc-DataTable-TableTitle-nM43N{align-self:center;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);grid-area:title;line-height:20px}.prc-DataTable-TableSubtitle--L6Ho,.prc-DataTable-TableTitle-nM43N{color:var(--fgColor-default,#1f2328);margin:0}.prc-DataTable-TableSubtitle--L6Ho{font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);grid-area:subtitle;line-height:var(--text-title-lineHeight-small,1.5)}.prc-DataTable-TableActions-fkc2b{align-items:center;column-gap:var(--base-size-8,.5rem);display:flex;grid-area:actions;justify-self:end}.prc-DataTable-TableDivider-TRc3b{background-color:var(--borderColor-default,#d1d9e0);grid-area:divider;height:1px;margin-block-end:var(--base-size-8,.5rem);margin-block-start:var(--base-size-16,1rem);width:100%}.prc-DataTable-TableActions-fkc2b+.prc-DataTable-TableOverflowWrapper-bSqT-,.prc-DataTable-TableSubtitle--L6Ho+.prc-DataTable-TableOverflowWrapper-bSqT-,.prc-DataTable-TableTitle-nM43N+.prc-DataTable-TableOverflowWrapper-bSqT-{margin-block-start:var(--base-size-8,.5rem)}.prc-DataTable-Table-7ux1n,.prc-DataTable-TableOverflowWrapper-bSqT-{grid-area:table}.prc-DataTable-Table-7ux1n{--table-border-radius:0.375rem;--table-cell-padding:var(--cell-padding-block,0.5rem) var(--cell-padding-inline,0.75rem);--table-font-size:0.75rem;background-color:var(--bgColor-default,#fff);border-collapse:separate;border-spacing:0;display:grid;font-size:var(--table-font-size);grid-template-columns:var(--grid-template-columns);line-height:1.66667;width:100%}.prc-DataTable-Table-7ux1n:where([data-cell-padding=condensed]){--cell-padding-block:0.25rem;--cell-padding-inline:0.5rem}.prc-DataTable-Table-7ux1n:where([data-cell-padding=normal]){--cell-padding-block:0.5rem;--cell-padding-inline:0.75rem}.prc-DataTable-Table-7ux1n:where([data-cell-padding=spacious]){--cell-padding-block:0.75rem;--cell-padding-inline:1rem}.prc-DataTable-TableCell-Fk4ve:first-child,.prc-DataTable-TableHeader-eyTab:first-child{border-inline-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0)}.prc-DataTable-TableCell-Fk4ve:last-child,.prc-DataTable-TableHeader-eyTab:last-child{border-inline-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0)}.prc-DataTable-TableCell-Fk4ve,.prc-DataTable-TableHeader-eyTab{align-items:center;border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);display:flex;padding:var(--table-cell-padding);text-align:start}.prc-DataTable-TableCell-Fk4ve:where([data-cell-align=end]),.prc-DataTable-TableHeader-eyTab:where([data-cell-align=end]){display:flex;justify-content:flex-end;text-align:end}.prc-DataTable-TableHeader-eyTab[data-cell-align=end] .prc-DataTable-TableSortButton--aq0y{display:flex;flex-direction:row-reverse}.prc-DataTable-TableHead-4FaBf .prc-DataTable-TableRow-Icc7F:first-of-type .prc-DataTable-TableHeader-eyTab{border-block-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0)}.prc-DataTable-TableHead-4FaBf .prc-DataTable-TableRow-Icc7F:first-of-type .prc-DataTable-TableHeader-eyTab:first-child{border-top-left-radius:var(--table-border-radius)}.prc-DataTable-TableHead-4FaBf .prc-DataTable-TableRow-Icc7F:first-of-type .prc-DataTable-TableHeader-eyTab:last-child{border-top-right-radius:var(--table-border-radius)}.prc-DataTable-TableOverflowWrapper-bSqT-:last-child .prc-DataTable-Table-7ux1n .prc-DataTable-TableBody-QKQy2:last-of-type .prc-DataTable-TableRow-Icc7F:last-of-type .prc-DataTable-TableCell-Fk4ve:first-child{border-bottom-left-radius:var(--table-border-radius)}.prc-DataTable-TableOverflowWrapper-bSqT-:last-child .prc-DataTable-Table-7ux1n .prc-DataTable-TableBody-QKQy2:last-of-type .prc-DataTable-TableRow-Icc7F:last-of-type .prc-DataTable-TableCell-Fk4ve:last-child{border-bottom-right-radius:var(--table-border-radius)}.prc-DataTable-TableRow-Icc7F>:first-child .prc-DataTable-TableCellSkeletonItem-bGhwZ,.prc-DataTable-TableRow-Icc7F>:first-child:not(.prc-DataTable-TableCellSkeleton-DMdM5){padding-inline-start:var(--base-size-16,1rem)}.prc-DataTable-TableRow-Icc7F>:last-child .prc-DataTable-TableCellSkeletonItem-bGhwZ,.prc-DataTable-TableRow-Icc7F>:last-child:not(.prc-DataTable-TableCellSkeleton-DMdM5){padding-inline-end:var(--base-size-16,1rem)}.prc-DataTable-TableHeader-eyTab{background-color:var(--bgColor-muted,#f6f8fa);border-block-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);color:var(--fgColor-muted,#59636e);font-weight:var(--base-text-weight-semibold,600)}.prc-DataTable-TableHeader-eyTab:where([aria-sort=ascending]),.prc-DataTable-TableHeader-eyTab:where([aria-sort=descending]){color:var(--fgColor-default,#1f2328)}.prc-DataTable-TableSortIcon-wHvJw{visibility:hidden}.prc-DataTable-TableHeader-eyTab .prc-DataTable-TableSortButton--aq0y:focus .prc-DataTable-TableSortIcon--ascending-Lpx6z,.prc-DataTable-TableHeader-eyTab:hover .prc-DataTable-TableSortIcon--ascending-Lpx6z,.prc-DataTable-TableHeader-eyTab[aria-sort=ascending] .prc-DataTable-TableSortIcon--ascending-Lpx6z,.prc-DataTable-TableHeader-eyTab[aria-sort=descending] .prc-DataTable-TableSortIcon--descending-hHJGo{visibility:visible}.prc-DataTable-TableRow-Icc7F:hover .prc-DataTable-TableCell-Fk4ve:not(.prc-DataTable-TableCellSkeleton-DMdM5){background-color:var(--control-transparent-bgColor-hover,#818b981a)}.prc-DataTable-TableCell-Fk4ve:where([scope=row]){align-items:center;color:var(--fgColor-default,#1f2328);display:flex;font-weight:var(--base-text-weight-semibold,600)}.prc-DataTable-TableCellSkeleton-DMdM5{padding:0}.prc-DataTable-TableCellSkeletonItems-Ljhq5{display:flex;flex-direction:column;width:100%}.prc-DataTable-TableCellSkeletonItem-bGhwZ{padding:var(--table-cell-padding)}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+1){--skeleton-item-width:85%}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+2){--skeleton-item-width:67.5%}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+3){--skeleton-item-width:80%}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+4){--skeleton-item-width:60%}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+5){--skeleton-item-width:75%}.prc-DataTable-TableCellSkeletonItem-bGhwZ [data-component=SkeletonText]{width:var(--skeleton-item-width)}.prc-DataTable-TableCellSkeletonItem-bGhwZ:not(:last-of-type){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0)}.prc-DataTable-TableSortButton--aq0y{column-gap:.5rem}.prc-DataTable-TableBody-QKQy2,.prc-DataTable-TableGroupHeaderBody-K-YqR,.prc-DataTable-TableHead-4FaBf,.prc-DataTable-TableRow-Icc7F{display:contents}@supports (grid-template-columns:subgrid){.prc-DataTable-TableBody-QKQy2,.prc-DataTable-TableGroupHeaderBody-K-YqR,.prc-DataTable-TableHead-4FaBf,.prc-DataTable-TableRow-Icc7F{display:grid;grid-column:-1/1;grid-template-columns:subgrid}}.prc-DataTable-TableGroupHeaderCell-vnb30{background-color:var(--bgColor-muted,#f6f8fa);border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);border-inline-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);border-inline-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);color:var(--fgColor-muted,#59636e);grid-column:1/-1;padding:var(--table-cell-padding);text-align:start}.prc-DataTable-TableGroupHeaderCell-vnb30,.prc-DataTable-TableGroupHeaderContent-H9FbA{align-items:baseline;column-gap:var(--base-size-8,.5rem);display:flex}.prc-DataTable-TableGroupHeaderLabel--c-od{color:var(--fgColor-default,#1f2328);font-weight:var(--base-text-weight-semibold,600)}.prc-DataTable-PlaceholderText-8bHo7,.prc-DataTable-TableGroupHeaderCount-6r8Pj{color:var(--fgColor-muted,#59636e)}
-/*# sourceMappingURL=Table-50e68700.css.map */
+.prc-DataTable-TableContainer-hn0p3{column-gap:var(--base-size-8,.5rem);display:grid;grid-template-areas:"title actions" "divider divider" "subtitle subtitle" "filter filter" "table table" "footer footer";grid-template-columns:1fr 1fr}.prc-DataTable-TableTitle-nM43N{align-self:center;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);grid-area:title;line-height:20px}.prc-DataTable-TableSubtitle--L6Ho,.prc-DataTable-TableTitle-nM43N{color:var(--fgColor-default,#1f2328);margin:0}.prc-DataTable-TableSubtitle--L6Ho{font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);grid-area:subtitle;line-height:var(--text-title-lineHeight-small,1.5)}.prc-DataTable-TableActions-fkc2b{align-items:center;column-gap:var(--base-size-8,.5rem);display:flex;grid-area:actions;justify-self:end}.prc-DataTable-TableDivider-TRc3b{background-color:var(--borderColor-default,#d1d9e0);grid-area:divider;height:1px;margin-block-end:var(--base-size-8,.5rem);margin-block-start:var(--base-size-16,1rem);width:100%}.prc-DataTable-TableActions-fkc2b+.prc-DataTable-TableOverflowWrapper-bSqT-,.prc-DataTable-TableSubtitle--L6Ho+.prc-DataTable-TableOverflowWrapper-bSqT-,.prc-DataTable-TableTitle-nM43N+.prc-DataTable-TableOverflowWrapper-bSqT-{margin-block-start:var(--base-size-8,.5rem)}.prc-DataTable-Table-7ux1n,.prc-DataTable-TableOverflowWrapper-bSqT-{grid-area:table}.prc-DataTable-Table-7ux1n{--table-border-radius:0.375rem;--table-cell-padding:var(--cell-padding-block,0.5rem) var(--cell-padding-inline,0.75rem);--table-font-size:0.75rem;background-color:var(--bgColor-default,#fff);border-collapse:separate;border-spacing:0;display:grid;font-size:var(--table-font-size);grid-template-columns:var(--grid-template-columns);line-height:1.66667;width:100%}.prc-DataTable-Table-7ux1n:where([data-cell-padding=condensed]){--cell-padding-block:0.25rem;--cell-padding-inline:0.5rem}.prc-DataTable-Table-7ux1n:where([data-cell-padding=normal]){--cell-padding-block:0.5rem;--cell-padding-inline:0.75rem}.prc-DataTable-Table-7ux1n:where([data-cell-padding=spacious]){--cell-padding-block:0.75rem;--cell-padding-inline:1rem}.prc-DataTable-TableCell-Fk4ve:first-child,.prc-DataTable-TableHeader-eyTab:first-child{border-inline-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0)}.prc-DataTable-TableCell-Fk4ve:last-child,.prc-DataTable-TableHeader-eyTab:last-child{border-inline-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0)}.prc-DataTable-TableCell-Fk4ve,.prc-DataTable-TableHeader-eyTab{align-items:center;border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);display:flex;padding:var(--table-cell-padding);text-align:start}.prc-DataTable-TableCell-Fk4ve:where([data-cell-align=end]),.prc-DataTable-TableHeader-eyTab:where([data-cell-align=end]){display:flex;justify-content:flex-end;text-align:end}.prc-DataTable-TableHeader-eyTab[data-cell-align=end] .prc-DataTable-TableSortButton--aq0y{display:flex;flex-direction:row-reverse}.prc-DataTable-TableHead-4FaBf .prc-DataTable-TableRow-Icc7F:first-of-type .prc-DataTable-TableHeader-eyTab{border-block-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0)}.prc-DataTable-TableHead-4FaBf .prc-DataTable-TableRow-Icc7F:first-of-type .prc-DataTable-TableHeader-eyTab:first-child{border-top-left-radius:var(--table-border-radius)}.prc-DataTable-TableHead-4FaBf .prc-DataTable-TableRow-Icc7F:first-of-type .prc-DataTable-TableHeader-eyTab:last-child{border-top-right-radius:var(--table-border-radius)}.prc-DataTable-TableOverflowWrapper-bSqT-:last-child .prc-DataTable-Table-7ux1n .prc-DataTable-TableBody-QKQy2:last-of-type .prc-DataTable-TableRow-Icc7F:last-of-type .prc-DataTable-TableCell-Fk4ve:first-child{border-bottom-left-radius:var(--table-border-radius)}.prc-DataTable-TableOverflowWrapper-bSqT-:last-child .prc-DataTable-Table-7ux1n .prc-DataTable-TableBody-QKQy2:last-of-type .prc-DataTable-TableRow-Icc7F:last-of-type .prc-DataTable-TableCell-Fk4ve:last-child{border-bottom-right-radius:var(--table-border-radius)}.prc-DataTable-TableRow-Icc7F>:first-child .prc-DataTable-TableCellSkeletonItem-bGhwZ,.prc-DataTable-TableRow-Icc7F>:first-child:not(.prc-DataTable-TableCellSkeleton-DMdM5){padding-inline-start:var(--base-size-16,1rem)}.prc-DataTable-TableRow-Icc7F>:last-child .prc-DataTable-TableCellSkeletonItem-bGhwZ,.prc-DataTable-TableRow-Icc7F>:last-child:not(.prc-DataTable-TableCellSkeleton-DMdM5){padding-inline-end:var(--base-size-16,1rem)}.prc-DataTable-TableHeader-eyTab{background-color:var(--bgColor-muted,#f6f8fa);border-block-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);color:var(--fgColor-muted,#59636e);font-weight:var(--base-text-weight-semibold,600)}.prc-DataTable-TableHeader-eyTab:where([aria-sort=ascending]),.prc-DataTable-TableHeader-eyTab:where([aria-sort=descending]){color:var(--fgColor-default,#1f2328)}.prc-DataTable-TableRowSelection-HwyDU,.prc-DataTable-TableSelectionHeader-Op0cK{justify-content:center}.prc-DataTable-TableSortIcon-wHvJw{visibility:hidden}.prc-DataTable-TableHeader-eyTab .prc-DataTable-TableSortButton--aq0y:focus .prc-DataTable-TableSortIcon--ascending-Lpx6z,.prc-DataTable-TableHeader-eyTab:hover .prc-DataTable-TableSortIcon--ascending-Lpx6z,.prc-DataTable-TableHeader-eyTab[aria-sort=ascending] .prc-DataTable-TableSortIcon--ascending-Lpx6z,.prc-DataTable-TableHeader-eyTab[aria-sort=descending] .prc-DataTable-TableSortIcon--descending-hHJGo{visibility:visible}.prc-DataTable-TableRow-Icc7F:hover .prc-DataTable-TableCell-Fk4ve:not(.prc-DataTable-TableCellSkeleton-DMdM5){background-color:var(--control-transparent-bgColor-hover,#818b981a)}.prc-DataTable-TableCell-Fk4ve:where([scope=row]){align-items:center;color:var(--fgColor-default,#1f2328);display:flex;font-weight:var(--base-text-weight-semibold,600)}.prc-DataTable-TableCellSkeleton-DMdM5{padding:0}.prc-DataTable-TableCellSkeletonItems-Ljhq5{display:flex;flex-direction:column;width:100%}.prc-DataTable-TableCellSkeletonItem-bGhwZ{padding:var(--table-cell-padding)}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+1){--skeleton-item-width:85%}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+2){--skeleton-item-width:67.5%}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+3){--skeleton-item-width:80%}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+4){--skeleton-item-width:60%}.prc-DataTable-TableCellSkeletonItem-bGhwZ:nth-of-type(5n+5){--skeleton-item-width:75%}.prc-DataTable-TableCellSkeletonItem-bGhwZ [data-component=SkeletonText]{width:var(--skeleton-item-width)}.prc-DataTable-TableCellSkeletonItem-bGhwZ:not(:last-of-type){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0)}.prc-DataTable-TableSortButton--aq0y{column-gap:.5rem}.prc-DataTable-TableBody-QKQy2,.prc-DataTable-TableGroupHeaderBody-K-YqR,.prc-DataTable-TableHead-4FaBf,.prc-DataTable-TableRow-Icc7F{display:contents}@supports (grid-template-columns:subgrid){.prc-DataTable-TableBody-QKQy2,.prc-DataTable-TableGroupHeaderBody-K-YqR,.prc-DataTable-TableHead-4FaBf,.prc-DataTable-TableRow-Icc7F{display:grid;grid-column:-1/1;grid-template-columns:subgrid}}.prc-DataTable-TableGroupHeaderCell-vnb30{background-color:var(--bgColor-muted,#f6f8fa);border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);border-inline-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);border-inline-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);color:var(--fgColor-muted,#59636e);grid-column:1/-1;padding:var(--table-cell-padding);text-align:start}.prc-DataTable-TableGroupHeaderCell-vnb30,.prc-DataTable-TableGroupHeaderContent-H9FbA{align-items:baseline;column-gap:var(--base-size-8,.5rem);display:flex}.prc-DataTable-TableGroupHeaderLabel--c-od{color:var(--fgColor-default,#1f2328);font-weight:var(--base-text-weight-semibold,600)}.prc-DataTable-PlaceholderText-8bHo7,.prc-DataTable-TableGroupHeaderCount-6r8Pj{color:var(--fgColor-muted,#59636e)}
+/*# sourceMappingURL=Table-6ee6a868.css.map */

package/dist/DataTable/Table-6ee6a868.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DataTable/Table.module.css.js"],"names":[],"mappings":"AACA,oCAUE,mCAA8B,CAT9B,YAAa,CAEb,uHAMiB,CAPjB,6BASF,CAGA,gCAQE,iBAAkB,CANlB,8CAAuC,CACvC,gDAA6C,CAI7C,eAAgB,CAFhB,gBAIF,CAGA,mEANE,oCAA6B,CAL7B,QAkBF,CAPA,mCAEE,4CAAsC,CACtC,8CAA2C,CAG3C,kBAAmB,CAFnB,kDAGF,CAGA,kCAGE,kBAAmB,CADnB,mCAA8B,CAD9B,YAAa,CAGb,iBAAkB,CAClB,gBACF,CAGA,kCAIE,mDAA4C,CAC5C,iBAAkB,CAHlB,UAAW,CAKX,yCAAoC,CADpC,2CAAuC,CALvC,UAOF,CAGA,mOAGE,2CACF,CAOA,qEAJE,eAsCF,CAlCA,2BAEE,8BAA+B,CAC/B,wFAA2F,CAC3F,yBAA0B,CAW1B,4CAAwC,CADxC,wBAAyB,CAFzB,gBAAiB,CANjB,YAAa,CAGb,gCAAiC,CAQjC,kDAAmD,CANnD,mBAA0B,CAJ1B,UA2BF,CAdE,gEACE,4BAA6B,CAC7B,4BACF,CAEA,6DACE,2BAA4B,CAC5B,6BACF,CAEA,+DACE,4BAA6B,CAC7B,0BACF,CAIF,wFAEE,6FACF,CAEA,sFAEE,2FACF,CAEA,gEAME,kBAAmB,CACnB,0FAA0E,CAL1E,YAAa,CAEb,iCAAkC,CAClC,gBAGF,CAEA,0HAEE,YAAa,CAEb,wBAAyB,CADzB,cAEF,CAEA,2FACE,YAAa,CACb,0BACF,CAEA,4GACE,4FACF,CAIA,wHAEE,iDACF,CAGA,uHAEE,kDACF,CAGA,kNAEE,oDACF,CAGA,iNAEE,qDACF,CAMA,6KAEE,6CACF,CAEA,2KAEE,2CACF,CAGA,iCAGE,6CAAsC,CACtC,4FAA4E,CAF5E,kCAA2B,CAD3B,gDAIF,CAEA,6HAEE,oCACF,CAEA,iFAEE,sBACF,CAGA,mCACE,iBACF,CASA,yZAEE,kBACF,CAGA,+GACE,mEACF,CAGA,kDAIE,kBAAmB,CADnB,oCAA6B,CAF7B,YAAa,CACb,gDAGF,CAGA,uCACE,SACF,CAEA,4CACE,YAAa,CAEb,qBAAsB,CADtB,UAEF,CAEA,2CAEE,iCAqBF,CAnBE,6DACE,yBACF,CAEA,6DACE,2BACF,CAEA,6DACE,yBACF,CAEA,6DACE,yBACF,CAEA,6DACE,yBACF,CAGF,yEACE,gCACF,CAEA,8DACE,0FACF,CAEA,qCACE,gBACF,CAGA,sIAIE,gBACF,CAEA,0CACE,sIAIE,YAAa,CAEb,gBAAkB,CADlB,6BAEF,CACF,CAEA,0CASE,6CAAsC,CAGtC,0FAA0E,CAD1E,2FAA2E,CAD3E,6FAA6E,CAF7E,kCAA2B,CAN3B,gBAAmB,CAInB,iCAAkC,CAClC,gBAMF,CAEA,uFAZE,oBAAqB,CACrB,mCAA8B,CAH9B,YAkBF,CAEA,2CAEE,oCAA6B,CAD7B,gDAEF,CAMA,gFACE,kCACF","file":"Table-6ee6a868.css","sourcesContent":["/* Container ---------------------------------------------------------------- */\n.TableContainer {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-areas:\n    'title actions'\n    'divider divider'\n    'subtitle subtitle'\n    'filter filter'\n    'table table'\n    'footer footer';\n  column-gap: var(--base-size-8);\n}\n\n/* TableTitle */\n.TableTitle {\n  margin: 0;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 20px;\n  color: var(--fgColor-default);\n  grid-area: title;\n  align-self: center;\n}\n\n/* TableSubtitle */\n.TableSubtitle {\n  margin: 0;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-title-lineHeight-small);\n  color: var(--fgColor-default);\n  grid-area: subtitle;\n}\n\n/* TableActions */\n.TableActions {\n  display: flex;\n  column-gap: var(--base-size-8);\n  align-items: center;\n  grid-area: actions;\n  justify-self: end;\n}\n\n/* TableDivider */\n.TableDivider {\n  width: 100%;\n  height: 1px;\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--borderColor-default);\n  grid-area: divider;\n  margin-block-start: var(--base-size-16);\n  margin-block-end: var(--base-size-8);\n}\n\n/* Spacing before the table */\n.TableTitle + .TableOverflowWrapper,\n.TableSubtitle + .TableOverflowWrapper,\n.TableActions + .TableOverflowWrapper {\n  margin-block-start: var(--base-size-8);\n}\n\n.TableOverflowWrapper {\n  grid-area: table;\n}\n\n/* Table -------------------------------------------------------------------- */\n.Table {\n  /* Default table styles */\n  --table-border-radius: 0.375rem;\n  --table-cell-padding: var(--cell-padding-block, 0.5rem) var(--cell-padding-inline, 0.75rem);\n  --table-font-size: 0.75rem;\n\n  display: grid;\n  width: 100%;\n  /* stylelint-disable-next-line primer/typography */\n  font-size: var(--table-font-size);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: calc(20 / 12);\n  border-spacing: 0;\n  /* stylelint-disable-next-line primer/borders */\n  border-collapse: separate;\n  background-color: var(--bgColor-default);\n  grid-area: table;\n  grid-template-columns: var(--grid-template-columns);\n\n  /* Density modes: condensed, normal, spacious */\n  &:where([data-cell-padding='condensed']) {\n    --cell-padding-block: 0.25rem;\n    --cell-padding-inline: 0.5rem;\n  }\n\n  &:where([data-cell-padding='normal']) {\n    --cell-padding-block: 0.5rem;\n    --cell-padding-inline: 0.75rem;\n  }\n\n  &:where([data-cell-padding='spacious']) {\n    --cell-padding-block: 0.75rem;\n    --cell-padding-inline: 1rem;\n  }\n}\n\n/* Borders */\n.TableCell:first-child,\n.TableHeader:first-child {\n  border-inline-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableCell:last-child,\n.TableHeader:last-child {\n  border-inline-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader,\n.TableCell {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--table-cell-padding);\n  text-align: start;\n  align-items: center;\n  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader:where([data-cell-align='end']),\n.TableCell:where([data-cell-align='end']) {\n  display: flex;\n  text-align: end;\n  justify-content: flex-end;\n}\n\n.TableHeader[data-cell-align='end'] .TableSortButton {\n  display: flex;\n  flex-direction: row-reverse;\n}\n\n.TableHead .TableRow:first-of-type .TableHeader {\n  border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n/* Border radius */\n/* stylelint-disable-next-line selector-max-specificity */\n.TableHead .TableRow:first-of-type .TableHeader:first-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-top-left-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.TableHead .TableRow:first-of-type .TableHeader:last-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-top-right-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */\n.TableOverflowWrapper:last-child .Table .TableBody:last-of-type .TableRow:last-of-type .TableCell:first-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-bottom-left-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */\n.TableOverflowWrapper:last-child .Table .TableBody:last-of-type .TableRow:last-of-type .TableCell:last-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-bottom-right-radius: var(--table-border-radius);\n}\n\n/**\n * Offset padding to make sure type aligns regardless of cell padding\n * selection\n */\n.TableRow > *:first-child:not(.TableCellSkeleton),\n.TableRow > *:first-child .TableCellSkeletonItem {\n  padding-inline-start: var(--base-size-16);\n}\n\n.TableRow > *:last-child:not(.TableCellSkeleton),\n.TableRow > *:last-child .TableCellSkeletonItem {\n  padding-inline-end: var(--base-size-16);\n}\n\n/* TableHeader */\n.TableHeader {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-muted);\n  background-color: var(--bgColor-muted);\n  border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader:where([aria-sort='descending']),\n.TableHeader:where([aria-sort='ascending']) {\n  color: var(--fgColor-default);\n}\n\n.TableSelectionHeader,\n.TableRowSelection {\n  justify-content: center;\n}\n\n/* Control visibility of sort icons */\n.TableSortIcon {\n  visibility: hidden;\n}\n\n/* The ASC icon is visible if the header is sortable and is hovered or focused */\n.TableHeader:hover .TableSortIcon--ascending,\n.TableHeader .TableSortButton:focus .TableSortIcon--ascending {\n  visibility: visible;\n}\n\n/* Each sort icon is visible if the TableHeader is currently in the corresponding sort state */\n.TableHeader[aria-sort='ascending'] .TableSortIcon--ascending,\n.TableHeader[aria-sort='descending'] .TableSortIcon--descending {\n  visibility: visible;\n}\n\n/* TableRow */\n.TableRow:hover .TableCell:not(.TableCellSkeleton) {\n  background-color: var(--control-transparent-bgColor-hover);\n}\n\n/* TableCell */\n.TableCell:where([scope='row']) {\n  display: flex;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  align-items: center;\n}\n\n/* TableCellSkeleton */\n.TableCellSkeleton {\n  padding: 0;\n}\n\n.TableCellSkeletonItems {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.TableCellSkeletonItem {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--table-cell-padding);\n\n  &:nth-of-type(5n + 1) {\n    --skeleton-item-width: 85%;\n  }\n\n  &:nth-of-type(5n + 2) {\n    --skeleton-item-width: 67.5%;\n  }\n\n  &:nth-of-type(5n + 3) {\n    --skeleton-item-width: 80%;\n  }\n\n  &:nth-of-type(5n + 4) {\n    --skeleton-item-width: 60%;\n  }\n\n  &:nth-of-type(5n + 5) {\n    --skeleton-item-width: 75%;\n  }\n}\n\n.TableCellSkeletonItem [data-component='SkeletonText'] {\n  width: var(--skeleton-item-width);\n}\n\n.TableCellSkeletonItem:not(:last-of-type) {\n  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableSortButton {\n  column-gap: 0.5rem;\n}\n\n/* Grid layout */\n.TableHead,\n.TableBody,\n.TableGroupHeaderBody,\n.TableRow {\n  display: contents;\n}\n\n@supports (grid-template-columns: subgrid) {\n  .TableHead,\n  .TableBody,\n  .TableGroupHeaderBody,\n  .TableRow {\n    display: grid;\n    grid-template-columns: subgrid;\n    grid-column: -1 /1;\n  }\n}\n\n.TableGroupHeaderCell {\n  display: flex;\n  grid-column: 1 / -1;\n  align-items: baseline;\n  column-gap: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--table-cell-padding);\n  text-align: start;\n  color: var(--fgColor-muted);\n  background-color: var(--bgColor-muted);\n  border-inline-start: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-inline-end: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableGroupHeaderContent {\n  display: flex;\n  align-items: baseline;\n  column-gap: var(--base-size-8);\n}\n\n.TableGroupHeaderLabel {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n}\n\n.TableGroupHeaderCount {\n  color: var(--fgColor-muted);\n}\n\n.PlaceholderText {\n  color: var(--fgColor-muted);\n}\n"]}

package/dist/DataTable/Table.d.ts

@@ -58,9 +58,46 @@ type TableHeaderProps = Omit<React.ComponentPropsWithoutRef<'th'>, 'align'> & {
 };
 declare function TableHeader({
   align,
+  className,
   children,
   ...rest
 }: TableHeaderProps): JSX.Element;
+type TableSelectionHeaderProps = Omit<React.ComponentPropsWithoutRef<'th'>, 'align' | 'children' | 'onChange'> & {
+  /**
+   * Whether all, some, or none of the selectable rows are selected.
+   */
+  selection: 'all' | 'some' | 'none';
+  /**
+   * Whether row selection is unavailable.
+   */
+  disabled?: boolean;
+  /**
+   * Requests toggling selection for all selectable rows.
+   */
+  onToggleSelect?: () => void;
+  /**
+   * Forwards a ref to the selection checkbox.
+   */
+  checkboxRef?: React.Ref<HTMLInputElement>;
+  /**
+   * Provides an accessible name for the selection checkbox.
+   */
+  'aria-label'?: string;
+  /**
+   * Provides an accessible description for the selection checkbox.
+   */
+  'aria-description'?: string;
+};
+declare function TableSelectionHeader({
+  selection,
+  checkboxRef,
+  className,
+  disabled,
+  onToggleSelect,
+  'aria-label': ariaLabel,
+  'aria-description': ariaDescription,
+  ...rest
+}: TableSelectionHeaderProps): JSX.Element;
 type TableRowProps = React.ComponentPropsWithoutRef<'tr'>;
 declare function TableRow({
   children,
@@ -85,6 +122,44 @@ declare function TableCell({
   headers,
   ...rest
 }: TableCellProps): JSX.Element;
+type TableRowSelectionProps = Omit<React.ComponentPropsWithoutRef<'td'>, 'align' | 'children' | 'onChange'> & {
+  /**
+   * Whether the row is selected.
+   */
+  selected: boolean;
+  /**
+   * Whether the row cannot be selected.
+   */
+  disabled?: boolean;
+  /**
+   * Requests toggling selection for the row.
+   */
+  onToggleSelect?: () => void;
+  /**
+   * Forwards a ref to the row selection checkbox.
+   */
+  checkboxRef?: React.Ref<HTMLInputElement>;
+  /**
+   * Provides an accessible name when no row header labels the checkbox.
+   */
+  'aria-label'?: string;
+  /**
+   * References the row header or headers that label the checkbox. The
+   * selection action is automatically prepended to the referenced labels.
+   */
+  'aria-labelledby'?: string;
+};
+declare function TableRowSelection({
+  selected,
+  checkboxRef,
+  className,
+  disabled,
+  headers,
+  onToggleSelect,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  ...rest
+}: TableRowSelectionProps): JSX.Element;
 type TableCellPlaceholderProps = React.PropsWithChildren;
 declare function TableCellPlaceholder({
   children
@@ -157,4 +232,4 @@ declare function TableSkeleton<Data extends UniqueRow>({
   ...rest
 }: TableSkeletonProps<Data>): JSX.Element;
 //#endregion
-export { Table, TableActions, TableActionsProps, TableBody, TableBodyProps, TableCell, TableCellPlaceholder, TableCellProps, TableContainer, TableContainerProps, TableDivider, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps, TableSkeleton, TableSkeletonProps, TableSubtitle, TableSubtitleProps, TableTitle, TableTitleProps };
+export { Table, TableActions, TableActionsProps, TableBody, TableBodyProps, TableCell, TableCellPlaceholder, TableCellProps, TableContainer, TableContainerProps, TableDivider, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps, TableRowSelection, TableRowSelectionProps, TableSelectionHeader, TableSelectionHeaderProps, TableSkeleton, TableSkeletonProps, TableSubtitle, TableSubtitleProps, TableTitle, TableTitleProps };

package/dist/DataTable/Table.js

@@ -2,6 +2,7 @@ import { c } from "../utils/react-compiler-runtime.js";
 import Text_default from "../Text/Text.js";
 import VisuallyHidden from "../_VisuallyHidden.js";
 import { ScrollableRegion } from "../ScrollableRegion/ScrollableRegion.js";
+import Checkbox from "../Checkbox/Checkbox.js";
 import { SkeletonText } from "../SkeletonText/SkeletonText.js";
 import { SortDirection } from "./sorting.js";
 import { useTableLayout } from "./useTable.js";
@@ -142,28 +143,32 @@ function TableBody(t0) {
 	return t2;
 }
 function TableHeader(t0) {
-	const $ = c(9);
+	const $ = c(12);
 	let align;
 	let children;
+	let className;
 	let rest;
 	if ($[0] !== t0) {
-		({align, children, ...rest} = t0);
+		({align, className, children, ...rest} = t0);
 		$[0] = t0;
 		$[1] = align;
 		$[2] = children;
-		$[3] = rest;
+		$[3] = className;
+		$[4] = rest;
 	} else {
 		align = $[1];
 		children = $[2];
-		rest = $[3];
+		className = $[3];
+		rest = $[4];
 	}
 	let t1;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = clsx("TableHeader", Table_module_css_default.TableHeader);
-		$[4] = t1;
-	} else t1 = $[4];
+	if ($[5] !== className) {
+		t1 = clsx("TableHeader", className, Table_module_css_default.TableHeader);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
 	let t2;
-	if ($[5] !== align || $[6] !== children || $[7] !== rest) {
+	if ($[7] !== align || $[8] !== children || $[9] !== rest || $[10] !== t1) {
 		t2 = /* @__PURE__ */ jsx("th", {
 			"data-component": "Table.Header",
 			...rest,
@@ -173,11 +178,12 @@ function TableHeader(t0) {
 			"data-cell-align": align,
 			children
 		});
-		$[5] = align;
-		$[6] = children;
-		$[7] = rest;
-		$[8] = t2;
-	} else t2 = $[8];
+		$[7] = align;
+		$[8] = children;
+		$[9] = rest;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
 	return t2;
 }
 function TableSortHeader(t0) {
@@ -267,6 +273,90 @@ function TableSortHeader(t0) {
 	} else t6 = $[23];
 	return t6;
 }
+function TableSelectionHeader(t0) {
+	const $ = c(25);
+	let ariaDescription;
+	let checkboxRef;
+	let className;
+	let disabled;
+	let onToggleSelect;
+	let rest;
+	let selection;
+	let t1;
+	if ($[0] !== t0) {
+		({selection, checkboxRef, className, disabled, onToggleSelect, "aria-label": t1, "aria-description": ariaDescription, ...rest} = t0);
+		$[0] = t0;
+		$[1] = ariaDescription;
+		$[2] = checkboxRef;
+		$[3] = className;
+		$[4] = disabled;
+		$[5] = onToggleSelect;
+		$[6] = rest;
+		$[7] = selection;
+		$[8] = t1;
+	} else {
+		ariaDescription = $[1];
+		checkboxRef = $[2];
+		className = $[3];
+		disabled = $[4];
+		onToggleSelect = $[5];
+		rest = $[6];
+		selection = $[7];
+		t1 = $[8];
+	}
+	const ariaLabel = t1 === void 0 ? "Select rows" : t1;
+	let t2;
+	if ($[9] !== className) {
+		t2 = clsx(className, Table_module_css_default.TableSelectionHeader);
+		$[9] = className;
+		$[10] = t2;
+	} else t2 = $[10];
+	const t3 = selection === "all";
+	const t4 = selection === "some";
+	let t5;
+	if ($[11] !== onToggleSelect) {
+		t5 = () => {
+			var _onToggleSelect;
+			return (_onToggleSelect = onToggleSelect) === null || _onToggleSelect === void 0 ? void 0 : _onToggleSelect();
+		};
+		$[11] = onToggleSelect;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== ariaDescription || $[14] !== ariaLabel || $[15] !== checkboxRef || $[16] !== disabled || $[17] !== t3 || $[18] !== t4 || $[19] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Checkbox, {
+			ref: checkboxRef,
+			checked: t3,
+			indeterminate: t4,
+			disabled,
+			onChange: t5,
+			"aria-label": ariaLabel,
+			"aria-description": ariaDescription
+		});
+		$[13] = ariaDescription;
+		$[14] = ariaLabel;
+		$[15] = checkboxRef;
+		$[16] = disabled;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+	} else t6 = $[20];
+	let t7;
+	if ($[21] !== rest || $[22] !== t2 || $[23] !== t6) {
+		t7 = /* @__PURE__ */ jsx(TableHeader, {
+			...rest,
+			className: t2,
+			"data-component": "Table.SelectionHeader",
+			children: t6
+		});
+		$[21] = rest;
+		$[22] = t2;
+		$[23] = t6;
+		$[24] = t7;
+	} else t7 = $[24];
+	return t7;
+}
 function TableRow(t0) {
 	const $ = c(7);
 	let children;
@@ -366,6 +456,115 @@ function TableCell(t0) {
 	} else t3 = $[20];
 	return t3;
 }
+function TableRowSelection(t0) {
+	const $ = c(33);
+	let ariaLabelledBy;
+	let checkboxRef;
+	let className;
+	let disabled;
+	let headers;
+	let onToggleSelect;
+	let rest;
+	let selected;
+	let t1;
+	if ($[0] !== t0) {
+		({selected, checkboxRef, className, disabled, headers, onToggleSelect, "aria-label": t1, "aria-labelledby": ariaLabelledBy, ...rest} = t0);
+		$[0] = t0;
+		$[1] = ariaLabelledBy;
+		$[2] = checkboxRef;
+		$[3] = className;
+		$[4] = disabled;
+		$[5] = headers;
+		$[6] = onToggleSelect;
+		$[7] = rest;
+		$[8] = selected;
+		$[9] = t1;
+	} else {
+		ariaLabelledBy = $[1];
+		checkboxRef = $[2];
+		className = $[3];
+		disabled = $[4];
+		headers = $[5];
+		onToggleSelect = $[6];
+		rest = $[7];
+		selected = $[8];
+		t1 = $[9];
+	}
+	const ariaLabel = t1 === void 0 ? "Select row" : t1;
+	const actionLabelId = React.useId();
+	const group = useContext(TableGroupContext);
+	let t2;
+	if ($[10] !== (group === null || group === void 0 ? void 0 : group.headerId) || $[11] !== headers) {
+		t2 = [group === null || group === void 0 ? void 0 : group.headerId, headers].filter(Boolean).join(" ") || void 0;
+		$[10] = group === null || group === void 0 ? void 0 : group.headerId;
+		$[11] = headers;
+		$[12] = t2;
+	} else t2 = $[12];
+	const resolvedHeaders = t2;
+	let t3;
+	if ($[13] !== className) {
+		t3 = clsx(className, Table_module_css_default.TableCell, Table_module_css_default.TableRowSelection);
+		$[13] = className;
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== actionLabelId || $[16] !== ariaLabelledBy) {
+		t4 = ariaLabelledBy ? /* @__PURE__ */ jsx(VisuallyHidden, {
+			id: actionLabelId,
+			children: "Select"
+		}) : null;
+		$[15] = actionLabelId;
+		$[16] = ariaLabelledBy;
+		$[17] = t4;
+	} else t4 = $[17];
+	let t5;
+	if ($[18] !== onToggleSelect) {
+		t5 = () => {
+			var _onToggleSelect2;
+			return (_onToggleSelect2 = onToggleSelect) === null || _onToggleSelect2 === void 0 ? void 0 : _onToggleSelect2();
+		};
+		$[18] = onToggleSelect;
+		$[19] = t5;
+	} else t5 = $[19];
+	const t6 = ariaLabelledBy ? void 0 : ariaLabel;
+	const t7 = ariaLabelledBy ? `${actionLabelId} ${ariaLabelledBy}` : void 0;
+	let t8;
+	if ($[20] !== checkboxRef || $[21] !== disabled || $[22] !== selected || $[23] !== t5 || $[24] !== t6 || $[25] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Checkbox, {
+			ref: checkboxRef,
+			checked: selected,
+			disabled,
+			onChange: t5,
+			"aria-label": t6,
+			"aria-labelledby": t7
+		});
+		$[20] = checkboxRef;
+		$[21] = disabled;
+		$[22] = selected;
+		$[23] = t5;
+		$[24] = t6;
+		$[25] = t7;
+		$[26] = t8;
+	} else t8 = $[26];
+	let t9;
+	if ($[27] !== resolvedHeaders || $[28] !== rest || $[29] !== t3 || $[30] !== t4 || $[31] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("td", {
+			...rest,
+			className: t3,
+			role: "cell",
+			headers: resolvedHeaders,
+			"data-component": "Table.RowSelection",
+			children: [t4, t8]
+		});
+		$[27] = resolvedHeaders;
+		$[28] = rest;
+		$[29] = t3;
+		$[30] = t4;
+		$[31] = t8;
+		$[32] = t9;
+	} else t9 = $[32];
+	return t9;
+}
 function TableCellPlaceholder(t0) {
 	const $ = c(2);
 	const { children } = t0;
@@ -585,4 +784,4 @@ function _temp(column, i) {
 	return /* @__PURE__ */ jsx(TableHeader, { children: typeof column.header === "string" ? column.header : column.header() }, i);
 }
 //#endregion
-export { Table, TableActions, TableBody, TableCell, TableCellPlaceholder, TableContainer, TableDivider, TableHead, TableHeader, TableRow, TableSkeleton, TableSortHeader, TableSubtitle, TableTitle };
+export { Table, TableActions, TableBody, TableCell, TableCellPlaceholder, TableContainer, TableDivider, TableHead, TableHeader, TableRow, TableRowSelection, TableSelectionHeader, TableSkeleton, TableSortHeader, TableSubtitle, TableTitle };