@primer/react 38.41.0 → 38.42.0-rc.2f6d98706

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/DataTable/DataTable.d.ts +27 -2
  3. package/dist/DataTable/DataTable.js +119 -72
  4. package/dist/DataTable/{Table-50e68700.css → Table-6ee6a868.css} +2 -2
  5. package/dist/DataTable/Table-6ee6a868.css.map +1 -0
  6. package/dist/DataTable/Table.d.ts +76 -1
  7. package/dist/DataTable/Table.js +214 -15
  8. package/dist/DataTable/Table.module.css.js +3 -1
  9. package/dist/DataTable/index.d.ts +5 -3
  10. package/dist/DataTable/index.js +3 -1
  11. package/dist/DataTable/row.d.ts +3 -2
  12. package/dist/DataTable/useTable.js +185 -61
  13. package/dist/experimental/index.d.ts +3 -3
  14. package/generated/components.json +126 -2
  15. package/package.json +2 -2
  16. package/dist/DataTable/Table-50e68700.css.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @primer/react
2
2
 
3
+ ## 38.42.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#8415](https://github.com/primer/react/pull/8415) [`66a9f31`](https://github.com/primer/react/commit/66a9f31611c642209f66ed68b7d43712b09dbd88) Thanks [@rickyzhangca](https://github.com/rickyzhangca)! - DataTable: Add controlled and uncontrolled row selection.
8
+
3
9
  ## 38.41.0
4
10
 
5
11
  ### Minor Changes
package/dist/DataTable/DataTable.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { IsAny, ObjectPaths } from "./utils.js";
2
- import { DataTableData, DataTableRowGroup, UniqueRow } from "./row.js";
2
+ import { DataTableData, DataTableRowGroup, DataTableRowId, UniqueRow } from "./row.js";
3
3
  import { SortDirection } from "./sorting.js";
4
4
  import { Column } from "./column.js";
5
5
  import { ReactElement } from "react";
@@ -48,13 +48,38 @@ type DataTableBaseProps<Data extends UniqueRow> = {
48
48
  * @param rowData The row data object for which the ID is being retrieved.
49
49
  * @returns The unique identifier for the row, which can be a string or number.
50
50
  */
51
- getRowId?: (rowData: Data) => string | number;
51
+ getRowId?: (rowData: Data) => DataTableRowId;
52
52
  /**
53
53
  * Fires every time the user clicks a sortable column header. It reports
54
54
  * the column id that is now sorted and the direction after the toggle
55
55
  * (never `"NONE"`).
56
56
  */
57
57
  onToggleSort?: (columnId: ObjectPaths<Data> | string | number, direction: Exclude<SortDirection, 'NONE'>) => void;
58
+ /**
59
+ * Whether to render controls for selecting rows.
60
+ */
61
+ rowSelection?: boolean;
62
+ /**
63
+ * Controls the selected row IDs.
64
+ */
65
+ selectedRows?: ReadonlySet<DataTableRowId>;
66
+ /**
67
+ * Provides the initially selected row IDs for an uncontrolled table.
68
+ * Uncontrolled selection is intended for static, single-page data.
69
+ */
70
+ defaultSelectedRows?: ReadonlySet<DataTableRowId>;
71
+ /**
72
+ * Handles changes to the selected row IDs.
73
+ */
74
+ onSelectionChange?: ({
75
+ selectedRows
76
+ }: {
77
+ selectedRows: Set<DataTableRowId>;
78
+ }) => void;
79
+ /**
80
+ * Determines whether a row can be selected.
81
+ */
82
+ isRowSelectable?: (row: Data) => boolean;
58
83
  };
59
84
  type DataTableProps<Data extends UniqueRow> = DataTableBaseProps<Data> & {
60
85
  /**
package/dist/DataTable/DataTable.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { c } from "../utils/react-compiler-runtime.js";
2
2
  import { useTable } from "./useTable.js";
3
- import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableSortHeader } from "./Table.js";
3
+ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableRowSelection, TableSelectionHeader, TableSortHeader } from "./Table.js";
4
4
  import { TableGroup } from "./TableGroup.js";
5
5
  import { jsx, jsxs } from "react/jsx-runtime";
6
6
  //#region src/DataTable/DataTable.tsx
@@ -8,34 +8,85 @@ function defaultGetRowId(row) {
8
8
  return row.id;
9
9
  }
10
10
  function DataTableImplementation(t0) {
11
- const $ = c(28);
12
- const { "aria-labelledby": labelledby, "aria-describedby": describedby, cellPadding, columns, data, initialSortColumn, initialSortDirection, externalSorting, getRowId: t1, onToggleSort } = t0;
11
+ const $ = c(46);
12
+ const { "aria-labelledby": labelledby, "aria-describedby": describedby, cellPadding, columns, data, initialSortColumn, initialSortDirection, externalSorting, getRowId: t1, onToggleSort, rowSelection: t2, selectedRows, defaultSelectedRows, onSelectionChange, isRowSelectable } = t0;
13
13
  const getRowId = t1 === void 0 ? defaultGetRowId : t1;
14
- let t2;
15
- if ($[0] !== columns || $[1] !== data || $[2] !== externalSorting || $[3] !== getRowId || $[4] !== initialSortColumn || $[5] !== initialSortDirection) {
16
- t2 = {
14
+ const rowSelection = t2 === void 0 ? false : t2;
15
+ let t3;
16
+ if ($[0] !== columns || $[1] !== data || $[2] !== defaultSelectedRows || $[3] !== externalSorting || $[4] !== getRowId || $[5] !== initialSortColumn || $[6] !== initialSortDirection || $[7] !== isRowSelectable || $[8] !== onSelectionChange || $[9] !== rowSelection || $[10] !== selectedRows) {
17
+ t3 = {
17
18
  data,
18
19
  columns,
19
20
  initialSortColumn,
20
21
  initialSortDirection,
21
22
  getRowId,
22
- externalSorting
23
+ externalSorting,
24
+ rowSelection,
25
+ selectedRows,
26
+ defaultSelectedRows,
27
+ onSelectionChange,
28
+ isRowSelectable
23
29
  };
24
30
  $[0] = columns;
25
31
  $[1] = data;
26
- $[2] = externalSorting;
27
- $[3] = getRowId;
28
- $[4] = initialSortColumn;
29
- $[5] = initialSortDirection;
30
- $[6] = t2;
31
- } else t2 = $[6];
32
- const { headers, bodies, actions, gridTemplateColumns } = useTable(t2);
33
- const renderRow = _temp;
34
- let t3;
35
- if ($[7] !== actions || $[8] !== headers || $[9] !== onToggleSort) {
36
- let t4;
37
- if ($[11] !== actions || $[12] !== onToggleSort) {
38
- t4 = (header) => {
32
+ $[2] = defaultSelectedRows;
33
+ $[3] = externalSorting;
34
+ $[4] = getRowId;
35
+ $[5] = initialSortColumn;
36
+ $[6] = initialSortDirection;
37
+ $[7] = isRowSelectable;
38
+ $[8] = onSelectionChange;
39
+ $[9] = rowSelection;
40
+ $[10] = selectedRows;
41
+ $[11] = t3;
42
+ } else t3 = $[11];
43
+ const { headers, bodies, actions, selection, gridTemplateColumns } = useTable(t3);
44
+ let t4;
45
+ if ($[12] !== actions || $[13] !== rowSelection || $[14] !== selection) {
46
+ t4 = (row) => /* @__PURE__ */ jsxs(TableRow, { children: [rowSelection ? /* @__PURE__ */ jsx(TableRowSelection, {
47
+ selected: row.selected,
48
+ disabled: !row.selectable,
49
+ headers: selection.headerId,
50
+ "aria-label": row.selectionLabelledBy ? void 0 : `Select row ${row.selectionId}`,
51
+ "aria-labelledby": row.selectionLabelledBy,
52
+ onToggleSelect: () => {
53
+ actions.toggleRowSelection(row);
54
+ }
55
+ }) : null, row.getCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
56
+ id: cell.domId,
57
+ scope: cell.rowHeader ? "row" : void 0,
58
+ align: cell.column.align,
59
+ headers: cell.headers,
60
+ children: cell.column.renderCell ? cell.column.renderCell(row.getValue()) : cell.getValue()
61
+ }, cell.id))] }, `${typeof row.selectionId}:${row.selectionId}`);
62
+ $[12] = actions;
63
+ $[13] = rowSelection;
64
+ $[14] = selection;
65
+ $[15] = t4;
66
+ } else t4 = $[15];
67
+ const renderRow = t4;
68
+ let t5;
69
+ if ($[16] !== actions || $[17] !== rowSelection || $[18] !== selection) {
70
+ t5 = rowSelection ? /* @__PURE__ */ jsx(TableSelectionHeader, {
71
+ id: selection.headerId,
72
+ selection: selection.allSelected ? "all" : selection.someSelected ? "some" : "none",
73
+ disabled: selection.selectableCount === 0,
74
+ "aria-label": "Select rows",
75
+ "aria-description": selection.selectableCount > 0 ? `Select all ${selection.selectableCount} ${selection.selectableCount === 1 ? "row" : "rows"}` : void 0,
76
+ onToggleSelect: () => {
77
+ actions.toggleAllRows();
78
+ }
79
+ }) : null;
80
+ $[16] = actions;
81
+ $[17] = rowSelection;
82
+ $[18] = selection;
83
+ $[19] = t5;
84
+ } else t5 = $[19];
85
+ let t6;
86
+ if ($[20] !== actions || $[21] !== headers || $[22] !== onToggleSort) {
87
+ let t7;
88
+ if ($[24] !== actions || $[25] !== onToggleSort) {
89
+ t7 = (header) => {
39
90
  if (header.isSortable()) return /* @__PURE__ */ jsx(TableSortHeader, {
40
91
  id: header.domId,
41
92
  align: header.column.align,
@@ -53,69 +104,65 @@ function DataTableImplementation(t0) {
53
104
  children: typeof header.column.header === "string" ? header.column.header : header.column.header()
54
105
  }, header.id);
55
106
  };
56
- $[11] = actions;
57
- $[12] = onToggleSort;
58
- $[13] = t4;
59
- } else t4 = $[13];
60
- t3 = headers.map(t4);
61
- $[7] = actions;
62
- $[8] = headers;
63
- $[9] = onToggleSort;
64
- $[10] = t3;
65
- } else t3 = $[10];
66
- let t4;
67
- if ($[14] !== t3) {
68
- t4 = /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: t3 }) });
69
- $[14] = t3;
70
- $[15] = t4;
71
- } else t4 = $[15];
72
- let t5;
73
- if ($[16] !== bodies || $[17] !== headers.length) {
74
- let t6;
75
- if ($[19] !== headers.length) {
76
- t6 = (body) => body.type === "row-group" ? /* @__PURE__ */ jsx(TableGroup, {
107
+ $[24] = actions;
108
+ $[25] = onToggleSort;
109
+ $[26] = t7;
110
+ } else t7 = $[26];
111
+ t6 = headers.map(t7);
112
+ $[20] = actions;
113
+ $[21] = headers;
114
+ $[22] = onToggleSort;
115
+ $[23] = t6;
116
+ } else t6 = $[23];
117
+ let t7;
118
+ if ($[27] !== t5 || $[28] !== t6) {
119
+ t7 = /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [t5, t6] }) });
120
+ $[27] = t5;
121
+ $[28] = t6;
122
+ $[29] = t7;
123
+ } else t7 = $[29];
124
+ let t8;
125
+ if ($[30] !== bodies || $[31] !== headers.length || $[32] !== renderRow || $[33] !== rowSelection) {
126
+ let t9;
127
+ if ($[35] !== headers.length || $[36] !== renderRow || $[37] !== rowSelection) {
128
+ t9 = (body) => body.type === "row-group" ? /* @__PURE__ */ jsx(TableGroup, {
77
129
  id: body.id,
78
130
  label: body.label,
79
131
  rowCount: body.rows.length,
80
- colSpan: headers.length,
132
+ colSpan: headers.length + (rowSelection ? 1 : 0),
81
133
  "aria-label": body["aria-label"],
82
134
  children: body.rows.map(renderRow)
83
135
  }, body.key) : /* @__PURE__ */ jsx(TableBody, { children: body.rows.map(renderRow) }, body.key);
84
- $[19] = headers.length;
85
- $[20] = t6;
86
- } else t6 = $[20];
87
- t5 = bodies.map(t6);
88
- $[16] = bodies;
89
- $[17] = headers.length;
90
- $[18] = t5;
91
- } else t5 = $[18];
92
- let t6;
93
- if ($[21] !== cellPadding || $[22] !== describedby || $[23] !== gridTemplateColumns || $[24] !== labelledby || $[25] !== t4 || $[26] !== t5) {
94
- t6 = /* @__PURE__ */ jsxs(Table, {
136
+ $[35] = headers.length;
137
+ $[36] = renderRow;
138
+ $[37] = rowSelection;
139
+ $[38] = t9;
140
+ } else t9 = $[38];
141
+ t8 = bodies.map(t9);
142
+ $[30] = bodies;
143
+ $[31] = headers.length;
144
+ $[32] = renderRow;
145
+ $[33] = rowSelection;
146
+ $[34] = t8;
147
+ } else t8 = $[34];
148
+ let t9;
149
+ if ($[39] !== cellPadding || $[40] !== describedby || $[41] !== gridTemplateColumns || $[42] !== labelledby || $[43] !== t7 || $[44] !== t8) {
150
+ t9 = /* @__PURE__ */ jsxs(Table, {
95
151
  "aria-labelledby": labelledby,
96
152
  "aria-describedby": describedby,
97
153
  cellPadding,
98
154
  gridTemplateColumns,
99
- children: [t4, t5]
155
+ children: [t7, t8]
100
156
  });
101
- $[21] = cellPadding;
102
- $[22] = describedby;
103
- $[23] = gridTemplateColumns;
104
- $[24] = labelledby;
105
- $[25] = t4;
106
- $[26] = t5;
107
- $[27] = t6;
108
- } else t6 = $[27];
109
- return t6;
110
- }
111
- function _temp(row) {
112
- return /* @__PURE__ */ jsx(TableRow, { children: row.getCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
113
- id: cell.domId,
114
- scope: cell.rowHeader ? "row" : void 0,
115
- align: cell.column.align,
116
- headers: cell.headers,
117
- children: cell.column.renderCell ? cell.column.renderCell(row.getValue()) : cell.getValue()
118
- }, cell.id)) }, row.id);
157
+ $[39] = cellPadding;
158
+ $[40] = describedby;
159
+ $[41] = gridTemplateColumns;
160
+ $[42] = labelledby;
161
+ $[43] = t7;
162
+ $[44] = t8;
163
+ $[45] = t9;
164
+ } else t9 = $[45];
165
+ return t9;
119
166
  }
120
167
  const DataTable = DataTableImplementation;
121
168
  //#endregion
package/dist/DataTable/{Table-50e68700.css → Table-6ee6a868.css} RENAMED
@@ -1,2 +1,2 @@
1
- .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)}
2
- /*# sourceMappingURL=Table-50e68700.css.map */
1
+ .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)}
2
+ /*# sourceMappingURL=Table-6ee6a868.css.map */
package/dist/DataTable/Table-6ee6a868.css.map ADDED
@@ -0,0 +1 @@
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 CHANGED
@@ -58,9 +58,46 @@ type TableHeaderProps = Omit<React.ComponentPropsWithoutRef<'th'>, 'align'> & {
58
58
  };
59
59
  declare function TableHeader({
60
60
  align,
61
+ className,
61
62
  children,
62
63
  ...rest
63
64
  }: TableHeaderProps): JSX.Element;
65
+ type TableSelectionHeaderProps = Omit<React.ComponentPropsWithoutRef<'th'>, 'align' | 'children' | 'onChange'> & {
66
+ /**
67
+ * Whether all, some, or none of the selectable rows are selected.
68
+ */
69
+ selection: 'all' | 'some' | 'none';
70
+ /**
71
+ * Whether row selection is unavailable.
72
+ */
73
+ disabled?: boolean;
74
+ /**
75
+ * Requests toggling selection for all selectable rows.
76
+ */
77
+ onToggleSelect?: () => void;
78
+ /**
79
+ * Forwards a ref to the selection checkbox.
80
+ */
81
+ checkboxRef?: React.Ref<HTMLInputElement>;
82
+ /**
83
+ * Provides an accessible name for the selection checkbox.
84
+ */
85
+ 'aria-label'?: string;
86
+ /**
87
+ * Provides an accessible description for the selection checkbox.
88
+ */
89
+ 'aria-description'?: string;
90
+ };
91
+ declare function TableSelectionHeader({
92
+ selection,
93
+ checkboxRef,
94
+ className,
95
+ disabled,
96
+ onToggleSelect,
97
+ 'aria-label': ariaLabel,
98
+ 'aria-description': ariaDescription,
99
+ ...rest
100
+ }: TableSelectionHeaderProps): JSX.Element;
64
101
  type TableRowProps = React.ComponentPropsWithoutRef<'tr'>;
65
102
  declare function TableRow({
66
103
  children,
@@ -85,6 +122,44 @@ declare function TableCell({
85
122
  headers,
86
123
  ...rest
87
124
  }: TableCellProps): JSX.Element;
125
+ type TableRowSelectionProps = Omit<React.ComponentPropsWithoutRef<'td'>, 'align' | 'children' | 'onChange'> & {
126
+ /**
127
+ * Whether the row is selected.
128
+ */
129
+ selected: boolean;
130
+ /**
131
+ * Whether the row cannot be selected.
132
+ */
133
+ disabled?: boolean;
134
+ /**
135
+ * Requests toggling selection for the row.
136
+ */
137
+ onToggleSelect?: () => void;
138
+ /**
139
+ * Forwards a ref to the row selection checkbox.
140
+ */
141
+ checkboxRef?: React.Ref<HTMLInputElement>;
142
+ /**
143
+ * Provides an accessible name when no row header labels the checkbox.
144
+ */
145
+ 'aria-label'?: string;
146
+ /**
147
+ * References the row header or headers that label the checkbox. The
148
+ * selection action is automatically prepended to the referenced labels.
149
+ */
150
+ 'aria-labelledby'?: string;
151
+ };
152
+ declare function TableRowSelection({
153
+ selected,
154
+ checkboxRef,
155
+ className,
156
+ disabled,
157
+ headers,
158
+ onToggleSelect,
159
+ 'aria-label': ariaLabel,
160
+ 'aria-labelledby': ariaLabelledBy,
161
+ ...rest
162
+ }: TableRowSelectionProps): JSX.Element;
88
163
  type TableCellPlaceholderProps = React.PropsWithChildren;
89
164
  declare function TableCellPlaceholder({
90
165
  children
@@ -157,4 +232,4 @@ declare function TableSkeleton<Data extends UniqueRow>({
157
232
  ...rest
158
233
  }: TableSkeletonProps<Data>): JSX.Element;
159
234
  //#endregion
160
- 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 };
235
+ 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 };