@primer/react 38.9.0 → 38.10.0-rc.a4404e466
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.
- package/CHANGELOG.md +6 -0
- package/dist/DataTable/DataTable.d.ts +7 -1
- package/dist/DataTable/DataTable.d.ts.map +1 -1
- package/dist/DataTable/DataTable.js +43 -40
- package/dist/DataTable/useTable.d.ts +2 -1
- package/dist/DataTable/useTable.d.ts.map +1 -1
- package/dist/DataTable/useTable.js +28 -23
- package/dist/FeatureFlags/DefaultFeatureFlags.d.ts.map +1 -1
- package/dist/FeatureFlags/DefaultFeatureFlags.js +0 -1
- package/generated/components.json +9 -6
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @primer/react
|
|
2
2
|
|
|
3
|
+
## 38.10.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#7488](https://github.com/primer/react/pull/7488) [`fe85519`](https://github.com/primer/react/commit/fe85519ff23c23294a524e2ddceef042eb3c3608) Thanks [@koesie10](https://github.com/koesie10)! - DataTable: Add `externalSorting` prop to disable client-side sorting
|
|
8
|
+
|
|
3
9
|
## 38.9.0
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
|
@@ -37,6 +37,12 @@ export type DataTableProps<Data extends UniqueRow> = {
|
|
|
37
37
|
* currently sorted column
|
|
38
38
|
*/
|
|
39
39
|
initialSortDirection?: Exclude<SortDirection, 'NONE'>;
|
|
40
|
+
/**
|
|
41
|
+
* When true, disables client-side sorting for all sortable columns in the
|
|
42
|
+
* table. Use this when sorting is handled server-side. The `onToggleSort`
|
|
43
|
+
* callback will still be fired when a sortable column header is clicked.
|
|
44
|
+
*/
|
|
45
|
+
externalSorting?: boolean;
|
|
40
46
|
/**
|
|
41
47
|
* Provide a function to determine the unique identifier for each row.
|
|
42
48
|
* This function allows you to customize the key used for the row.
|
|
@@ -52,6 +58,6 @@ export type DataTableProps<Data extends UniqueRow> = {
|
|
|
52
58
|
*/
|
|
53
59
|
onToggleSort?: (columnId: ObjectPaths<Data> | string | number, direction: Exclude<SortDirection, 'NONE'>) => void;
|
|
54
60
|
};
|
|
55
|
-
declare function DataTable<Data extends UniqueRow>({ 'aria-labelledby': labelledby, 'aria-describedby': describedby, cellPadding, columns, data, initialSortColumn, initialSortDirection, getRowId, onToggleSort, }: DataTableProps<Data>): React.JSX.Element;
|
|
61
|
+
declare function DataTable<Data extends UniqueRow>({ 'aria-labelledby': labelledby, 'aria-describedby': describedby, cellPadding, columns, data, initialSortColumn, initialSortDirection, externalSorting, getRowId, onToggleSort, }: DataTableProps<Data>): React.JSX.Element;
|
|
56
62
|
export { DataTable };
|
|
57
63
|
//# sourceMappingURL=DataTable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../src/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA;AAEpC,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAA;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAA;AAOxC,MAAM,MAAM,cAAc,CAAC,IAAI,SAAS,SAAS,IAAI;IACnD;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAE3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAA;IAEjD;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;IAEjB;;;OAGG;IACH,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAE5B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,MAAM,GAAG,MAAM,CAAA;IAEvD;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;IAErD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,MAAM,GAAG,MAAM,CAAA;IAE7C;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,KAAK,IAAI,CAAA;CAClH,CAAA;AAMD,iBAAS,SAAS,CAAC,IAAI,SAAS,SAAS,EAAE,EACzC,iBAAiB,EAAE,UAAU,EAC7B,kBAAkB,EAAE,WAAW,EAC/B,WAAW,EACX,OAAO,EACP,IAAI,EACJ,iBAAiB,EACjB,oBAAoB,EACpB,QAA0B,EAC1B,YAAY,GACb,EAAE,cAAc,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../src/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA;AAEpC,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAA;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAA;AAOxC,MAAM,MAAM,cAAc,CAAC,IAAI,SAAS,SAAS,IAAI;IACnD;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAE3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAA;IAEjD;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;IAEjB;;;OAGG;IACH,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAE5B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,MAAM,GAAG,MAAM,CAAA;IAEvD;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;IAErD;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,MAAM,GAAG,MAAM,CAAA;IAE7C;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,KAAK,IAAI,CAAA;CAClH,CAAA;AAMD,iBAAS,SAAS,CAAC,IAAI,SAAS,SAAS,EAAE,EACzC,iBAAiB,EAAE,UAAU,EAC7B,kBAAkB,EAAE,WAAW,EAC/B,WAAW,EACX,OAAO,EACP,IAAI,EACJ,iBAAiB,EACjB,oBAAoB,EACpB,eAAe,EACf,QAA0B,EAC1B,YAAY,GACb,EAAE,cAAc,CAAC,IAAI,CAAC,qBAgEtB;AAED,OAAO,EAAC,SAAS,EAAC,CAAA"}
|
|
@@ -7,7 +7,7 @@ function defaultGetRowId(row) {
|
|
|
7
7
|
return row.id;
|
|
8
8
|
}
|
|
9
9
|
function DataTable(t0) {
|
|
10
|
-
const $ = c(
|
|
10
|
+
const $ = c(27);
|
|
11
11
|
const {
|
|
12
12
|
"aria-labelledby": labelledby,
|
|
13
13
|
"aria-describedby": describedby,
|
|
@@ -16,27 +16,30 @@ function DataTable(t0) {
|
|
|
16
16
|
data,
|
|
17
17
|
initialSortColumn,
|
|
18
18
|
initialSortDirection,
|
|
19
|
+
externalSorting,
|
|
19
20
|
getRowId: t1,
|
|
20
21
|
onToggleSort
|
|
21
22
|
} = t0;
|
|
22
23
|
const getRowId = t1 === undefined ? defaultGetRowId : t1;
|
|
23
24
|
let t2;
|
|
24
|
-
if ($[0] !== columns || $[1] !== data || $[2] !==
|
|
25
|
+
if ($[0] !== columns || $[1] !== data || $[2] !== externalSorting || $[3] !== getRowId || $[4] !== initialSortColumn || $[5] !== initialSortDirection) {
|
|
25
26
|
t2 = {
|
|
26
27
|
data,
|
|
27
28
|
columns,
|
|
28
29
|
initialSortColumn,
|
|
29
30
|
initialSortDirection,
|
|
30
|
-
getRowId
|
|
31
|
+
getRowId,
|
|
32
|
+
externalSorting
|
|
31
33
|
};
|
|
32
34
|
$[0] = columns;
|
|
33
35
|
$[1] = data;
|
|
34
|
-
$[2] =
|
|
35
|
-
$[3] =
|
|
36
|
-
$[4] =
|
|
37
|
-
$[5] =
|
|
36
|
+
$[2] = externalSorting;
|
|
37
|
+
$[3] = getRowId;
|
|
38
|
+
$[4] = initialSortColumn;
|
|
39
|
+
$[5] = initialSortDirection;
|
|
40
|
+
$[6] = t2;
|
|
38
41
|
} else {
|
|
39
|
-
t2 = $[
|
|
42
|
+
t2 = $[6];
|
|
40
43
|
}
|
|
41
44
|
const {
|
|
42
45
|
headers,
|
|
@@ -45,9 +48,9 @@ function DataTable(t0) {
|
|
|
45
48
|
gridTemplateColumns
|
|
46
49
|
} = useTable(t2);
|
|
47
50
|
let t3;
|
|
48
|
-
if ($[
|
|
51
|
+
if ($[7] !== actions || $[8] !== headers || $[9] !== onToggleSort) {
|
|
49
52
|
let t4;
|
|
50
|
-
if ($[
|
|
53
|
+
if ($[11] !== actions || $[12] !== onToggleSort) {
|
|
51
54
|
t4 = header => {
|
|
52
55
|
if (header.isSortable()) {
|
|
53
56
|
return /*#__PURE__*/jsx(TableSortHeader, {
|
|
@@ -66,52 +69,52 @@ function DataTable(t0) {
|
|
|
66
69
|
children: typeof header.column.header === "string" ? header.column.header : header.column.header()
|
|
67
70
|
}, header.id);
|
|
68
71
|
};
|
|
69
|
-
$[
|
|
70
|
-
$[
|
|
71
|
-
$[
|
|
72
|
+
$[11] = actions;
|
|
73
|
+
$[12] = onToggleSort;
|
|
74
|
+
$[13] = t4;
|
|
72
75
|
} else {
|
|
73
|
-
t4 = $[
|
|
76
|
+
t4 = $[13];
|
|
74
77
|
}
|
|
75
78
|
t3 = headers.map(t4);
|
|
76
|
-
$[
|
|
77
|
-
$[
|
|
78
|
-
$[
|
|
79
|
-
$[
|
|
79
|
+
$[7] = actions;
|
|
80
|
+
$[8] = headers;
|
|
81
|
+
$[9] = onToggleSort;
|
|
82
|
+
$[10] = t3;
|
|
80
83
|
} else {
|
|
81
|
-
t3 = $[
|
|
84
|
+
t3 = $[10];
|
|
82
85
|
}
|
|
83
86
|
let t4;
|
|
84
|
-
if ($[
|
|
87
|
+
if ($[14] !== t3) {
|
|
85
88
|
t4 = /*#__PURE__*/jsx(TableHead, {
|
|
86
89
|
children: /*#__PURE__*/jsx(TableRow, {
|
|
87
90
|
children: t3
|
|
88
91
|
})
|
|
89
92
|
});
|
|
90
|
-
$[
|
|
91
|
-
$[
|
|
93
|
+
$[14] = t3;
|
|
94
|
+
$[15] = t4;
|
|
92
95
|
} else {
|
|
93
|
-
t4 = $[
|
|
96
|
+
t4 = $[15];
|
|
94
97
|
}
|
|
95
98
|
let t5;
|
|
96
|
-
if ($[
|
|
99
|
+
if ($[16] !== rows) {
|
|
97
100
|
t5 = rows.map(_temp);
|
|
98
|
-
$[
|
|
99
|
-
$[
|
|
101
|
+
$[16] = rows;
|
|
102
|
+
$[17] = t5;
|
|
100
103
|
} else {
|
|
101
|
-
t5 = $[
|
|
104
|
+
t5 = $[17];
|
|
102
105
|
}
|
|
103
106
|
let t6;
|
|
104
|
-
if ($[
|
|
107
|
+
if ($[18] !== t5) {
|
|
105
108
|
t6 = /*#__PURE__*/jsx(TableBody, {
|
|
106
109
|
children: t5
|
|
107
110
|
});
|
|
108
|
-
$[
|
|
109
|
-
$[
|
|
111
|
+
$[18] = t5;
|
|
112
|
+
$[19] = t6;
|
|
110
113
|
} else {
|
|
111
|
-
t6 = $[
|
|
114
|
+
t6 = $[19];
|
|
112
115
|
}
|
|
113
116
|
let t7;
|
|
114
|
-
if ($[
|
|
117
|
+
if ($[20] !== cellPadding || $[21] !== describedby || $[22] !== gridTemplateColumns || $[23] !== labelledby || $[24] !== t4 || $[25] !== t6) {
|
|
115
118
|
t7 = /*#__PURE__*/jsxs(Table, {
|
|
116
119
|
"aria-labelledby": labelledby,
|
|
117
120
|
"aria-describedby": describedby,
|
|
@@ -119,15 +122,15 @@ function DataTable(t0) {
|
|
|
119
122
|
gridTemplateColumns: gridTemplateColumns,
|
|
120
123
|
children: [t4, t6]
|
|
121
124
|
});
|
|
122
|
-
$[
|
|
123
|
-
$[
|
|
124
|
-
$[
|
|
125
|
-
$[
|
|
126
|
-
$[
|
|
127
|
-
$[
|
|
128
|
-
$[
|
|
125
|
+
$[20] = cellPadding;
|
|
126
|
+
$[21] = describedby;
|
|
127
|
+
$[22] = gridTemplateColumns;
|
|
128
|
+
$[23] = labelledby;
|
|
129
|
+
$[24] = t4;
|
|
130
|
+
$[25] = t6;
|
|
131
|
+
$[26] = t7;
|
|
129
132
|
} else {
|
|
130
|
-
t7 = $[
|
|
133
|
+
t7 = $[26];
|
|
131
134
|
}
|
|
132
135
|
return t7;
|
|
133
136
|
}
|
|
@@ -6,6 +6,7 @@ interface TableConfig<Data extends UniqueRow> {
|
|
|
6
6
|
data: Array<Data>;
|
|
7
7
|
initialSortColumn?: string | number;
|
|
8
8
|
initialSortDirection?: Exclude<SortDirection, 'NONE'>;
|
|
9
|
+
externalSorting?: boolean;
|
|
9
10
|
getRowId: (rowData: Data) => string | number;
|
|
10
11
|
}
|
|
11
12
|
interface Table<Data extends UniqueRow> {
|
|
@@ -33,7 +34,7 @@ interface Cell<Data extends UniqueRow> {
|
|
|
33
34
|
getValue: () => Data[keyof Data];
|
|
34
35
|
rowHeader: boolean;
|
|
35
36
|
}
|
|
36
|
-
export declare function useTable<Data extends UniqueRow>({ columns, data, initialSortColumn, initialSortDirection, getRowId, }: TableConfig<Data>): Table<Data>;
|
|
37
|
+
export declare function useTable<Data extends UniqueRow>({ columns, data, initialSortColumn, initialSortDirection, externalSorting, getRowId, }: TableConfig<Data>): Table<Data>;
|
|
37
38
|
export declare function useTableLayout<Data extends UniqueRow>(columns: Array<Column<Data>>): {
|
|
38
39
|
gridTemplateColumns: string;
|
|
39
40
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable.d.ts","sourceRoot":"","sources":["../../src/DataTable/useTable.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA;AACpC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,EAAyB,aAAa,EAAyB,MAAM,WAAW,CAAA;AAGvF,UAAU,WAAW,CAAC,IAAI,SAAS,SAAS;IAC1C,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5B,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACnC,oBAAoB,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;IACrD,QAAQ,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,MAAM,GAAG,MAAM,CAAA;CAC7C;AAED,UAAU,KAAK,CAAC,IAAI,SAAS,SAAS;IACpC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5B,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAA;IACtB,OAAO,EAAE;QACP,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAA;KACvC,CAAA;IACD,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAA;CAChE;AAED,UAAU,MAAM,CAAC,IAAI,SAAS,SAAS;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAA;IACpB,UAAU,EAAE,MAAM,OAAO,CAAA;IACzB,gBAAgB,EAAE,MAAM,aAAa,GAAG,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;CACvE;AAED,UAAU,GAAG,CAAC,IAAI,SAAS,SAAS;IAClC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACjC,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,UAAU,IAAI,CAAC,IAAI,SAAS,SAAS;IACnC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAA;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC,MAAM,IAAI,CAAC,CAAA;IAChC,SAAS,EAAE,OAAO,CAAA;CACnB;AAID,wBAAgB,QAAQ,CAAC,IAAI,SAAS,SAAS,EAAE,EAC/C,OAAO,EACP,IAAI,EACJ,iBAAiB,EACjB,oBAAoB,EACpB,QAAQ,GACT,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"useTable.d.ts","sourceRoot":"","sources":["../../src/DataTable/useTable.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA;AACpC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,EAAyB,aAAa,EAAyB,MAAM,WAAW,CAAA;AAGvF,UAAU,WAAW,CAAC,IAAI,SAAS,SAAS;IAC1C,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5B,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACnC,oBAAoB,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;IACrD,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,MAAM,GAAG,MAAM,CAAA;CAC7C;AAED,UAAU,KAAK,CAAC,IAAI,SAAS,SAAS;IACpC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5B,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAA;IACtB,OAAO,EAAE;QACP,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAA;KACvC,CAAA;IACD,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAA;CAChE;AAED,UAAU,MAAM,CAAC,IAAI,SAAS,SAAS;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAA;IACpB,UAAU,EAAE,MAAM,OAAO,CAAA;IACzB,gBAAgB,EAAE,MAAM,aAAa,GAAG,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;CACvE;AAED,UAAU,GAAG,CAAC,IAAI,SAAS,SAAS;IAClC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACjC,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,UAAU,IAAI,CAAC,IAAI,SAAS,SAAS;IACnC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAA;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC,MAAM,IAAI,CAAC,CAAA;IAChC,SAAS,EAAE,OAAO,CAAA;CACnB;AAID,wBAAgB,QAAQ,CAAC,IAAI,SAAS,SAAS,EAAE,EAC/C,OAAO,EACP,IAAI,EACJ,iBAAiB,EACjB,oBAAoB,EACpB,eAAe,EACf,QAAQ,GACT,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAuKjC;AAyED,wBAAgB,cAAc,CAAC,IAAI,SAAS,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG;IAAC,mBAAmB,EAAE,MAAM,CAAA;CAAC,CAIlH;AAED,wBAAgB,0BAA0B,CAAC,IAAI,SAAS,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,EAAE,CAwCzG"}
|
|
@@ -3,12 +3,13 @@ import { useState } from 'react';
|
|
|
3
3
|
import { strategies, SortDirection, DEFAULT_SORT_DIRECTION, transition } from './sorting.js';
|
|
4
4
|
|
|
5
5
|
function useTable(t0) {
|
|
6
|
-
const $ = c(
|
|
6
|
+
const $ = c(21);
|
|
7
7
|
const {
|
|
8
8
|
columns,
|
|
9
9
|
data,
|
|
10
10
|
initialSortColumn,
|
|
11
11
|
initialSortDirection,
|
|
12
|
+
externalSorting,
|
|
12
13
|
getRowId
|
|
13
14
|
} = t0;
|
|
14
15
|
const [rowOrder, setRowOrder] = useState(data);
|
|
@@ -44,9 +45,9 @@ function useTable(t0) {
|
|
|
44
45
|
let t2;
|
|
45
46
|
let t3;
|
|
46
47
|
let t4;
|
|
47
|
-
if ($[4] !== columns || $[5] !== data || $[6] !==
|
|
48
|
+
if ($[4] !== columns || $[5] !== data || $[6] !== externalSorting || $[7] !== getRowId || $[8] !== prevData || $[9] !== rowOrder || $[10] !== sortByColumn) {
|
|
48
49
|
let t5;
|
|
49
|
-
if ($[
|
|
50
|
+
if ($[14] !== sortByColumn) {
|
|
50
51
|
t5 = column_1 => {
|
|
51
52
|
var _column_1$id;
|
|
52
53
|
const id_0 = (_column_1$id = column_1.id) !== null && _column_1$id !== void 0 ? _column_1$id : column_1.field;
|
|
@@ -68,10 +69,10 @@ function useTable(t0) {
|
|
|
68
69
|
}
|
|
69
70
|
};
|
|
70
71
|
};
|
|
71
|
-
$[
|
|
72
|
-
$[
|
|
72
|
+
$[14] = sortByColumn;
|
|
73
|
+
$[15] = t5;
|
|
73
74
|
} else {
|
|
74
|
-
t5 = $[
|
|
75
|
+
t5 = $[15];
|
|
75
76
|
}
|
|
76
77
|
const headers = columns.map(t5);
|
|
77
78
|
if (data !== prevData) {
|
|
@@ -97,6 +98,9 @@ function useTable(t0) {
|
|
|
97
98
|
if (header_1.column.sortBy === false || header_1.column.sortBy === undefined) {
|
|
98
99
|
throw new Error("The column for this header is not sortable");
|
|
99
100
|
}
|
|
101
|
+
if (externalSorting) {
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
100
104
|
const sortMethod = header_1.column.sortBy === true ? strategies.basic : typeof header_1.column.sortBy === "string" ? strategies[header_1.column.sortBy] : header_1.column.sortBy;
|
|
101
105
|
setRowOrder(rowOrder_0 => rowOrder_0.slice().sort((a, b) => {
|
|
102
106
|
if (header_1.column.field === undefined) {
|
|
@@ -156,33 +160,34 @@ function useTable(t0) {
|
|
|
156
160
|
};
|
|
157
161
|
$[4] = columns;
|
|
158
162
|
$[5] = data;
|
|
159
|
-
$[6] =
|
|
160
|
-
$[7] =
|
|
161
|
-
$[8] =
|
|
162
|
-
$[9] =
|
|
163
|
-
$[10] =
|
|
164
|
-
$[11] =
|
|
165
|
-
$[12] =
|
|
163
|
+
$[6] = externalSorting;
|
|
164
|
+
$[7] = getRowId;
|
|
165
|
+
$[8] = prevData;
|
|
166
|
+
$[9] = rowOrder;
|
|
167
|
+
$[10] = sortByColumn;
|
|
168
|
+
$[11] = t2;
|
|
169
|
+
$[12] = t3;
|
|
170
|
+
$[13] = t4;
|
|
166
171
|
} else {
|
|
167
|
-
t2 = $[
|
|
168
|
-
t3 = $[
|
|
169
|
-
t4 = $[
|
|
172
|
+
t2 = $[11];
|
|
173
|
+
t3 = $[12];
|
|
174
|
+
t4 = $[13];
|
|
170
175
|
}
|
|
171
176
|
let t5;
|
|
172
|
-
if ($[
|
|
177
|
+
if ($[16] !== gridTemplateColumns || $[17] !== t2 || $[18] !== t3 || $[19] !== t4) {
|
|
173
178
|
t5 = {
|
|
174
179
|
headers: t2,
|
|
175
180
|
rows: t3,
|
|
176
181
|
actions: t4,
|
|
177
182
|
gridTemplateColumns
|
|
178
183
|
};
|
|
179
|
-
$[
|
|
180
|
-
$[
|
|
181
|
-
$[
|
|
182
|
-
$[
|
|
183
|
-
$[
|
|
184
|
+
$[16] = gridTemplateColumns;
|
|
185
|
+
$[17] = t2;
|
|
186
|
+
$[18] = t3;
|
|
187
|
+
$[19] = t4;
|
|
188
|
+
$[20] = t5;
|
|
184
189
|
} else {
|
|
185
|
-
t5 = $[
|
|
190
|
+
t5 = $[20];
|
|
186
191
|
}
|
|
187
192
|
return t5;
|
|
188
193
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,kBAQ9B,CAAA"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { FeatureFlagScope } from './FeatureFlagScope.js';
|
|
2
2
|
|
|
3
3
|
const DefaultFeatureFlags = FeatureFlagScope.create({
|
|
4
|
-
primer_react_action_list_item_as_button: false,
|
|
5
4
|
primer_react_breadcrumbs_overflow_menu: false,
|
|
6
5
|
primer_react_css_has_selector_perf: false,
|
|
7
6
|
primer_react_overlay_overflow: false,
|
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
},
|
|
219
219
|
{
|
|
220
220
|
"id": "components-actionlist-features--with-dynamic-content",
|
|
221
|
-
"code": "() => {\n const [isTrue, setIsTrue] = React.useState(false)\n return (\n <
|
|
221
|
+
"code": "() => {\n const [isTrue, setIsTrue] = React.useState(false)\n return (\n <ActionList>\n <ActionList.Item\n onSelect={() => {\n setIsTrue(!isTrue)\n }}\n >\n Activated? {isTrue ? 'Yes' : 'No'}\n </ActionList.Item>\n </ActionList>\n )\n}"
|
|
222
222
|
},
|
|
223
223
|
{
|
|
224
224
|
"id": "components-actionlist-features--disabled-selected-multiselect",
|
|
@@ -290,7 +290,7 @@
|
|
|
290
290
|
},
|
|
291
291
|
{
|
|
292
292
|
"id": "components-actionlist-features--with-trailing-action",
|
|
293
|
-
"code": "() => {\n const [loadingState, setLoadingState] = React.useState(false)\n\n // Auto-toggle every 2.5 seconds to continuously show transitions\n React.useEffect(() => {\n const interval = setInterval(() => {\n setLoadingState((prev) => !prev)\n }, 2500)\n return () => clearInterval(interval)\n }, [])\n return (\n <
|
|
293
|
+
"code": "() => {\n const [loadingState, setLoadingState] = React.useState(false)\n\n // Auto-toggle every 2.5 seconds to continuously show transitions\n React.useEffect(() => {\n const interval = setInterval(() => {\n setLoadingState((prev) => !prev)\n }, 2500)\n return () => clearInterval(interval)\n }, [])\n return (\n <ActionList>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <FileDirectoryIcon />\n </ActionList.LeadingVisual>\n Item 1 (with default TrailingAction)\n <ActionList.TrailingAction\n label=\"Expand sidebar\"\n icon={ArrowLeftIcon}\n />\n </ActionList.Item>\n <ActionList.Item>\n Item 2 (with link TrailingAction)\n <ActionList.TrailingAction\n as=\"a\"\n href=\"#\"\n label=\"Some action 1\"\n icon={ArrowRightIcon}\n />\n </ActionList.Item>\n <ActionList.Item>\n Item 3\n <ActionList.Description>\n This is an inline description.\n </ActionList.Description>\n <ActionList.TrailingAction label=\"Some action 2\" icon={BookIcon} />\n </ActionList.Item>\n <ActionList.Item>\n Item 4\n <ActionList.Description variant=\"block\">\n This is a block description.\n </ActionList.Description>\n <ActionList.TrailingAction label=\"Some action 3\" icon={BookIcon} />\n </ActionList.Item>\n <ActionList.Item>\n Item 5\n <ActionList.Description variant=\"block\">\n This is a block description.\n </ActionList.Description>\n <ActionList.TrailingAction label=\"Some action 4\" />\n </ActionList.Item>\n <ActionList.Item>\n Item 6\n <ActionList.TrailingAction href=\"#\" as=\"a\" label=\"Some action 5\" />\n </ActionList.Item>\n <ActionList.Item>\n Icon button loading state\n <ActionList.Description>\n Shows how IconButton maintains width and centers spinner when loading\n </ActionList.Description>\n <ActionList.TrailingAction\n label=\"Process item\"\n icon={ArrowRightIcon}\n loading\n />\n </ActionList.Item>\n <ActionList.Item>\n Icon button with transitions\n <ActionList.Description>\n Automatically toggles loading state every 2.5 seconds to show\n transitions\n </ActionList.Description>\n <ActionList.TrailingAction\n label=\"Toggle loading\"\n icon={ArrowRightIcon}\n loading={loadingState}\n />\n </ActionList.Item>\n <ActionList.Item>\n Text button loading state\n <ActionList.Description>\n Shows how text button aligns spinner to the right and preserves width\n </ActionList.Description>\n <ActionList.TrailingAction label=\"Save changes\" loading />\n </ActionList.Item>\n <ActionList.Item>\n Text button with transitions\n <ActionList.Description>\n Automatically toggles loading state every 2.5 seconds to show\n transitions\n </ActionList.Description>\n <ActionList.TrailingAction\n label=\"Apply settings\"\n loading={loadingState}\n />\n </ActionList.Item>\n <ActionList.LinkItem href=\"#\">\n LinkItem 1\n <ActionList.Description>\n with TrailingAction this is a long description and should not cause\n horizontal scroll on smaller screen sizes\n </ActionList.Description>\n <ActionList.TrailingAction label=\"Another action\" />\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"#\">\n LinkItem 2\n <ActionList.Description>\n with TrailingVisual this is a long description and should not cause\n horizontal scroll on smaller screen sizes\n </ActionList.Description>\n <ActionList.TrailingVisual>\n <TableIcon />\n </ActionList.TrailingVisual>\n </ActionList.LinkItem>\n <ActionList.Item inactiveText=\"Unavailable due to an outage\">\n Inactive Item\n <ActionList.Description>With TrailingAction</ActionList.Description>\n <ActionList.TrailingAction\n as=\"a\"\n href=\"#\"\n label=\"Some action 8\"\n icon={ArrowRightIcon}\n />\n </ActionList.Item>\n </ActionList>\n )\n}"
|
|
294
294
|
},
|
|
295
295
|
{
|
|
296
296
|
"id": "components-actionlist-features--full-variant",
|
|
@@ -1965,10 +1965,6 @@
|
|
|
1965
1965
|
"id": "components-iconbutton-features--external-tooltip",
|
|
1966
1966
|
"code": "() => (\n <Tooltip\n text=\"this is a supportive description for icon button\"\n direction=\"se\"\n >\n <IconButton icon={HeartIcon} aria-label=\"HeartIcon\" />\n </Tooltip>\n)"
|
|
1967
1967
|
},
|
|
1968
|
-
{
|
|
1969
|
-
"id": "components-iconbutton-features--external-tooltip-version-1",
|
|
1970
|
-
"code": "() => (\n <TooltipV1\n text=\"this is a supportive description for icon button\"\n direction=\"se\"\n >\n <IconButton icon={HeartIcon} aria-label=\"HeartIcon\" />\n </TooltipV1>\n)"
|
|
1971
|
-
},
|
|
1972
1968
|
{
|
|
1973
1969
|
"id": "components-iconbutton-features--as-a-menu-anchor",
|
|
1974
1970
|
"code": "() => (\n <ActionMenu>\n <ActionMenu.Anchor>\n <IconButton icon={ChevronDownIcon} aria-label=\"Something\" />\n </ActionMenu.Anchor>\n\n <ActionMenu.Overlay width=\"medium\">\n <ActionList>\n <ActionList.Item onSelect={() => alert('Copy link clicked')}>\n Copy link\n <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Quote reply clicked')}>\n Quote reply\n <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Edit comment clicked')}>\n Edit comment\n <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Divider />\n <ActionList.Item\n variant=\"danger\"\n onSelect={() => alert('Delete file clicked')}\n >\n Delete file\n <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>\n </ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n)"
|
|
@@ -2594,6 +2590,13 @@
|
|
|
2594
2590
|
"description": "Provide the sort direction that the table should be sorted by on the\ncurrently sorted column",
|
|
2595
2591
|
"defaultValue": ""
|
|
2596
2592
|
},
|
|
2593
|
+
{
|
|
2594
|
+
"name": "externalSorting",
|
|
2595
|
+
"type": "boolean",
|
|
2596
|
+
"required": false,
|
|
2597
|
+
"description": "Indicate whether the sorting of the table is managed externally. When `true`, the table will not sort the data internally when a column header is clicked. The `onToggleSort` callback will still be invoked when a column header is clicked.",
|
|
2598
|
+
"defaultValue": "false"
|
|
2599
|
+
},
|
|
2597
2600
|
{
|
|
2598
2601
|
"name": "onToggleSort",
|
|
2599
2602
|
"type": "(columnId: ObjectPaths<Data> | string | number, direction: 'ASC' | 'DESC') => void",
|
package/package.json
CHANGED