@primer/react 38.39.1-rc.99036c1d8 → 38.40.0-rc.629dc4f91

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 (12) hide show
  1. package/CHANGELOG.md +5 -1
  2. package/dist/DataTable/DataTable.d.ts +20 -20
  3. package/dist/DataTable/DataTable.js +41 -26
  4. package/dist/DataTable/TableGroup.js +95 -91
  5. package/dist/DataTable/index.d.ts +2 -2
  6. package/dist/DataTable/index.js +1 -1
  7. package/dist/DataTable/row.d.ts +24 -1
  8. package/dist/DataTable/useTable.js +156 -79
  9. package/dist/DataTable/utils.d.ts +4 -2
  10. package/dist/experimental/index.d.ts +2 -2
  11. package/generated/components.json +11 -3
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,6 +1,10 @@
1
1
  # @primer/react
2
2
 
3
- ## 38.39.1
3
+ ## 38.40.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#8386](https://github.com/primer/react/pull/8386) [`6c64598`](https://github.com/primer/react/commit/6c645987c5ad27d5c23f57190a10b8707b29c58c) Thanks [@rickyzhangca](https://github.com/rickyzhangca)! - DataTable: Add config-driven row groups that can be interleaved with standalone rows.
4
8
 
5
9
  ### Patch Changes
6
10
 
package/dist/DataTable/DataTable.d.ts CHANGED
@@ -1,11 +1,11 @@
1
- import { ObjectPaths } from "./utils.js";
2
- import { UniqueRow } from "./row.js";
1
+ import { IsAny, ObjectPaths } from "./utils.js";
2
+ import { DataTableData, DataTableRowGroup, UniqueRow } from "./row.js";
3
3
  import { SortDirection } from "./sorting.js";
4
4
  import { Column } from "./column.js";
5
- import React from "react";
5
+ import { ReactElement } from "react";
6
6
 
7
7
  //#region src/DataTable/DataTable.d.ts
8
- type DataTableProps<Data extends UniqueRow> = {
8
+ type DataTableBaseProps<Data extends UniqueRow> = {
9
9
  /**
10
10
  * Provide an id to an element which uniquely describes this table
11
11
  */
@@ -19,10 +19,6 @@ type DataTableProps<Data extends UniqueRow> = {
19
19
  * a cell
20
20
  */
21
21
  cellPadding?: 'condensed' | 'normal' | 'spacious';
22
- /**
23
- * Provide a collection of the rows which will be rendered inside of the table
24
- */
25
- data: Array<Data>;
26
22
  /**
27
23
  * Provide the columns for the table and the fields in `data` to which they
28
24
  * correspond
@@ -60,17 +56,21 @@ type DataTableProps<Data extends UniqueRow> = {
60
56
  */
61
57
  onToggleSort?: (columnId: ObjectPaths<Data> | string | number, direction: Exclude<SortDirection, 'NONE'>) => void;
62
58
  };
63
- declare function DataTable<Data extends UniqueRow>({
64
- 'aria-labelledby': labelledby,
65
- 'aria-describedby': describedby,
66
- cellPadding,
67
- columns,
68
- data,
69
- initialSortColumn,
70
- initialSortDirection,
71
- externalSorting,
72
- getRowId,
73
- onToggleSort
74
- }: DataTableProps<Data>): React.JSX.Element;
59
+ type DataTableProps<Data extends UniqueRow> = DataTableBaseProps<Data> & {
60
+ /**
61
+ * Provide a collection of rows, row groups, or a mixture of both.
62
+ */
63
+ data: DataTableData<Data>;
64
+ };
65
+ type DataFromItem<Item> = Item extends DataTableRowGroup<infer Data> ? Data : Item extends UniqueRow ? Item : never;
66
+ type DataFromInput<Input extends DataTableData<UniqueRow>> = IsAny<Input> extends true ? UniqueRow : DataFromItem<Input[number]>;
67
+ type InferredDataTableProps<Input extends DataTableData<UniqueRow>> = DataTableBaseProps<DataFromInput<Input>> & {
68
+ data: Input & DataTableData<DataFromInput<Input>>;
69
+ };
70
+ interface DataTableComponent {
71
+ <Data extends UniqueRow>(props: DataTableProps<Data>): ReactElement;
72
+ <Input extends DataTableData<UniqueRow>>(props: InferredDataTableProps<Input>): ReactElement;
73
+ }
74
+ declare const DataTable: DataTableComponent;
75
75
  //#endregion
76
76
  export { DataTable, DataTableProps };
package/dist/DataTable/DataTable.js CHANGED
@@ -1,13 +1,14 @@
1
1
  import { c } from "../utils/react-compiler-runtime.js";
2
2
  import { useTable } from "./useTable.js";
3
3
  import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableSortHeader } from "./Table.js";
4
+ import { TableGroup } from "./TableGroup.js";
4
5
  import { jsx, jsxs } from "react/jsx-runtime";
5
6
  //#region src/DataTable/DataTable.tsx
6
7
  function defaultGetRowId(row) {
7
8
  return row.id;
8
9
  }
9
- function DataTable(t0) {
10
- const $ = c(27);
10
+ function DataTableImplementation(t0) {
11
+ const $ = c(28);
11
12
  const { "aria-labelledby": labelledby, "aria-describedby": describedby, cellPadding, columns, data, initialSortColumn, initialSortDirection, externalSorting, getRowId: t1, onToggleSort } = t0;
12
13
  const getRowId = t1 === void 0 ? defaultGetRowId : t1;
13
14
  let t2;
@@ -28,13 +29,15 @@ function DataTable(t0) {
28
29
  $[5] = initialSortDirection;
29
30
  $[6] = t2;
30
31
  } else t2 = $[6];
31
- const { headers, rows, actions, gridTemplateColumns } = useTable(t2);
32
+ const { headers, bodies, actions, gridTemplateColumns } = useTable(t2);
33
+ const renderRow = _temp;
32
34
  let t3;
33
35
  if ($[7] !== actions || $[8] !== headers || $[9] !== onToggleSort) {
34
36
  let t4;
35
37
  if ($[11] !== actions || $[12] !== onToggleSort) {
36
38
  t4 = (header) => {
37
39
  if (header.isSortable()) return /*#__PURE__*/ jsx(TableSortHeader, {
40
+ id: header.domId,
38
41
  align: header.column.align,
39
42
  direction: header.getSortDirection(),
40
43
  onToggleSort: () => {
@@ -45,6 +48,7 @@ function DataTable(t0) {
45
48
  children: typeof header.column.header === "string" ? header.column.header : header.column.header()
46
49
  }, header.id);
47
50
  return /*#__PURE__*/ jsx(TableHeader, {
51
+ id: header.domId,
48
52
  align: header.column.align,
49
53
  children: typeof header.column.header === "string" ? header.column.header : header.column.header()
50
54
  }, header.id);
@@ -66,43 +70,54 @@ function DataTable(t0) {
66
70
  $[15] = t4;
67
71
  } else t4 = $[15];
68
72
  let t5;
69
- if ($[16] !== rows) {
70
- t5 = rows.map(_temp);
71
- $[16] = rows;
72
- $[17] = t5;
73
- } else t5 = $[17];
74
- let t6;
75
- if ($[18] !== t5) {
76
- t6 = /*#__PURE__*/ jsx(TableBody, { children: 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, {
77
+ id: body.id,
78
+ label: body.label,
79
+ rowCount: body.rows.length,
80
+ colSpan: headers.length,
81
+ "aria-label": body["aria-label"],
82
+ children: body.rows.map(renderRow)
83
+ }, 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;
77
90
  $[18] = t5;
78
- $[19] = t6;
79
- } else t6 = $[19];
80
- let t7;
81
- if ($[20] !== cellPadding || $[21] !== describedby || $[22] !== gridTemplateColumns || $[23] !== labelledby || $[24] !== t4 || $[25] !== t6) {
82
- t7 = /*#__PURE__*/ jsxs(Table, {
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, {
83
95
  "aria-labelledby": labelledby,
84
96
  "aria-describedby": describedby,
85
97
  cellPadding,
86
98
  gridTemplateColumns,
87
- children: [t4, t6]
99
+ children: [t4, t5]
88
100
  });
89
- $[20] = cellPadding;
90
- $[21] = describedby;
91
- $[22] = gridTemplateColumns;
92
- $[23] = labelledby;
93
- $[24] = t4;
94
- $[25] = t6;
95
- $[26] = t7;
96
- } else t7 = $[26];
97
- return t7;
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;
98
110
  }
99
111
  function _temp(row) {
100
112
  return /*#__PURE__*/ jsx(TableRow, { children: row.getCells().map((cell) => /*#__PURE__*/ jsx(TableCell, {
113
+ id: cell.domId,
101
114
  scope: cell.rowHeader ? "row" : void 0,
102
115
  align: cell.column.align,
116
+ headers: cell.headers,
103
117
  children: cell.column.renderCell ? cell.column.renderCell(row.getValue()) : cell.getValue()
104
118
  }, cell.id)) }, row.id);
105
119
  }
106
120
  _temp.displayName = "_temp";
121
+ const DataTable = DataTableImplementation;
107
122
  //#endregion
108
123
  export { DataTable };
package/dist/DataTable/TableGroup.js CHANGED
@@ -8,10 +8,9 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
8
8
  import { clsx } from "clsx";
9
9
  //#region src/DataTable/TableGroup.tsx
10
10
  function TableGroup(t0) {
11
- const $ = c(37);
11
+ const $ = c(38);
12
12
  const { className, id, label, rowCount, colSpan, children, "aria-label": ariaLabel } = t0;
13
13
  const headerId = useId();
14
- const accessibleName = `${label}, ${rowCount} ${rowCount === 1 ? "row" : "rows"}`;
15
14
  let t1;
16
15
  if ($[0] !== headerId) {
17
16
  t1 = { headerId };
@@ -31,59 +30,65 @@ function TableGroup(t0) {
31
30
  $[4] = t3;
32
31
  } else t3 = $[4];
33
32
  let t4;
34
- if ($[5] !== accessibleName) {
35
- t4 = /*#__PURE__*/ jsx(VisuallyHidden, { children: accessibleName });
36
- $[5] = accessibleName;
37
- $[6] = t4;
38
- } else t4 = $[6];
39
33
  let t5;
40
- let t6;
41
- if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
42
- t5 = clsx("TableGroupHeaderContent", Table_module_css_default.TableGroupHeaderContent);
43
- t6 = clsx("TableGroupHeaderLabel", Table_module_css_default.TableGroupHeaderLabel);
44
- $[7] = t5;
45
- $[8] = t6;
34
+ if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
35
+ t4 = clsx("TableGroupHeaderContent", Table_module_css_default.TableGroupHeaderContent);
36
+ t5 = clsx("TableGroupHeaderLabel", Table_module_css_default.TableGroupHeaderLabel);
37
+ $[5] = t4;
38
+ $[6] = t5;
46
39
  } else {
47
- t5 = $[7];
48
- t6 = $[8];
40
+ t4 = $[5];
41
+ t5 = $[6];
49
42
  }
43
+ let t6;
44
+ if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
45
+ t6 = /*#__PURE__*/ jsx(VisuallyHidden, { children: "," });
46
+ $[7] = t6;
47
+ } else t6 = $[7];
50
48
  let t7;
51
- if ($[9] !== label) {
52
- t7 = /*#__PURE__*/ jsx("span", {
53
- className: t6,
54
- children: label
49
+ if ($[8] !== label) {
50
+ t7 = /*#__PURE__*/ jsxs("span", {
51
+ className: t5,
52
+ children: [label, t6]
55
53
  });
56
- $[9] = label;
57
- $[10] = t7;
58
- } else t7 = $[10];
54
+ $[8] = label;
55
+ $[9] = t7;
56
+ } else t7 = $[9];
59
57
  let t8;
60
- if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
58
+ if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
61
59
  t8 = clsx("TableGroupHeaderCount", Table_module_css_default.TableGroupHeaderCount);
62
- $[11] = t8;
63
- } else t8 = $[11];
64
- let t9;
65
- if ($[12] !== rowCount) {
66
- t9 = /*#__PURE__*/ jsx("span", {
60
+ $[10] = t8;
61
+ } else t8 = $[10];
62
+ const t9 = rowCount === 1 ? " row" : " rows";
63
+ let t10;
64
+ if ($[11] !== t9) {
65
+ t10 = /*#__PURE__*/ jsx(VisuallyHidden, { children: t9 });
66
+ $[11] = t9;
67
+ $[12] = t10;
68
+ } else t10 = $[12];
69
+ let t11;
70
+ if ($[13] !== rowCount || $[14] !== t10) {
71
+ t11 = /*#__PURE__*/ jsxs("span", {
67
72
  className: t8,
68
- children: rowCount
73
+ children: [rowCount, t10]
69
74
  });
70
- $[12] = rowCount;
71
- $[13] = t9;
72
- } else t9 = $[13];
73
- let t10;
74
- if ($[14] !== t7 || $[15] !== t9) {
75
- t10 = /*#__PURE__*/ jsxs("span", {
76
- "aria-hidden": "true",
77
- className: t5,
78
- children: [t7, t9]
75
+ $[13] = rowCount;
76
+ $[14] = t10;
77
+ $[15] = t11;
78
+ } else t11 = $[15];
79
+ let t12;
80
+ if ($[16] !== t11 || $[17] !== t7) {
81
+ t12 = /*#__PURE__*/ jsxs("span", {
82
+ className: t4,
83
+ children: [t7, t11]
79
84
  });
80
- $[14] = t7;
81
- $[15] = t9;
82
- $[16] = t10;
83
- } else t10 = $[16];
84
- let t11;
85
- if ($[17] !== ariaLabel || $[18] !== colSpan || $[19] !== headerId || $[20] !== t10 || $[21] !== t4) {
86
- t11 = /*#__PURE__*/ jsx(TableRow, { children: /*#__PURE__*/ jsxs("th", {
85
+ $[16] = t11;
86
+ $[17] = t7;
87
+ $[18] = t12;
88
+ } else t12 = $[18];
89
+ let t13;
90
+ if ($[19] !== ariaLabel || $[20] !== colSpan || $[21] !== headerId || $[22] !== t12) {
91
+ t13 = /*#__PURE__*/ jsx(TableRow, { children: /*#__PURE__*/ jsx("th", {
87
92
  id: headerId,
88
93
  className: t3,
89
94
  scope: "colgroup",
@@ -91,65 +96,64 @@ function TableGroup(t0) {
91
96
  role: "columnheader",
92
97
  "aria-label": ariaLabel,
93
98
  "data-component": "Table.Group.Header",
94
- children: [t4, t10]
99
+ children: t12
95
100
  }) });
96
- $[17] = ariaLabel;
97
- $[18] = colSpan;
98
- $[19] = headerId;
99
- $[20] = t10;
100
- $[21] = t4;
101
- $[22] = t11;
102
- } else t11 = $[22];
103
- let t12;
104
- if ($[23] !== id || $[24] !== t11 || $[25] !== t2) {
105
- t12 = /*#__PURE__*/ jsx("tbody", {
101
+ $[19] = ariaLabel;
102
+ $[20] = colSpan;
103
+ $[21] = headerId;
104
+ $[22] = t12;
105
+ $[23] = t13;
106
+ } else t13 = $[23];
107
+ let t14;
108
+ if ($[24] !== id || $[25] !== t13 || $[26] !== t2) {
109
+ t14 = /*#__PURE__*/ jsx("tbody", {
106
110
  className: t2,
107
111
  role: "rowgroup",
108
112
  "data-component": "Table.Group",
109
113
  "data-group-id": id,
110
- children: t11
114
+ children: t13
111
115
  });
112
- $[23] = id;
113
- $[24] = t11;
114
- $[25] = t2;
115
- $[26] = t12;
116
- } else t12 = $[26];
117
- let t13;
118
- if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
119
- t13 = clsx("TableBody", Table_module_css_default.TableBody);
120
- $[27] = t13;
121
- } else t13 = $[27];
122
- let t14;
123
- if ($[28] !== children || $[29] !== contextValue) {
124
- t14 = /*#__PURE__*/ jsx(TableGroupContext.Provider, {
116
+ $[24] = id;
117
+ $[25] = t13;
118
+ $[26] = t2;
119
+ $[27] = t14;
120
+ } else t14 = $[27];
121
+ let t15;
122
+ if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
123
+ t15 = clsx("TableBody", Table_module_css_default.TableBody);
124
+ $[28] = t15;
125
+ } else t15 = $[28];
126
+ let t16;
127
+ if ($[29] !== children || $[30] !== contextValue) {
128
+ t16 = /*#__PURE__*/ jsx(TableGroupContext.Provider, {
125
129
  value: contextValue,
126
130
  children
127
131
  });
128
- $[28] = children;
129
- $[29] = contextValue;
130
- $[30] = t14;
131
- } else t14 = $[30];
132
- let t15;
133
- if ($[31] !== id || $[32] !== t14) {
134
- t15 = /*#__PURE__*/ jsx("tbody", {
135
- className: t13,
132
+ $[29] = children;
133
+ $[30] = contextValue;
134
+ $[31] = t16;
135
+ } else t16 = $[31];
136
+ let t17;
137
+ if ($[32] !== id || $[33] !== t16) {
138
+ t17 = /*#__PURE__*/ jsx("tbody", {
139
+ className: t15,
136
140
  role: "rowgroup",
137
141
  "data-component": "Table.Group.Body",
138
142
  "data-group-id": id,
139
- children: t14
143
+ children: t16
140
144
  });
141
- $[31] = id;
142
- $[32] = t14;
143
- $[33] = t15;
144
- } else t15 = $[33];
145
- let t16;
146
- if ($[34] !== t12 || $[35] !== t15) {
147
- t16 = /*#__PURE__*/ jsxs(Fragment$1, { children: [t12, t15] });
148
- $[34] = t12;
149
- $[35] = t15;
150
- $[36] = t16;
151
- } else t16 = $[36];
152
- return t16;
145
+ $[32] = id;
146
+ $[33] = t16;
147
+ $[34] = t17;
148
+ } else t17 = $[34];
149
+ let t18;
150
+ if ($[35] !== t14 || $[36] !== t17) {
151
+ t18 = /*#__PURE__*/ jsxs(Fragment$1, { children: [t14, t17] });
152
+ $[35] = t14;
153
+ $[36] = t17;
154
+ $[37] = t18;
155
+ } else t18 = $[37];
156
+ return t18;
153
157
  }
154
158
  //#endregion
155
159
  export { TableGroup };
package/dist/DataTable/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { SlotMarker } from "../utils/types/Slots.js";
2
2
  import { ObjectPaths } from "./utils.js";
3
- import { UniqueRow } from "./row.js";
3
+ import { DataTableData, DataTableRowGroup, UniqueRow } from "./row.js";
4
4
  import { CellAlignment, Column, ColumnWidth, createColumnHelper } from "./column.js";
5
5
  import { DataTable, DataTableProps } from "./DataTable.js";
6
6
  import { ErrorDialog } from "./ErrorDialog.js";
@@ -27,4 +27,4 @@ declare const Table: typeof Table$1 & SlotMarker & {
27
27
  ErrorDialog: typeof ErrorDialog;
28
28
  };
29
29
  //#endregion
30
- export { type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableProps, 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 };
30
+ 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 };
package/dist/DataTable/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Table as Table$1, TableActions, TableBody, TableCell, TableCellPlaceholder, TableContainer, TableDivider, TableHead, TableHeader, TableRow, TableSkeleton, TableSubtitle, TableTitle } from "./Table.js";
2
+ import { TableGroup } from "./TableGroup.js";
2
3
  import { DataTable } from "./DataTable.js";
3
4
  import { ErrorDialog } from "./ErrorDialog.js";
4
- import { TableGroup } from "./TableGroup.js";
5
5
  import { Pagination } from "./Pagination.js";
6
6
  import { createColumnHelper } from "./column.js";
7
7
  //#region src/DataTable/index.ts
package/dist/DataTable/row.d.ts CHANGED
@@ -2,5 +2,28 @@
2
2
  interface UniqueRow {
3
3
  id: string | number;
4
4
  }
5
+ interface DataTableRowGroup<Data extends UniqueRow> {
6
+ /**
7
+ * Provide a stable identifier for the group.
8
+ */
9
+ groupId: string | number;
10
+ /**
11
+ * Provide a visible label for the group.
12
+ */
13
+ label: string;
14
+ /**
15
+ * Provide the rows that belong to the group.
16
+ */
17
+ rows: Array<Data>;
18
+ /**
19
+ * Provide an accessible name for the group header.
20
+ */
21
+ 'aria-label'?: string;
22
+ }
23
+ /**
24
+ * Items with both `groupId` and an array-valued `rows` are treated as groups.
25
+ * This combination is reserved and must not be used for standalone row data.
26
+ */
27
+ type DataTableData<Data extends UniqueRow> = Array<Data | DataTableRowGroup<Data>>;
5
28
  //#endregion
6
- export { UniqueRow };
29
+ export { DataTableData, DataTableRowGroup, UniqueRow };
package/dist/DataTable/useTable.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import { c } from "../utils/react-compiler-runtime.js";
2
2
  import { DEFAULT_SORT_DIRECTION, SortDirection, strategies, transition } from "./sorting.js";
3
- import { useState } from "react";
3
+ import { useId, useState } from "react";
4
4
  //#region src/DataTable/useTable.ts
5
5
  function useTable(t0) {
6
- const $ = c(21);
6
+ const $ = c(29);
7
7
  const { columns, data, initialSortColumn, initialSortDirection, externalSorting, getRowId } = t0;
8
+ const tableId = useId();
8
9
  const [rowOrder, setRowOrder] = useState(data);
9
10
  const [prevData, setPrevData] = useState(data);
10
11
  const [prevColumns, setPrevColumns] = useState(columns);
@@ -29,18 +30,26 @@ function useTable(t0) {
29
30
  }
30
31
  }
31
32
  let t2;
32
- let t3;
33
- let t4;
34
- if ($[4] !== columns || $[5] !== data || $[6] !== externalSorting || $[7] !== getRowId || $[8] !== prevData || $[9] !== rowOrder || $[10] !== sortByColumn) {
35
- let t5;
36
- if ($[14] !== sortByColumn) {
37
- t5 = (column_1) => {
33
+ if ($[4] !== rowOrder) {
34
+ t2 = rowOrder.some(isDataTableRowGroup);
35
+ $[4] = rowOrder;
36
+ $[5] = t2;
37
+ } else t2 = $[5];
38
+ const hasGroups = t2;
39
+ let bodies;
40
+ let headers;
41
+ let sortBy;
42
+ if ($[6] !== columns || $[7] !== data || $[8] !== externalSorting || $[9] !== getRowId || $[10] !== hasGroups || $[11] !== prevData || $[12] !== rowOrder || $[13] !== sortByColumn || $[14] !== tableId) {
43
+ let t3;
44
+ if ($[18] !== hasGroups || $[19] !== sortByColumn || $[20] !== tableId) {
45
+ t3 = (column_1, index) => {
38
46
  var _column_1$id;
39
47
  const id_0 = (_column_1$id = column_1.id) !== null && _column_1$id !== void 0 ? _column_1$id : column_1.field;
40
48
  if (id_0 === void 0) throw new Error("Expected either an `id` or `field` to be defined for a Column");
41
49
  const sortable = column_1.sortBy !== void 0 && column_1.sortBy !== false;
42
50
  return {
43
51
  id: id_0,
52
+ domId: hasGroups ? `${tableId}-column-${index}` : void 0,
44
53
  column: column_1,
45
54
  isSortable() {
46
55
  return sortable;
@@ -51,103 +60,171 @@ function useTable(t0) {
51
60
  }
52
61
  };
53
62
  };
54
- $[14] = sortByColumn;
55
- $[15] = t5;
56
- } else t5 = $[15];
57
- const headers = columns.map(t5);
63
+ $[18] = hasGroups;
64
+ $[19] = sortByColumn;
65
+ $[20] = tableId;
66
+ $[21] = t3;
67
+ } else t3 = $[21];
68
+ headers = columns.map(t3);
58
69
  if (data !== prevData) {
59
70
  setPrevData(data);
60
- setRowOrder(data);
61
- if (sortByColumn) sortRows(sortByColumn);
71
+ updateRowOrder(data, sortByColumn);
62
72
  }
63
- const sortBy = function sortBy(header) {
73
+ sortBy = function sortBy(header) {
64
74
  const sortState = {
65
75
  id: header.id,
66
76
  direction: sortByColumn && sortByColumn.id === header.id ? transition(sortByColumn.direction) : DEFAULT_SORT_DIRECTION
67
77
  };
68
78
  setSortByColumn(sortState);
69
- sortRows(sortState);
79
+ updateRowOrder(rowOrder, sortState);
70
80
  };
71
- function sortRows(state) {
72
- const header_1 = headers.find((header_0) => header_0.id === state.id);
73
- if (!header_1) throw new Error(`Unable to find header with id: ${state.id}`);
81
+ function updateRowOrder(rows, state) {
82
+ if (externalSorting || state === null) setRowOrder(rows);
83
+ else {
84
+ const sortedRows = getSortedRowOrder(rows, state);
85
+ setRowOrder(sortedRows);
86
+ }
87
+ }
88
+ function getSortedRowOrder(currentRowOrder, state_0) {
89
+ const header_1 = headers.find((header_0) => header_0.id === state_0.id);
90
+ if (!header_1) throw new Error(`Unable to find header with id: ${state_0.id}`);
74
91
  if (header_1.column.sortBy === false || header_1.column.sortBy === void 0) throw new Error("The column for this header is not sortable");
75
- if (externalSorting) return;
76
- const sortMethod = header_1.column.sortBy === true ? strategies.basic : typeof header_1.column.sortBy === "string" ? strategies[header_1.column.sortBy] : header_1.column.sortBy;
77
- setRowOrder((rowOrder_0) => rowOrder_0.slice().sort((a, b) => {
78
- if (header_1.column.field === void 0) return 0;
79
- if (typeof header_1.column.sortBy === "function") {
80
- if (state.direction === SortDirection.ASC) return sortMethod(a, b);
81
- return sortMethod(b, a);
82
- }
83
- const valueA = get(a, header_1.column.field);
84
- const valueB = get(b, header_1.column.field);
85
- const valueAIsBlank = isBlankValue(valueA);
86
- const valueBIsBlank = isBlankValue(valueB);
87
- if (!valueAIsBlank && !valueBIsBlank) {
88
- if (state.direction === SortDirection.ASC) return sortMethod(valueA, valueB);
89
- return sortMethod(valueB, valueA);
90
- }
91
- if (!valueAIsBlank) return -1;
92
- if (!valueBIsBlank) return 1;
93
- return 0;
94
- }));
92
+ const column_2 = header_1.column;
93
+ const sortMethod = column_2.sortBy === true ? strategies.basic : typeof column_2.sortBy === "string" ? strategies[column_2.sortBy] : column_2.sortBy;
94
+ const sortData = function sortData(rows_0) {
95
+ return rows_0.slice().sort((a, b) => {
96
+ if (column_2.field === void 0) return 0;
97
+ if (typeof column_2.sortBy === "function") {
98
+ if (state_0.direction === SortDirection.ASC) return sortMethod(a, b);
99
+ return sortMethod(b, a);
100
+ }
101
+ const valueA = get(a, column_2.field);
102
+ const valueB = get(b, column_2.field);
103
+ const valueAIsBlank = isBlankValue(valueA);
104
+ const valueBIsBlank = isBlankValue(valueB);
105
+ if (!valueAIsBlank && !valueBIsBlank) {
106
+ if (state_0.direction === SortDirection.ASC) return sortMethod(valueA, valueB);
107
+ return sortMethod(valueB, valueA);
108
+ }
109
+ if (!valueAIsBlank) return -1;
110
+ if (!valueBIsBlank) return 1;
111
+ return 0;
112
+ });
113
+ };
114
+ const sorted = [];
115
+ let ungroupedRows = [];
116
+ const appendUngroupedRows = function appendUngroupedRows() {
117
+ for (const row of sortData(ungroupedRows)) sorted.push(row);
118
+ ungroupedRows = [];
119
+ };
120
+ for (const item of currentRowOrder) if (isDataTableRowGroup(item)) {
121
+ appendUngroupedRows();
122
+ sorted.push({
123
+ ...item,
124
+ rows: sortData(item.rows)
125
+ });
126
+ } else ungroupedRows.push(item);
127
+ appendUngroupedRows();
128
+ return sorted;
95
129
  }
96
- t2 = headers;
97
- t3 = rowOrder.map((row) => {
98
- const rowId = getRowId(row);
130
+ const createRow = function createRow(row_0, rowIndex) {
131
+ const rowId = getRowId(row_0);
132
+ const rowHeaderIds = hasGroups ? headers.flatMap((header_2, index_0) => header_2.column.rowHeader ? [`${tableId}-row-${rowIndex}-header-${index_0}`] : []) : [];
99
133
  return {
134
+ type: "row",
100
135
  id: `${rowId}`,
101
136
  getValue() {
102
- return row;
137
+ return row_0;
103
138
  },
104
139
  getCells() {
105
- return headers.map((header_2) => {
106
- var _header_2$column$rowH;
140
+ return headers.map((header_3, index_1) => {
141
+ var _header_3$column$rowH;
142
+ const rowHeader = (_header_3$column$rowH = header_3.column.rowHeader) !== null && _header_3$column$rowH !== void 0 ? _header_3$column$rowH : false;
107
143
  return {
108
- id: `${rowId}:${header_2.id}`,
109
- column: header_2.column,
110
- rowHeader: (_header_2$column$rowH = header_2.column.rowHeader) !== null && _header_2$column$rowH !== void 0 ? _header_2$column$rowH : false,
144
+ id: `${rowId}:${header_3.id}`,
145
+ domId: hasGroups && rowHeader ? `${tableId}-row-${rowIndex}-header-${index_1}` : void 0,
146
+ headers: hasGroups ? (rowHeader ? [header_3.domId] : [...rowHeaderIds, header_3.domId]).join(" ") : void 0,
147
+ column: header_3.column,
148
+ rowHeader,
111
149
  getValue() {
112
- if (header_2.column.field !== void 0) return get(row, header_2.column.field);
113
- throw new Error(`Unable to get value for column header ${header_2.id}`);
150
+ if (header_3.column.field !== void 0) return get(row_0, header_3.column.field);
151
+ throw new Error(`Unable to get value for column header ${header_3.id}`);
114
152
  }
115
153
  };
116
154
  });
117
155
  }
118
156
  };
119
- });
120
- t4 = { sortBy };
121
- $[4] = columns;
122
- $[5] = data;
123
- $[6] = externalSorting;
124
- $[7] = getRowId;
125
- $[8] = prevData;
126
- $[9] = rowOrder;
127
- $[10] = sortByColumn;
128
- $[11] = t2;
129
- $[12] = t3;
130
- $[13] = t4;
157
+ };
158
+ bodies = [];
159
+ let rowIndex_0 = 0;
160
+ let body = {
161
+ type: "row-body",
162
+ key: "rows:start",
163
+ rows: []
164
+ };
165
+ for (const item_0 of rowOrder) if (isDataTableRowGroup(item_0)) {
166
+ if (body.rows.length > 0) bodies.push(body);
167
+ const groupStartIndex = rowIndex_0;
168
+ bodies.push({
169
+ type: "row-group",
170
+ key: `group:${item_0.groupId}`,
171
+ id: item_0.groupId,
172
+ label: item_0.label,
173
+ rows: item_0.rows.map((row_1, index_2) => createRow(row_1, groupStartIndex + index_2)),
174
+ "aria-label": item_0["aria-label"]
175
+ });
176
+ rowIndex_0 = rowIndex_0 + item_0.rows.length;
177
+ body = {
178
+ type: "row-body",
179
+ key: `rows:after:${item_0.groupId}`,
180
+ rows: []
181
+ };
182
+ } else {
183
+ body.rows.push(createRow(item_0, rowIndex_0));
184
+ rowIndex_0 = rowIndex_0 + 1;
185
+ }
186
+ if (body.rows.length > 0 || bodies.length === 0) bodies.push(body);
187
+ $[6] = columns;
188
+ $[7] = data;
189
+ $[8] = externalSorting;
190
+ $[9] = getRowId;
191
+ $[10] = hasGroups;
192
+ $[11] = prevData;
193
+ $[12] = rowOrder;
194
+ $[13] = sortByColumn;
195
+ $[14] = tableId;
196
+ $[15] = bodies;
197
+ $[16] = headers;
198
+ $[17] = sortBy;
131
199
  } else {
132
- t2 = $[11];
133
- t3 = $[12];
134
- t4 = $[13];
200
+ bodies = $[15];
201
+ headers = $[16];
202
+ sortBy = $[17];
135
203
  }
136
- let t5;
137
- if ($[16] !== gridTemplateColumns || $[17] !== t2 || $[18] !== t3 || $[19] !== t4) {
138
- t5 = {
139
- headers: t2,
140
- rows: t3,
141
- actions: t4,
142
- gridTemplateColumns
204
+ let t3;
205
+ if ($[22] !== sortBy) {
206
+ t3 = { sortBy };
207
+ $[22] = sortBy;
208
+ $[23] = t3;
209
+ } else t3 = $[23];
210
+ let t4;
211
+ if ($[24] !== bodies || $[25] !== gridTemplateColumns || $[26] !== headers || $[27] !== t3) {
212
+ t4 = {
213
+ headers,
214
+ actions: t3,
215
+ gridTemplateColumns,
216
+ bodies
143
217
  };
144
- $[16] = gridTemplateColumns;
145
- $[17] = t2;
146
- $[18] = t3;
147
- $[19] = t4;
148
- $[20] = t5;
149
- } else t5 = $[20];
150
- return t5;
218
+ $[24] = bodies;
219
+ $[25] = gridTemplateColumns;
220
+ $[26] = headers;
221
+ $[27] = t3;
222
+ $[28] = t4;
223
+ } else t4 = $[28];
224
+ return t4;
225
+ }
226
+ function isDataTableRowGroup(item) {
227
+ return "groupId" in item && "rows" in item && Array.isArray(item.rows);
151
228
  }
152
229
  function getInitialSortState(columns, initialSortColumn, initialSortDirection) {
153
230
  if (initialSortColumn !== void 0) {
package/dist/DataTable/utils.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  //#region src/DataTable/utils.d.ts
2
+ type IsAny<T> = 0 extends 1 & T ? true : false;
2
3
  type ArrayOfLength<Length extends number, SizedArray extends Array<unknown> = []> = SizedArray['length'] extends Length ? SizedArray : ArrayOfLength<Length, [...SizedArray, SizedArray['length']]>;
3
4
  type MaxLength = ArrayOfLength<10>[number];
4
5
  type ArrayIndex<A extends ReadonlyArray<any>, Keys extends number = never> = A extends readonly [] ? Keys : A extends readonly [infer _, ...infer Tail] ? ArrayIndex<Tail, Keys | Tail['length']> : Keys;
@@ -6,6 +7,7 @@ type ArrayWithinBounds<T> = T extends ReadonlyArray<any> & {
6
7
  length: infer Length;
7
8
  } ? Length extends MaxLength ? T : never : never;
8
9
  type ObjectPaths<T> = T extends readonly any[] & ArrayWithinBounds<T> ? `${ArrayIndex<T>}` | PrefixPath<T, ArrayIndex<T>> : T extends any[] ? never & 'Unable to determine keys of potentially boundless array' : T extends Date ? never : T extends object ? Extract<keyof T, string | number> | PrefixPath<T, Extract<keyof T, string | number>> : never;
9
- type PrefixPath<T, Prefix> = Prefix extends Extract<keyof T, number | string> ? `${Prefix}.${ObjectPaths<T[Prefix]>}` : never;
10
+ type PrefixPath<T, Prefix> = Prefix extends Extract<keyof T, number | string> ? `${Prefix}.${NestedObjectPaths<T[Prefix]>}` : never;
11
+ type NestedObjectPaths<T> = IsAny<T> extends true ? string : ObjectPaths<T>;
10
12
  //#endregion
11
- export { ObjectPaths };
13
+ export { IsAny, ObjectPaths };
package/dist/experimental/index.d.ts CHANGED
@@ -15,7 +15,7 @@ import { FilteredActionListProps } from "../FilteredActionList/FilteredActionLis
15
15
  import { FilteredActionListInputProps } from "../FilteredActionList/FilteredActionListInput.js";
16
16
  import { FilteredActionList } from "../FilteredActionList/index.js";
17
17
  import { ObjectPaths } from "../DataTable/utils.js";
18
- import { UniqueRow } from "../DataTable/row.js";
18
+ import { DataTableData, DataTableRowGroup, UniqueRow } from "../DataTable/row.js";
19
19
  import { CellAlignment, Column, ColumnWidth, createColumnHelper } from "../DataTable/column.js";
20
20
  import { ActionBarButtonProps, ActionBarMenuItemProps, ActionBarMenuProps, ActionBarProps } from "../ActionBar/ActionBar.js";
21
21
  import { ActionBar } from "../ActionBar/index.js";
@@ -51,4 +51,4 @@ import { useTabPanel } from "./Tabs/useTabPanel.js";
51
51
  import { TopicTagProps } from "../TopicTag/TopicTag.js";
52
52
  import { TopicTagGroupProps } from "../TopicTag/TopicTagGroup.js";
53
53
  import { TopicTag } from "../TopicTag/index.js";
54
- export { ActionBar, type ActionBarButtonProps, type ActionBarMenuItemProps, type ActionBarMenuProps, type ActionBarProps, Announce, type AnnounceProps, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, BlankslateContainer as Blankslate, type BlankslateProps, ButtonBase, type ButtonBaseProps, Card, type ActionProps as CardActionProps, type DescriptionProps as CardDescriptionProps, type HeadingProps as CardHeadingProps, type IconProps as CardIconProps, type ImageProps as CardImageProps, type MetadataProps as CardMetadataProps, type CardProps, type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableProps, DefaultFeatureFlags, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, FeatureFlags, type FeatureFlagsProps, FilteredActionList, type FilteredActionListInputProps, FilteredActionListLoadingTypes, type FilteredActionListProps, Hidden, type HiddenProps, InlineMessage, type InlineMessageProps, IssueLabel, type IssueLabelProps, KeybindingHint, type KeybindingHintProps, NavList, type NavListDividerProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, type ObjectPaths, PageHeader, type ActionsProps as PageHeaderActionsProps, type PageHeaderProps, type TitleProps as PageHeaderTitleProps, ScrollableRegion, type ScrollableRegionProps, SelectPanel, type SelectPanelMessageProps, type SelectPanelProps, type SelectPanelSecondaryActionProps, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBox, type SkeletonBoxProps, SkeletonText, type SkeletonTextProps, SlotConfig, Stack, type StackItemProps, type StackProps, type TabListProps, type TabPanelProps, type TabProps, Table, type TableActionsProps, type TableBodyProps, type TableCellProps, type TableContainerProps, type TableGroupProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableSubtitleProps, type TableTitleProps, Tabs, type TabsProps, type TitleProps, Tooltip, type TooltipProps, TopicTag, type TopicTagGroupProps, type TopicTagProps, _default as UnderlinePanels, type PanelProps as UnderlinePanelsPanelProps, type UnderlinePanelsProps, type TabProps$1 as UnderlinePanelsTabProps, type UniqueRow, createColumnHelper, getAccessibleKeybindingHintString, useFeatureFlag, useOverflow, useSlots, useTab, useTabList, useTabPanel };
54
+ export { ActionBar, type ActionBarButtonProps, type ActionBarMenuItemProps, type ActionBarMenuProps, type ActionBarProps, Announce, type AnnounceProps, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, BlankslateContainer as Blankslate, type BlankslateProps, ButtonBase, type ButtonBaseProps, Card, type ActionProps as CardActionProps, type DescriptionProps as CardDescriptionProps, type HeadingProps as CardHeadingProps, type IconProps as CardIconProps, type ImageProps as CardImageProps, type MetadataProps as CardMetadataProps, type CardProps, type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableData, type DataTableProps, type DataTableRowGroup, DefaultFeatureFlags, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, FeatureFlags, type FeatureFlagsProps, FilteredActionList, type FilteredActionListInputProps, FilteredActionListLoadingTypes, type FilteredActionListProps, Hidden, type HiddenProps, InlineMessage, type InlineMessageProps, IssueLabel, type IssueLabelProps, KeybindingHint, type KeybindingHintProps, NavList, type NavListDividerProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, type ObjectPaths, PageHeader, type ActionsProps as PageHeaderActionsProps, type PageHeaderProps, type TitleProps as PageHeaderTitleProps, ScrollableRegion, type ScrollableRegionProps, SelectPanel, type SelectPanelMessageProps, type SelectPanelProps, type SelectPanelSecondaryActionProps, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBox, type SkeletonBoxProps, SkeletonText, type SkeletonTextProps, SlotConfig, Stack, type StackItemProps, type StackProps, type TabListProps, type TabPanelProps, type TabProps, Table, type TableActionsProps, type TableBodyProps, type TableCellProps, type TableContainerProps, type TableGroupProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableSubtitleProps, type TableTitleProps, Tabs, type TabsProps, type TitleProps, Tooltip, type TooltipProps, TopicTag, type TopicTagGroupProps, type TopicTagProps, _default as UnderlinePanels, type PanelProps as UnderlinePanelsPanelProps, type UnderlinePanelsProps, type TabProps$1 as UnderlinePanelsTabProps, type UniqueRow, createColumnHelper, getAccessibleKeybindingHintString, useFeatureFlag, useOverflow, useSlots, useTab, useTabList, useTabPanel };
package/generated/components.json CHANGED
@@ -2739,7 +2739,15 @@
2739
2739
  },
2740
2740
  {
2741
2741
  "id": "experimental-components-datatable-features--with-groups",
2742
- "code": "() => (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories-by-visibility\">\n Repositories by visibility\n </Table.Title>\n <Table\n aria-labelledby=\"repositories-by-visibility\"\n gridTemplateColumns=\"minmax(0, 1fr) auto\"\n >\n <Table.Head>\n <Table.Row>\n <Table.Header id={groupedColumnHeaderIds[0]}>Name</Table.Header>\n <Table.Header id={groupedColumnHeaderIds[1]}>Updated</Table.Header>\n </Table.Row>\n </Table.Head>\n {repoGroups.map((group) => (\n <Table.Group\n key={group.id}\n id={group.id}\n label={group.label}\n rowCount={group.repos.length}\n colSpan={groupedColumnHeaderIds.length}\n >\n {group.repos.map((repo) => (\n <Table.Row key={repo.id}>\n <Table.Cell scope=\"row\" headers={groupedColumnHeaderIds[0]}>\n {repo.name}\n </Table.Cell>\n <Table.Cell headers={groupedColumnHeaderIds[1]}>\n <RelativeTime date={new Date(repo.updatedAt)} />\n </Table.Cell>\n </Table.Row>\n ))}\n </Table.Group>\n ))}\n </Table>\n </Table.Container>\n)"
2742
+ "code": "() => {\n const titleId = React.useId()\n const [pageIndex, setPageIndex] = React.useState(0)\n const pageSize = 10\n const allRows = paginationData.flatMap((item) =>\n 'rows' in item ? item.rows : [item],\n )\n const pageRows = new Set(\n allRows\n .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n .map((row) => row.id),\n )\n // Count data rows, not headings, and preserve each item's position and group membership.\n const data = paginationData.flatMap(\n (item): DataTableData<PaginatedRepository> => {\n if ('rows' in item) {\n const rows = item.rows.filter((row) => pageRows.has(row.id))\n return rows.length > 0\n ? [\n {\n ...item,\n rows,\n },\n ]\n : []\n }\n return pageRows.has(item.id) ? [item] : []\n },\n )\n return (\n <Table.Container>\n <Table.Title as=\"h2\" id={titleId}>\n Paginated repositories by visibility\n </Table.Title>\n <DataTable\n aria-labelledby={titleId}\n data={data}\n columns={[\n {\n header: 'Name',\n field: 'name',\n rowHeader: true,\n sortBy: true,\n },\n {\n header: 'Visibility',\n field: 'visibility',\n },\n ]}\n />\n <Table.Pagination\n aria-label=\"Pagination for grouped repositories\"\n pageSize={pageSize}\n totalCount={allRows.length}\n onChange={({ pageIndex }) => setPageIndex(pageIndex)}\n />\n </Table.Container>\n )\n}"
2743
+ },
2744
+ {
2745
+ "id": "experimental-components-datatable-features--with-sortable-groups",
2746
+ "code": "() => (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"sortable-repositories-by-visibility\">\n Sortable repositories by visibility\n </Table.Title>\n <DataTable\n aria-labelledby=\"sortable-repositories-by-visibility\"\n data={repoGroups}\n columns={sortableGroupedColumns}\n />\n </Table.Container>\n)"
2747
+ },
2748
+ {
2749
+ "id": "experimental-components-table-features--with-groups",
2750
+ "code": "() => {\n const titleId = React.useId()\n const [pageIndex, setPageIndex] = React.useState(0)\n const pageSize = 10\n const allRows = paginationData.flatMap((item) =>\n 'rows' in item ? item.rows : [item],\n )\n const pageRows = new Set(\n allRows\n .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n .map((row) => row.id),\n )\n // Count data rows, not headings, and preserve each item's position and group membership.\n const data = paginationData.flatMap(\n (item): DataTableData<PaginatedRepository> => {\n if ('rows' in item) {\n const rows = item.rows.filter((row) => pageRows.has(row.id))\n return rows.length > 0\n ? [\n {\n ...item,\n rows,\n },\n ]\n : []\n }\n return pageRows.has(item.id) ? [item] : []\n },\n )\n return (\n <Table.Container>\n <Table.Title as=\"h2\" id={titleId}>\n Paginated repositories by visibility\n </Table.Title>\n <DataTable\n aria-labelledby={titleId}\n data={data}\n columns={[\n {\n header: 'Name',\n field: 'name',\n rowHeader: true,\n sortBy: true,\n },\n {\n header: 'Visibility',\n field: 'visibility',\n },\n ]}\n />\n <Table.Pagination\n aria-label=\"Pagination for grouped repositories\"\n pageSize={pageSize}\n totalCount={allRows.length}\n onChange={({ pageIndex }) => setPageIndex(pageIndex)}\n />\n </Table.Container>\n )\n}"
2743
2751
  }
2744
2752
  ],
2745
2753
  "importPath": "@primer/react/experimental",
@@ -2756,8 +2764,8 @@
2756
2764
  },
2757
2765
  {
2758
2766
  "name": "data",
2759
- "type": "Array<Data>",
2760
- "description": "Provide a collection of the rows which will be rendered inside of the table"
2767
+ "type": "Array<Data | DataTableRowGroup<Data>>",
2768
+ "description": "Provide rows, row groups, or a mixture of both to render in the table, in display order."
2761
2769
  },
2762
2770
  {
2763
2771
  "name": "columns",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.39.1-rc.99036c1d8",
4
+ "version": "38.40.0-rc.629dc4f91",
5
5
  "description": "An implementation of GitHub's Primer Design System using React",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",