@spark-web/data-table 5.2.0 → 5.2.2

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 (7) hide show
  1. package/CHANGELOG.md +63 -0
  2. package/CLAUDE.md +262 -0
  3. package/dist/declarations/src/data-table.d.ts +6 -2
  4. package/dist/spark-web-data-table.cjs.dev.js +173 -117
  5. package/dist/spark-web-data-table.cjs.prod.js +173 -117
  6. package/dist/spark-web-data-table.esm.js +174 -118
  7. package/package.json +5 -4
package/dist/spark-web-data-table.esm.js CHANGED
@@ -2,8 +2,9 @@ import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
2
2
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
3
3
  import { css } from '@emotion/react';
4
4
  import { Box } from '@spark-web/box';
5
- import { ChevronUpIcon, ChevronDownIcon } from '@spark-web/icon';
5
+ import { SortAscendingIcon, SortDescendingIcon } from '@spark-web/icon';
6
6
  import { Spinner } from '@spark-web/spinner';
7
+ import { Text } from '@spark-web/text';
7
8
  import { useTheme } from '@spark-web/theme';
8
9
  import { buildDataAttributes } from '@spark-web/utils/internal';
9
10
  import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
@@ -12,7 +13,22 @@ import React from 'react';
12
13
  import { InView } from 'react-intersection-observer';
13
14
  import { jsxs, jsx } from '@emotion/react/jsx-runtime';
14
15
 
15
- var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow"];
16
+ var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow", "isLoading", "emptyState"];
17
+ function getAriaSort(column) {
18
+ if (!column.getCanSort()) return undefined;
19
+ if (column.getIsSorted() === 'asc') return 'ascending';
20
+ if (column.getIsSorted() === 'desc') return 'descending';
21
+ return 'none';
22
+ }
23
+
24
+ ////////////////////////////////////////////////////////////////////////////////
25
+
26
+ /**
27
+ * DataTable
28
+ *
29
+ * @see https://spark.brighte.com.au/package/data-table
30
+ */
31
+
16
32
  function DataTable(_ref) {
17
33
  var _tableOptions$enableS, _tableOptions$manualS;
18
34
  var data = _ref.data,
@@ -35,6 +51,8 @@ function DataTable(_ref) {
35
51
  onRowClick = _ref.onRowClick,
36
52
  onRowSelectionChange = _ref.onRowSelectionChange,
37
53
  renderRow = _ref.renderRow,
54
+ isLoading = _ref.isLoading,
55
+ emptyState = _ref.emptyState,
38
56
  tableOptions = _objectWithoutProperties(_ref, _excluded);
39
57
  var theme = useTheme();
40
58
  var enableRowSelection = !!onRowSelectionChange;
@@ -57,130 +75,168 @@ function DataTable(_ref) {
57
75
  var defaultOnRowClick = function defaultOnRowClick(row) {
58
76
  return row.toggleSelected();
59
77
  };
60
- return jsxs(Box, _objectSpread(_objectSpread({
61
- as: "table"
62
- }, data ? buildDataAttributes(data) : undefined), {}, {
63
- css: className,
64
- children: [headerGroups.length > 0 ? jsx(Box, {
65
- as: "thead",
66
- background: "neutral",
67
- css: css({
68
- // we use box shadow instead of bottom border
69
- // to allow the border to stay in the header on scroll
70
- // when the table is sticky
71
- boxShadow: "inset 0 -2px 0 ".concat(theme.border.color.primary)
72
- }, headerClassName),
73
- children: headerGroups.map(function (headerGroup) {
74
- return jsx(Box, {
75
- as: "tr",
76
- children: headerGroup.headers.map(function (header) {
77
- var _asc$desc;
78
- return jsxs(Box, {
79
- as: "th",
80
- color: theme.color.foreground.muted,
81
- padding: "medium",
82
- css: css({
83
- fontFamily: theme.typography.fontFamily.sans.name,
84
- fontWeight: theme.typography.fontWeight.semibold,
85
- textAlign: 'left',
86
- textTransform: 'uppercase',
87
- width: "".concat(header.getSize(), "px"),
88
- svg: {
89
- marginLeft: theme.spacing.xsmall
90
- }
91
- }),
92
- onClick: header.column.getToggleSortingHandler(),
93
- children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), (_asc$desc = {
94
- asc: jsx(ChevronUpIcon, {
95
- size: "xsmall"
96
- }),
97
- desc: jsx(ChevronDownIcon, {
98
- size: "xsmall"
99
- })
100
- }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
101
- }, header.id);
102
- })
103
- }, headerGroup.id);
104
- })
105
- }) : null, jsxs(Box, {
106
- as: "tbody",
107
- children: [!renderRow ? table.getRowModel().rows.map(function (row) {
108
- return jsxs(React.Fragment, {
109
- children: [jsx(Box, {
78
+ return jsxs(Box, _objectSpread(_objectSpread({}, data ? buildDataAttributes(data) : undefined), {}, {
79
+ children: [jsxs(Box, {
80
+ as: "table",
81
+ width: "full",
82
+ css: className,
83
+ children: [headerGroups.length > 0 ? jsx(Box, {
84
+ as: "thead",
85
+ css: css({
86
+ backgroundColor: theme.color.background.surface,
87
+ // we use box shadow instead of bottom border
88
+ // to allow the border to stay in the header on scroll
89
+ // when the table is sticky
90
+ boxShadow: "inset 0 -2px 0 ".concat(theme.border.color.primaryActive)
91
+ }, headerClassName),
92
+ children: headerGroups.map(function (headerGroup) {
93
+ return jsx(Box, {
110
94
  as: "tr",
95
+ children: headerGroup.headers.map(function (header) {
96
+ var _asc$desc;
97
+ return jsxs(Box, {
98
+ as: "th",
99
+ padding: "medium",
100
+ css: css(_objectSpread(_objectSpread({
101
+ color: theme.color.foreground.primaryActive,
102
+ fontFamily: theme.typography.fontFamily.sans.name,
103
+ fontWeight: theme.typography.fontWeight.semibold,
104
+ textAlign: 'left',
105
+ width: "".concat(header.getSize(), "px"),
106
+ cursor: header.column.getCanSort() ? 'pointer' : undefined,
107
+ userSelect: header.column.getCanSort() ? 'none' : undefined
108
+ }, header.column.getCanSort() ? {
109
+ '&:hover': {
110
+ backgroundColor: theme.backgroundInteractions.primaryLowHover
111
+ }
112
+ } : {}), {}, {
113
+ svg: {
114
+ marginLeft: theme.spacing.xsmall
115
+ }
116
+ })),
117
+ onClick: header.column.getToggleSortingHandler(),
118
+ "aria-sort": getAriaSort(header.column),
119
+ children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), (_asc$desc = {
120
+ asc: jsx(SortAscendingIcon, {
121
+ size: "xxsmall",
122
+ tone: "primaryActive"
123
+ }),
124
+ desc: jsx(SortDescendingIcon, {
125
+ size: "xxsmall",
126
+ tone: "primaryActive"
127
+ })
128
+ }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
129
+ }, header.id);
130
+ })
131
+ }, headerGroup.id);
132
+ })
133
+ }) : null, jsxs(Box, {
134
+ as: "tbody",
135
+ children: [!renderRow ? table.getRowModel().rows.map(function (row) {
136
+ return jsxs(React.Fragment, {
137
+ children: [jsx(Box, {
138
+ as: "tr",
139
+ css: css(_objectSpread({
140
+ '&[data-is-selected="true"],&[data-is-expanded="true"]': {
141
+ backgroundColor: theme.color.background.primarySoft
142
+ }
143
+ }, enableClickableRow ? {
144
+ ':hover:not(:has(button:hover))': {
145
+ backgroundColor: theme.color.background.inputPressed,
146
+ cursor: 'pointer'
147
+ }
148
+ } : {}), rowClassName ? rowClassName(row, row.index) : undefined),
149
+ onClick: function onClick() {
150
+ return enableClickableRow && (onRowClick ? onRowClick(row) : defaultOnRowClick(row));
151
+ },
152
+ "data-is-selected": row.getIsSelected(),
153
+ "data-is-expanded": row.getIsExpanded(),
154
+ children: row.getVisibleCells().map(function (cell) {
155
+ return jsx(Box, {
156
+ as: "td",
157
+ padding: "large",
158
+ css: css({
159
+ borderBottomWidth: theme.border.width.standard,
160
+ borderBottomStyle: 'solid',
161
+ borderColor: theme.border.color.standard,
162
+ verticalAlign: 'middle',
163
+ textAlign: 'left',
164
+ // row-as-link: the anchor supplies its own padding
165
+ '&:has(> a)': {
166
+ padding: 0
167
+ }
168
+ }),
169
+ children: flexRender(cell.column.columnDef.cell, cell.getContext())
170
+ }, cell.id);
171
+ })
172
+ }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
173
+ }, row.id);
174
+ }) : renderRow(table), showSpinner && jsx(InView, {
175
+ as: "tr"
176
+ // @ts-ignore
177
+ ,
178
+ css: css({
179
+ columnSpan: 'all'
180
+ }),
181
+ onChange: onBottomSpinnerShown,
182
+ children: jsx(Box, {
183
+ as: "td",
184
+ padding: "large",
185
+ colSpan: headerGroups.map(function (hg) {
186
+ return hg.headers.length;
187
+ }).reduce(function (sum, len) {
188
+ return len + 1;
189
+ }, 0),
111
190
  css: css({
112
- '&[data-is-selected="true"],&[data-is-expanded="true"]': {
113
- background: theme.color.background.primaryMuted
191
+ textAlign: 'center',
192
+ verticalAlign: 'middle'
193
+ }),
194
+ children: jsx(Spinner, {
195
+ data: {
196
+ testId: 'data-table-spinner'
114
197
  },
115
- ':hover': {
116
- background: theme.backgroundInteractions.neutralHover,
117
- cursor: enableClickableRow ? 'pointer' : undefined
118
- }
119
- }, rowClassName ? rowClassName(row, row.index) : undefined),
120
- onClick: function onClick() {
121
- return enableClickableRow && (onRowClick ? onRowClick(row) : defaultOnRowClick(row));
122
- },
123
- "data-is-selected": row.getIsSelected(),
124
- "data-is-expanded": row.getIsExpanded(),
125
- children: row.getVisibleCells().map(function (cell) {
198
+ size: "xsmall"
199
+ })
200
+ })
201
+ })]
202
+ }), footerGroups.length > 0 ? jsx(Box, {
203
+ as: "tfoot",
204
+ css: css(footerClassName),
205
+ children: footerGroups.map(function (footerGroup) {
206
+ return jsx(Box, {
207
+ as: "tr",
208
+ children: footerGroup.headers.map(function (footer) {
126
209
  return jsx(Box, {
127
210
  as: "td",
128
- padding: "large",
129
- css: css({
130
- borderBottom: '1px',
131
- borderBottomStyle: 'solid',
132
- borderColor: theme.border.color.standard,
133
- verticalAlign: 'middle',
134
- textAlign: 'left'
135
- }),
136
- children: flexRender(cell.column.columnDef.cell, cell.getContext())
137
- }, cell.id);
211
+ children: flexRender(footer.column.columnDef.footer, footer.getContext())
212
+ }, footer.id);
138
213
  })
139
- }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
140
- }, row.id);
141
- }) : renderRow(table), showSpinner && jsx(InView, {
142
- as: "tr"
143
- // @ts-ignore
144
- ,
145
- css: css({
146
- columnSpan: 'all'
147
- }),
148
- onChange: onBottomSpinnerShown,
149
- children: jsx(Box, {
150
- as: "td",
151
- padding: "large",
152
- colSpan: headerGroups.map(function (hg) {
153
- return hg.headers.length;
154
- }).reduce(function (sum, len) {
155
- return len + 1;
156
- }, 0),
157
- css: css({
158
- textAlign: 'center',
159
- verticalAlign: 'middle'
160
- }),
161
- children: jsx(Spinner, {
162
- data: {
163
- testId: 'data-table-spinner'
164
- },
165
- size: "xsmall"
166
- })
214
+ }, footerGroup.id);
167
215
  })
216
+ }) : null]
217
+ }), isLoading && jsxs(Box, {
218
+ display: "flex",
219
+ alignItems: "center",
220
+ justifyContent: "center",
221
+ padding: "xlarge",
222
+ gap: "small",
223
+ width: "full",
224
+ children: [jsx(Text, {
225
+ tone: "muted",
226
+ children: "Loading"
227
+ }), jsx(Spinner, {
228
+ data: {
229
+ testId: 'data-table-loading-spinner'
230
+ },
231
+ tone: "primary"
168
232
  })]
169
- }), footerGroups.length > 0 ? jsx(Box, {
170
- as: "tfoot",
171
- css: css(footerClassName),
172
- children: footerGroups.map(function (footerGroup) {
173
- return jsx(Box, {
174
- as: "tr",
175
- children: footerGroup.headers.map(function (footer) {
176
- return jsx(Box, {
177
- as: "td",
178
- children: flexRender(footer.column.columnDef.footer, footer.getContext())
179
- }, footer.id);
180
- })
181
- }, footerGroup.id);
182
- })
183
- }) : null]
233
+ }), !isLoading && items.length === 0 && emptyState != null && jsx(Box, {
234
+ display: "flex",
235
+ justifyContent: "center",
236
+ padding: "xlarge",
237
+ width: "full",
238
+ children: emptyState
239
+ })]
184
240
  }));
185
241
  }
186
242
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/data-table",
3
- "version": "5.2.0",
3
+ "version": "5.2.2",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -12,6 +12,7 @@
12
12
  "module": "dist/spark-web-data-table.esm.js",
13
13
  "files": [
14
14
  "CHANGELOG.md",
15
+ "CLAUDE.md",
15
16
  "dist",
16
17
  "README.md"
17
18
  ],
@@ -19,11 +20,11 @@
19
20
  "@babel/runtime": "^7.25.0",
20
21
  "@emotion/react": "^11.14.0",
21
22
  "@spark-web/a11y": "^5.3.0",
22
- "@spark-web/box": "^6.0.0",
23
+ "@spark-web/box": "^6.0.1",
23
24
  "@spark-web/checkbox": "^5.1.0",
24
25
  "@spark-web/icon": "^5.1.0",
25
- "@spark-web/spinner": "^5.1.0",
26
- "@spark-web/text": "^5.3.0",
26
+ "@spark-web/spinner": "^5.1.1",
27
+ "@spark-web/text": "^5.3.1",
27
28
  "@spark-web/theme": "^5.13.0",
28
29
  "@spark-web/utils": "^5.1.0",
29
30
  "@tanstack/react-table": "^8.14.0",