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

package/dist/DataTable/Table.module.css.js

@@ -1,4 +1,4 @@
-import "./Table-50e68700.css";
+import "./Table-6ee6a868.css";
 //#region src/DataTable/Table.module.css.js
 var Table_module_css_default = {
 	"TableContainer": "prc-DataTable-TableContainer-hn0p3",
@@ -16,6 +16,8 @@ var Table_module_css_default = {
 	"TableBody": "prc-DataTable-TableBody-QKQy2",
 	"TableCellSkeletonItem": "prc-DataTable-TableCellSkeletonItem-bGhwZ",
 	"TableCellSkeleton": "prc-DataTable-TableCellSkeleton-DMdM5",
+	"TableRowSelection": "prc-DataTable-TableRowSelection-HwyDU",
+	"TableSelectionHeader": "prc-DataTable-TableSelectionHeader-Op0cK",
 	"TableSortIcon": "prc-DataTable-TableSortIcon-wHvJw",
 	"TableSortIcon--ascending": "prc-DataTable-TableSortIcon--ascending-Lpx6z",
 	"TableSortIcon--descending": "prc-DataTable-TableSortIcon--descending-hHJGo",

package/dist/DataTable/index.d.ts

@@ -1,10 +1,10 @@
 import { SlotMarker } from "../utils/types/Slots.js";
 import { ObjectPaths } from "./utils.js";
-import { DataTableData, DataTableRowGroup, UniqueRow } from "./row.js";
+import { DataTableData, DataTableRowGroup, DataTableRowId, UniqueRow } from "./row.js";
 import { CellAlignment, Column, ColumnWidth, createColumnHelper } from "./column.js";
 import { DataTable, DataTableProps } from "./DataTable.js";
 import { ErrorDialog } from "./ErrorDialog.js";
-import { Table as Table$1, TableActions, TableActionsProps, TableBody, TableBodyProps, TableCell, TableCellPlaceholder, TableCellProps, TableContainer, TableContainerProps, TableDivider, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps, TableSkeleton, TableSkeletonProps, TableSubtitle, TableSubtitleProps, TableTitle, TableTitleProps } from "./Table.js";
+import { Table as Table$1, 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 } from "./Table.js";
 import { TableGroup, TableGroupProps } from "./TableGroup.js";
 import { Pagination } from "./Pagination.js";
 
@@ -20,11 +20,13 @@ declare const Table: typeof Table$1 & SlotMarker & {
   Body: typeof TableBody;
   Group: typeof TableGroup;
   Header: typeof TableHeader;
+  SelectionHeader: typeof TableSelectionHeader;
   Row: typeof TableRow;
+  RowSelection: typeof TableRowSelection;
   Cell: typeof TableCell;
   CellPlaceholder: typeof TableCellPlaceholder;
   Pagination: typeof Pagination;
   ErrorDialog: typeof ErrorDialog;
 };
 //#endregion
-export { type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableData, type DataTableProps, type DataTableRowGroup, type ObjectPaths, Table, type TableActionsProps, type TableBodyProps, type TableCellProps, type TableContainerProps, type TableGroupProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableSubtitleProps, type TableTitleProps, type UniqueRow, createColumnHelper };
+export { type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableData, type DataTableProps, type DataTableRowGroup, type DataTableRowId, type ObjectPaths, Table, type TableActionsProps, type TableBodyProps, type TableCellProps, type TableContainerProps, type TableGroupProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableRowSelectionProps, type TableSelectionHeaderProps, type TableSubtitleProps, type TableTitleProps, type UniqueRow, createColumnHelper };

package/dist/DataTable/index.js

@@ -1,4 +1,4 @@
-import { Table as Table$1, TableActions, TableBody, TableCell, TableCellPlaceholder, TableContainer, TableDivider, TableHead, TableHeader, TableRow, TableSkeleton, TableSubtitle, TableTitle } from "./Table.js";
+import { Table as Table$1, TableActions, TableBody, TableCell, TableCellPlaceholder, TableContainer, TableDivider, TableHead, TableHeader, TableRow, TableRowSelection, TableSelectionHeader, TableSkeleton, TableSubtitle, TableTitle } from "./Table.js";
 import { TableGroup } from "./TableGroup.js";
 import { DataTable } from "./DataTable.js";
 import { ErrorDialog } from "./ErrorDialog.js";
@@ -16,7 +16,9 @@ const Table = Object.assign(Table$1, {
 	Body: TableBody,
 	Group: TableGroup,
 	Header: TableHeader,
+	SelectionHeader: TableSelectionHeader,
 	Row: TableRow,
+	RowSelection: TableRowSelection,
 	Cell: TableCell,
 	CellPlaceholder: TableCellPlaceholder,
 	Pagination,

package/dist/DataTable/row.d.ts

@@ -1,6 +1,7 @@
 //#region src/DataTable/row.d.ts
+type DataTableRowId = string | number;
 interface UniqueRow {
-  id: string | number;
+  id: DataTableRowId;
 }
 interface DataTableRowGroup<Data extends UniqueRow> {
   /**
@@ -26,4 +27,4 @@ interface DataTableRowGroup<Data extends UniqueRow> {
  */
 type DataTableData<Data extends UniqueRow> = Array<Data | DataTableRowGroup<Data>>;
 //#endregion
-export { DataTableData, DataTableRowGroup, UniqueRow };
+export { DataTableData, DataTableRowGroup, DataTableRowId, UniqueRow };

package/dist/DataTable/useTable.js

@@ -1,24 +1,54 @@
 import { c } from "../utils/react-compiler-runtime.js";
+import { useControllableState } from "../hooks/useControllableState.js";
 import { DEFAULT_SORT_DIRECTION, SortDirection, strategies, transition } from "./sorting.js";
 import { useId, useState } from "react";
 //#region src/DataTable/useTable.ts
 function useTable(t0) {
-	const $ = c(29);
-	const { columns, data, initialSortColumn, initialSortDirection, externalSorting, getRowId } = t0;
+	const $ = c(61);
+	const { columns, data, initialSortColumn, initialSortDirection, externalSorting, getRowId, rowSelection: t1, selectedRows: controlledSelectedRows, defaultSelectedRows, onSelectionChange, isRowSelectable } = t0;
+	const rowSelection = t1 === void 0 ? false : t1;
 	const tableId = useId();
 	const [rowOrder, setRowOrder] = useState(data);
 	const [prevData, setPrevData] = useState(data);
 	const [prevColumns, setPrevColumns] = useState(columns);
-	let t1;
+	let t2;
 	if ($[0] !== columns || $[1] !== initialSortColumn || $[2] !== initialSortDirection) {
-		t1 = () => getInitialSortState(columns, initialSortColumn, initialSortDirection);
+		t2 = () => getInitialSortState(columns, initialSortColumn, initialSortDirection);
 		$[0] = columns;
 		$[1] = initialSortColumn;
 		$[2] = initialSortDirection;
-		$[3] = t1;
-	} else t1 = $[3];
-	const [sortByColumn, setSortByColumn] = useState(t1);
-	const { gridTemplateColumns } = useTableLayout(columns);
+		$[3] = t2;
+	} else t2 = $[3];
+	const [sortByColumn, setSortByColumn] = useState(t2);
+	let t3;
+	if ($[4] !== defaultSelectedRows) {
+		t3 = () => defaultSelectedRows !== null && defaultSelectedRows !== void 0 ? defaultSelectedRows : /* @__PURE__ */ new Set();
+		$[4] = defaultSelectedRows;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== onSelectionChange) {
+		t4 = (nextSelectedRows) => {
+			onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange({ selectedRows: new Set(nextSelectedRows) });
+		};
+		$[6] = onSelectionChange;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== controlledSelectedRows || $[9] !== t3 || $[10] !== t4) {
+		t5 = {
+			name: "DataTable selectedRows",
+			value: controlledSelectedRows,
+			defaultValue: t3,
+			onChange: t4
+		};
+		$[8] = controlledSelectedRows;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	const [selectedRows, setSelectedRows] = useControllableState(t5);
+	const { gridTemplateColumns } = useTableLayout(columns, rowSelection);
 	if (columns !== prevColumns) {
 		setPrevColumns(columns);
 		if (sortByColumn) {
@@ -29,20 +59,21 @@ function useTable(t0) {
 			})) setSortByColumn(null);
 		}
 	}
-	let t2;
-	if ($[4] !== rowOrder) {
-		t2 = rowOrder.some(isDataTableRowGroup);
-		$[4] = rowOrder;
-		$[5] = t2;
-	} else t2 = $[5];
-	const hasGroups = t2;
+	let t6;
+	if ($[12] !== rowOrder) {
+		t6 = rowOrder.some(isDataTableRowGroup);
+		$[12] = rowOrder;
+		$[13] = t6;
+	} else t6 = $[13];
+	const hasGroups = t6;
 	let bodies;
 	let headers;
 	let sortBy;
-	if ($[6] !== columns || $[7] !== data || $[8] !== externalSorting || $[9] !== getRowId || $[10] !== hasGroups || $[11] !== prevData || $[12] !== rowOrder || $[13] !== sortByColumn || $[14] !== tableId) {
-		let t3;
-		if ($[18] !== hasGroups || $[19] !== sortByColumn || $[20] !== tableId) {
-			t3 = (column_1, index) => {
+	let t7;
+	if ($[14] !== columns || $[15] !== data || $[16] !== externalSorting || $[17] !== getRowId || $[18] !== hasGroups || $[19] !== isRowSelectable || $[20] !== prevData || $[21] !== rowOrder || $[22] !== rowSelection || $[23] !== selectedRows || $[24] !== sortByColumn || $[25] !== tableId) {
+		let t8;
+		if ($[30] !== hasGroups || $[31] !== sortByColumn || $[32] !== tableId) {
+			t8 = (column_1, index) => {
 				var _column_1$id;
 				const id_0 = (_column_1$id = column_1.id) !== null && _column_1$id !== void 0 ? _column_1$id : column_1.field;
 				if (id_0 === void 0) throw new Error("Expected either an `id` or `field` to be defined for a Column");
@@ -60,12 +91,12 @@ function useTable(t0) {
 					}
 				};
 			};
-			$[18] = hasGroups;
-			$[19] = sortByColumn;
-			$[20] = tableId;
-			$[21] = t3;
-		} else t3 = $[21];
-		headers = columns.map(t3);
+			$[30] = hasGroups;
+			$[31] = sortByColumn;
+			$[32] = tableId;
+			$[33] = t8;
+		} else t8 = $[33];
+		headers = columns.map(t8);
 		if (data !== prevData) {
 			setPrevData(data);
 			updateRowOrder(data, sortByColumn);
@@ -128,11 +159,17 @@ function useTable(t0) {
 			return sorted;
 		}
 		const createRow = function createRow(row_0, rowIndex) {
+			var _isRowSelectable;
 			const rowId = getRowId(row_0);
-			const rowHeaderIds = hasGroups ? headers.flatMap((header_2, index_0) => header_2.column.rowHeader ? [`${tableId}-row-${rowIndex}-header-${index_0}`] : []) : [];
+			const rowHeaderIds = hasGroups || rowSelection ? headers.flatMap((header_2, index_0) => header_2.column.rowHeader ? [`${tableId}-row-${rowIndex}-header-${index_0}`] : []) : [];
+			const selectable = rowSelection && ((_isRowSelectable = isRowSelectable === null || isRowSelectable === void 0 ? void 0 : isRowSelectable(row_0)) !== null && _isRowSelectable !== void 0 ? _isRowSelectable : true);
 			return {
 				type: "row",
 				id: `${rowId}`,
+				selectionId: rowId,
+				selectionLabelledBy: rowHeaderIds.length > 0 ? rowHeaderIds.join(" ") : void 0,
+				selected: selectable && selectedRows.has(rowId),
+				selectable,
 				getValue() {
 					return row_0;
 				},
@@ -142,7 +179,7 @@ function useTable(t0) {
 						const rowHeader = (_header_3$column$rowH = header_3.column.rowHeader) !== null && _header_3$column$rowH !== void 0 ? _header_3$column$rowH : false;
 						return {
 							id: `${rowId}:${header_3.id}`,
-							domId: hasGroups && rowHeader ? `${tableId}-row-${rowIndex}-header-${index_1}` : void 0,
+							domId: (hasGroups || rowSelection) && rowHeader ? `${tableId}-row-${rowIndex}-header-${index_1}` : void 0,
 							headers: hasGroups ? (rowHeader ? [header_3.domId] : [...rowHeaderIds, header_3.domId]).join(" ") : void 0,
 							column: header_3.column,
 							rowHeader,
@@ -184,44 +221,131 @@ function useTable(t0) {
 			rowIndex_0 = rowIndex_0 + 1;
 		}
 		if (body.rows.length > 0 || bodies.length === 0) bodies.push(body);
-		$[6] = columns;
-		$[7] = data;
-		$[8] = externalSorting;
-		$[9] = getRowId;
-		$[10] = hasGroups;
-		$[11] = prevData;
-		$[12] = rowOrder;
-		$[13] = sortByColumn;
-		$[14] = tableId;
-		$[15] = bodies;
-		$[16] = headers;
-		$[17] = sortBy;
+		t7 = bodies.flatMap(_temp).filter(_temp2);
+		$[14] = columns;
+		$[15] = data;
+		$[16] = externalSorting;
+		$[17] = getRowId;
+		$[18] = hasGroups;
+		$[19] = isRowSelectable;
+		$[20] = prevData;
+		$[21] = rowOrder;
+		$[22] = rowSelection;
+		$[23] = selectedRows;
+		$[24] = sortByColumn;
+		$[25] = tableId;
+		$[26] = bodies;
+		$[27] = headers;
+		$[28] = sortBy;
+		$[29] = t7;
 	} else {
-		bodies = $[15];
-		headers = $[16];
-		sortBy = $[17];
+		bodies = $[26];
+		headers = $[27];
+		sortBy = $[28];
+		t7 = $[29];
 	}
-	let t3;
-	if ($[22] !== sortBy) {
-		t3 = { sortBy };
-		$[22] = sortBy;
-		$[23] = t3;
-	} else t3 = $[23];
-	let t4;
-	if ($[24] !== bodies || $[25] !== gridTemplateColumns || $[26] !== headers || $[27] !== t3) {
-		t4 = {
+	const selectableRows = t7;
+	let t8;
+	if ($[34] !== selectableRows) {
+		t8 = new Set(selectableRows.filter(_temp3).map(_temp4));
+		$[34] = selectableRows;
+		$[35] = t8;
+	} else t8 = $[35];
+	const effectiveSelectedRows = t8;
+	const selectedCount = effectiveSelectedRows.size;
+	const selectableCount = selectableRows.length;
+	const allSelected = selectableCount > 0 && selectedCount === selectableCount;
+	const someSelected = selectedCount > 0 && !allSelected;
+	let t9;
+	if ($[36] !== selectedRows || $[37] !== setSelectedRows) {
+		t9 = function toggleRowSelection(row_5) {
+			if (!row_5.selectable) return;
+			const nextSelectedRows_0 = new Set(selectedRows);
+			if (nextSelectedRows_0.has(row_5.selectionId)) nextSelectedRows_0.delete(row_5.selectionId);
+			else nextSelectedRows_0.add(row_5.selectionId);
+			setSelectedRows(nextSelectedRows_0);
+		};
+		$[36] = selectedRows;
+		$[37] = setSelectedRows;
+		$[38] = t9;
+	} else t9 = $[38];
+	const toggleRowSelection = t9;
+	let t10;
+	if ($[39] !== allSelected || $[40] !== selectableRows || $[41] !== selectedRows || $[42] !== setSelectedRows) {
+		t10 = function toggleAllRows() {
+			if (selectableRows.length === 0) return;
+			const nextSelectedRows_1 = new Set(selectedRows);
+			for (const row_6 of selectableRows) if (allSelected) nextSelectedRows_1.delete(row_6.selectionId);
+			else nextSelectedRows_1.add(row_6.selectionId);
+			setSelectedRows(nextSelectedRows_1);
+		};
+		$[39] = allSelected;
+		$[40] = selectableRows;
+		$[41] = selectedRows;
+		$[42] = setSelectedRows;
+		$[43] = t10;
+	} else t10 = $[43];
+	const toggleAllRows = t10;
+	let t11;
+	if ($[44] !== sortBy || $[45] !== toggleAllRows || $[46] !== toggleRowSelection) {
+		t11 = {
+			sortBy,
+			toggleRowSelection,
+			toggleAllRows
+		};
+		$[44] = sortBy;
+		$[45] = toggleAllRows;
+		$[46] = toggleRowSelection;
+		$[47] = t11;
+	} else t11 = $[47];
+	const t12 = `${tableId}-selection-column`;
+	let t13;
+	if ($[48] !== allSelected || $[49] !== effectiveSelectedRows || $[50] !== selectableCount || $[51] !== selectedCount || $[52] !== someSelected || $[53] !== t12) {
+		t13 = {
+			headerId: t12,
+			selectedRows: effectiveSelectedRows,
+			allSelected,
+			someSelected,
+			selectableCount,
+			selectedCount
+		};
+		$[48] = allSelected;
+		$[49] = effectiveSelectedRows;
+		$[50] = selectableCount;
+		$[51] = selectedCount;
+		$[52] = someSelected;
+		$[53] = t12;
+		$[54] = t13;
+	} else t13 = $[54];
+	let t14;
+	if ($[55] !== bodies || $[56] !== gridTemplateColumns || $[57] !== headers || $[58] !== t11 || $[59] !== t13) {
+		t14 = {
 			headers,
-			actions: t3,
+			actions: t11,
+			selection: t13,
 			gridTemplateColumns,
 			bodies
 		};
-		$[24] = bodies;
-		$[25] = gridTemplateColumns;
-		$[26] = headers;
-		$[27] = t3;
-		$[28] = t4;
-	} else t4 = $[28];
-	return t4;
+		$[55] = bodies;
+		$[56] = gridTemplateColumns;
+		$[57] = headers;
+		$[58] = t11;
+		$[59] = t13;
+		$[60] = t14;
+	} else t14 = $[60];
+	return t14;
+}
+function _temp4(row_4) {
+	return row_4.selectionId;
+}
+function _temp3(row_3) {
+	return row_3.selected;
+}
+function _temp2(row_2) {
+	return row_2.selectable;
+}
+function _temp(body_0) {
+	return body_0.rows;
 }
 function isDataTableRowGroup(item) {
 	return "groupId" in item && "rows" in item && Array.isArray(item.rows);
@@ -265,8 +389,8 @@ function getInitialSortState(columns, initialSortColumn, initialSortDirection) {
 	}
 	return null;
 }
-function useTableLayout(columns) {
-	return { gridTemplateColumns: getGridTemplateFromColumns(columns).join(" ") };
+function useTableLayout(columns, rowSelection = false) {
+	return { gridTemplateColumns: [...rowSelection ? ["min-content"] : [], ...getGridTemplateFromColumns(columns)].join(" ") };
 }
 function getGridTemplateFromColumns(columns) {
 	return columns.map((column) => {

package/dist/Details/Details.js

@@ -7,7 +7,6 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/Details/Details.tsx
 const Root = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
-	var _dataComponent;
 	const $ = c(15);
 	let children;
 	let className;
@@ -51,7 +50,7 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
 		$[7] = className;
 		$[8] = t3;
 	} else t3 = $[8];
-	const t4 = (_dataComponent = dataComponent) !== null && _dataComponent !== void 0 ? _dataComponent : "Details";
+	const t4 = dataComponent !== null && dataComponent !== void 0 ? dataComponent : "Details";
 	let t5;
 	if ($[9] !== children || $[10] !== ref || $[11] !== rest || $[12] !== t3 || $[13] !== t4) {
 		t5 = /* @__PURE__ */ jsx("details", {
@@ -72,7 +71,6 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
 });
 Root.displayName = "Details";
 function Summary(t0) {
-	var _as;
 	const $ = c(9);
 	let as;
 	let children;
@@ -88,7 +86,7 @@ function Summary(t0) {
 		children = $[2];
 		props = $[3];
 	}
-	const Component = (_as = as) !== null && _as !== void 0 ? _as : "summary";
+	const Component = as !== null && as !== void 0 ? as : "summary";
 	const t1 = Component === "summary" ? null : "summary";
 	let t2;
 	if ($[4] !== Component || $[5] !== children || $[6] !== props || $[7] !== t1) {

package/dist/FeatureFlags/FeatureFlagScope.js

@@ -9,6 +9,7 @@ var FeatureFlagScope = class FeatureFlagScope {
 		for (const [key, value] of b.flags) merged.flags.set(key, value);
 		return merged;
 	}
+	flags;
 	constructor(flags = {}) {
 		this.flags = /* @__PURE__ */ new Map();
 		for (const [key, value] of Object.entries(flags)) this.flags.set(key, value !== null && value !== void 0 ? value : false);

package/dist/FilteredActionList/constants.js

@@ -1,5 +1,7 @@
 //#region src/FilteredActionList/constants.ts
 var FilteredActionListLoadingType = class {
+	name;
+	appearsInBody;
 	constructor(name, appearsInBody) {
 		this.name = name;
 		this.appearsInBody = appearsInBody;