@spark-web/data-table 1.0.0-rc.1 → 1.0.0-rc.11

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 (6) hide show
  1. package/CHANGELOG.md +170 -0
  2. package/dist/declarations/src/data-table.d.ts +4 -4
  3. package/dist/spark-web-data-table.cjs.dev.js +51 -62
  4. package/dist/spark-web-data-table.cjs.prod.js +51 -62
  5. package/dist/spark-web-data-table.esm.js +52 -63
  6. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,175 @@
1
1
  # @spark-web/data-table
2
2
 
3
+ ## 1.0.0-rc.11
4
+
5
+ ### Major Changes
6
+
7
+ - test
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies []:
12
+ - @spark-web/checkbox@2.0.0-rc.11
13
+ - @spark-web/spinner@2.0.0-rc.11
14
+ - @spark-web/theme@4.0.0-rc.11
15
+ - @spark-web/utils@2.0.0-rc.11
16
+ - @spark-web/a11y@2.0.0-rc.11
17
+ - @spark-web/text@2.0.0-rc.11
18
+ - @spark-web/box@2.0.0-rc.11
19
+
20
+ ## 1.0.0-rc.10
21
+
22
+ ### Major Changes
23
+
24
+ - test
25
+
26
+ ### Patch Changes
27
+
28
+ - Updated dependencies []:
29
+ - @spark-web/checkbox@2.0.0-rc.10
30
+ - @spark-web/spinner@2.0.0-rc.10
31
+ - @spark-web/theme@4.0.0-rc.10
32
+ - @spark-web/utils@2.0.0-rc.10
33
+ - @spark-web/a11y@2.0.0-rc.10
34
+ - @spark-web/text@2.0.0-rc.10
35
+ - @spark-web/box@2.0.0-rc.10
36
+
37
+ ## 1.0.0-rc.9
38
+
39
+ ### Major Changes
40
+
41
+ - test
42
+
43
+ ### Patch Changes
44
+
45
+ - Updated dependencies []:
46
+ - @spark-web/checkbox@2.0.0-rc.9
47
+ - @spark-web/spinner@2.0.0-rc.9
48
+ - @spark-web/theme@4.0.0-rc.9
49
+ - @spark-web/utils@2.0.0-rc.9
50
+ - @spark-web/a11y@2.0.0-rc.9
51
+ - @spark-web/text@2.0.0-rc.9
52
+ - @spark-web/box@2.0.0-rc.9
53
+
54
+ ## 1.0.0-rc.8
55
+
56
+ ### Major Changes
57
+
58
+ - test
59
+
60
+ ### Patch Changes
61
+
62
+ - Updated dependencies []:
63
+ - @spark-web/checkbox@2.0.0-rc.8
64
+ - @spark-web/spinner@2.0.0-rc.8
65
+ - @spark-web/theme@4.0.0-rc.8
66
+ - @spark-web/utils@2.0.0-rc.8
67
+ - @spark-web/a11y@2.0.0-rc.8
68
+ - @spark-web/text@2.0.0-rc.8
69
+ - @spark-web/box@2.0.0-rc.8
70
+
71
+ ## 1.0.0-rc.7
72
+
73
+ ### Major Changes
74
+
75
+ - test
76
+
77
+ ### Patch Changes
78
+
79
+ - Updated dependencies []:
80
+ - @spark-web/checkbox@2.0.0-rc.7
81
+ - @spark-web/spinner@2.0.0-rc.7
82
+ - @spark-web/theme@4.0.0-rc.7
83
+ - @spark-web/utils@2.0.0-rc.7
84
+ - @spark-web/a11y@2.0.0-rc.7
85
+ - @spark-web/text@2.0.0-rc.7
86
+ - @spark-web/box@2.0.0-rc.7
87
+
88
+ ## 1.0.0-rc.6
89
+
90
+ ### Major Changes
91
+
92
+ - test
93
+
94
+ ### Patch Changes
95
+
96
+ - Updated dependencies []:
97
+ - @spark-web/checkbox@2.0.0-rc.6
98
+ - @spark-web/spinner@2.0.0-rc.6
99
+ - @spark-web/theme@4.0.0-rc.6
100
+ - @spark-web/utils@2.0.0-rc.6
101
+ - @spark-web/a11y@2.0.0-rc.6
102
+ - @spark-web/text@2.0.0-rc.6
103
+ - @spark-web/box@2.0.0-rc.6
104
+
105
+ ## 1.0.0-rc.5
106
+
107
+ ### Major Changes
108
+
109
+ - test
110
+
111
+ ### Patch Changes
112
+
113
+ - Updated dependencies []:
114
+ - @spark-web/checkbox@2.0.0-rc.5
115
+ - @spark-web/spinner@2.0.0-rc.5
116
+ - @spark-web/theme@4.0.0-rc.5
117
+ - @spark-web/utils@2.0.0-rc.5
118
+ - @spark-web/a11y@2.0.0-rc.5
119
+ - @spark-web/text@2.0.0-rc.5
120
+ - @spark-web/box@2.0.0-rc.5
121
+
122
+ ## 1.0.0-rc.4
123
+
124
+ ### Major Changes
125
+
126
+ - bug
127
+
128
+ ### Patch Changes
129
+
130
+ - Updated dependencies []:
131
+ - @spark-web/checkbox@2.0.0-rc.4
132
+ - @spark-web/spinner@2.0.0-rc.4
133
+ - @spark-web/theme@4.0.0-rc.4
134
+ - @spark-web/utils@2.0.0-rc.4
135
+ - @spark-web/a11y@2.0.0-rc.4
136
+ - @spark-web/text@2.0.0-rc.4
137
+ - @spark-web/box@2.0.0-rc.4
138
+
139
+ ## 1.0.0-rc.3
140
+
141
+ ### Major Changes
142
+
143
+ - upgrade package
144
+
145
+ ### Patch Changes
146
+
147
+ - Updated dependencies []:
148
+ - @spark-web/checkbox@2.0.0-rc.3
149
+ - @spark-web/spinner@2.0.0-rc.3
150
+ - @spark-web/theme@4.0.0-rc.3
151
+ - @spark-web/utils@2.0.0-rc.3
152
+ - @spark-web/a11y@2.0.0-rc.3
153
+ - @spark-web/text@2.0.0-rc.3
154
+ - @spark-web/box@2.0.0-rc.3
155
+
156
+ ## 1.0.0-rc.2
157
+
158
+ ### Major Changes
159
+
160
+ - add parser
161
+
162
+ ### Patch Changes
163
+
164
+ - Updated dependencies []:
165
+ - @spark-web/checkbox@2.0.0-rc.2
166
+ - @spark-web/spinner@2.0.0-rc.2
167
+ - @spark-web/theme@4.0.0-rc.2
168
+ - @spark-web/utils@2.0.0-rc.2
169
+ - @spark-web/a11y@2.0.0-rc.2
170
+ - @spark-web/text@2.0.0-rc.2
171
+ - @spark-web/box@2.0.0-rc.2
172
+
3
173
  ## 1.0.0-rc.1
4
174
 
5
175
  ### Major Changes
package/dist/declarations/src/data-table.d.ts CHANGED
@@ -2,18 +2,18 @@ import type { SerializedStyles } from '@emotion/react';
2
2
  import { type DataAttributeMap } from '@spark-web/utils/internal';
3
3
  import type { ColumnDef, ColumnHelper, ExpandedState, OnChangeFn, Row, Table, TableOptions } from '@tanstack/react-table';
4
4
  import { createColumnHelper, flexRender } from '@tanstack/react-table';
5
- import type { HTMLAttributes, ReactElement } from 'react';
5
+ import type { ReactElement } from 'react';
6
6
  /**
7
7
  * DataTable
8
8
  *
9
9
  * @see https://spark.brighte.com.au/package/data-table
10
10
  */
11
11
  declare function DataTable<T>({ data, items, className, columns, enableExpanding, enableHiding, enableMultiRowSelection, enableClickableRow, headerClassName, footerClassName, showBottomSpinner: showSpinner, rowClassName, expandedRowComponent, onBottomSpinnerShown, onRowClick, onRowSelectionChange, renderRow, ...tableOptions }: DataTableProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
12
- declare type TableSubsetAttributes = Pick<HTMLAttributes<HTMLTableElement>, 'className'>;
13
12
  declare type TableSubsetOptions<T> = Pick<TableOptions<T>, 'columns' | 'enableExpanding' | 'enableHiding' | 'enableMultiRowSelection' | 'state' | 'onStateChange' | 'onExpandedChange' | 'onRowSelectionChange' | 'getRowId'>;
14
- declare type DataTableProps<T> = TableSubsetAttributes & TableSubsetOptions<T> & {
13
+ declare type DataTableProps<T> = TableSubsetOptions<T> & {
14
+ className?: SerializedStyles;
15
15
  headerClassName?: SerializedStyles;
16
- footerClassName?: string;
16
+ footerClassName?: SerializedStyles;
17
17
  rowClassName?: (row: Row<T>, index: number) => SerializedStyles;
18
18
  /** Map of data attributes. */
19
19
  data?: DataAttributeMap;
package/dist/spark-web-data-table.cjs.dev.js CHANGED
@@ -12,7 +12,7 @@ var internal = require('@spark-web/utils/internal');
12
12
  var reactTable = require('@tanstack/react-table');
13
13
  var React = require('react');
14
14
  var reactIntersectionObserver = require('react-intersection-observer');
15
- var jsxRuntime = require('react/jsx-runtime');
15
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
16
16
 
17
17
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
18
18
 
@@ -60,49 +60,43 @@ function DataTable(_ref) {
60
60
  var defaultOnRowClick = function defaultOnRowClick(row) {
61
61
  return row.toggleSelected();
62
62
  };
63
- return /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
63
+ return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
64
64
  as: "table"
65
65
  }, data ? internal.buildDataAttributes(data) : undefined), {}, {
66
- className: className,
67
- children: [headerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(react.ClassNames, {
68
- children: function children(_ref2) {
69
- var css = _ref2.css,
70
- cx = _ref2.cx;
71
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
72
- as: "thead",
73
- background: "neutral",
74
- className: cx(css({
75
- // we use box shadow instead of bottom border
76
- // to allow the border to stay in the header on scroll
77
- // when the table is sticky
78
- boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
79
- }, headerClassName)),
80
- children: headerGroups.map(function (headerGroup) {
81
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
82
- as: "tr",
83
- children: headerGroup.headers.map(function (header) {
84
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
85
- as: "th",
86
- color: theme$1.color.foreground.muted,
87
- padding: "medium",
88
- css: css({
89
- fontFamily: theme$1.typography.fontFamily.sans.name,
90
- fontWeight: theme$1.typography.fontWeight.semibold,
91
- textAlign: 'left',
92
- textTransform: 'uppercase'
93
- }),
94
- children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
95
- }, header.id);
96
- })
97
- }, headerGroup.id);
66
+ css: className,
67
+ children: [headerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
68
+ as: "thead",
69
+ background: "neutral",
70
+ css: react.css({
71
+ // we use box shadow instead of bottom border
72
+ // to allow the border to stay in the header on scroll
73
+ // when the table is sticky
74
+ boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
75
+ }, headerClassName),
76
+ children: headerGroups.map(function (headerGroup) {
77
+ return jsxRuntime.jsx(box.Box, {
78
+ as: "tr",
79
+ children: headerGroup.headers.map(function (header) {
80
+ return jsxRuntime.jsx(box.Box, {
81
+ as: "th",
82
+ color: theme$1.color.foreground.muted,
83
+ padding: "medium",
84
+ css: react.css({
85
+ fontFamily: theme$1.typography.fontFamily.sans.name,
86
+ fontWeight: theme$1.typography.fontWeight.semibold,
87
+ textAlign: 'left',
88
+ textTransform: 'uppercase'
89
+ }),
90
+ children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
91
+ }, header.id);
98
92
  })
99
- });
100
- }
101
- }) : null, /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
93
+ }, headerGroup.id);
94
+ })
95
+ }) : null, jsxRuntime.jsxs(box.Box, {
102
96
  as: "tbody",
103
97
  children: [!renderRow ? table.getRowModel().rows.map(function (row) {
104
- return /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
105
- children: [/*#__PURE__*/jsxRuntime.jsx(box.Box, {
98
+ return jsxRuntime.jsxs(React__default["default"].Fragment, {
99
+ children: [jsxRuntime.jsx(box.Box, {
106
100
  as: "tr",
107
101
  css: react.css({
108
102
  '&[data-is-selected="true"],&[data-is-expanded="true"]': {
@@ -119,7 +113,7 @@ function DataTable(_ref) {
119
113
  "data-is-selected": row.getIsSelected(),
120
114
  "data-is-expanded": row.getIsExpanded(),
121
115
  children: row.getVisibleCells().map(function (cell) {
122
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
116
+ return jsxRuntime.jsx(box.Box, {
123
117
  as: "td",
124
118
  padding: "large",
125
119
  css: react.css({
@@ -134,15 +128,15 @@ function DataTable(_ref) {
134
128
  })
135
129
  }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
136
130
  }, row.id);
137
- }) : renderRow(table), showSpinner && /*#__PURE__*/jsxRuntime.jsx(reactIntersectionObserver.InView, {
131
+ }) : renderRow(table), showSpinner && jsxRuntime.jsx(reactIntersectionObserver.InView, {
138
132
  as: "tr"
139
133
  // @ts-ignore
140
134
  ,
141
- className: react.css({
135
+ css: react.css({
142
136
  columnSpan: 'all'
143
137
  }),
144
138
  onChange: onBottomSpinnerShown,
145
- children: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
139
+ children: jsxRuntime.jsx(box.Box, {
146
140
  as: "td",
147
141
  padding: "large",
148
142
  colSpan: headerGroups.map(function (hg) {
@@ -154,7 +148,7 @@ function DataTable(_ref) {
154
148
  textAlign: 'center',
155
149
  verticalAlign: 'middle'
156
150
  }),
157
- children: /*#__PURE__*/jsxRuntime.jsx(spinner.Spinner, {
151
+ children: jsxRuntime.jsx(spinner.Spinner, {
158
152
  data: {
159
153
  testId: 'data-table-spinner'
160
154
  },
@@ -162,25 +156,20 @@ function DataTable(_ref) {
162
156
  })
163
157
  })
164
158
  })]
165
- }), footerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(react.ClassNames, {
166
- children: function children(_ref3) {
167
- var cx = _ref3.cx;
168
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
169
- as: "tfoot",
170
- className: cx(footerClassName),
171
- children: footerGroups.map(function (footerGroup) {
172
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
173
- as: "tr",
174
- children: footerGroup.headers.map(function (footer) {
175
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
176
- as: "td",
177
- children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
178
- }, footer.id);
179
- })
180
- }, footerGroup.id);
159
+ }), footerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
160
+ as: "tfoot",
161
+ css: react.css(footerClassName),
162
+ children: footerGroups.map(function (footerGroup) {
163
+ return jsxRuntime.jsx(box.Box, {
164
+ as: "tr",
165
+ children: footerGroup.headers.map(function (footer) {
166
+ return jsxRuntime.jsx(box.Box, {
167
+ as: "td",
168
+ children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
169
+ }, footer.id);
181
170
  })
182
- });
183
- }
171
+ }, footerGroup.id);
172
+ })
184
173
  }) : null]
185
174
  }));
186
175
  }
package/dist/spark-web-data-table.cjs.prod.js CHANGED
@@ -12,7 +12,7 @@ var internal = require('@spark-web/utils/internal');
12
12
  var reactTable = require('@tanstack/react-table');
13
13
  var React = require('react');
14
14
  var reactIntersectionObserver = require('react-intersection-observer');
15
- var jsxRuntime = require('react/jsx-runtime');
15
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
16
16
 
17
17
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
18
18
 
@@ -60,49 +60,43 @@ function DataTable(_ref) {
60
60
  var defaultOnRowClick = function defaultOnRowClick(row) {
61
61
  return row.toggleSelected();
62
62
  };
63
- return /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
63
+ return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
64
64
  as: "table"
65
65
  }, data ? internal.buildDataAttributes(data) : undefined), {}, {
66
- className: className,
67
- children: [headerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(react.ClassNames, {
68
- children: function children(_ref2) {
69
- var css = _ref2.css,
70
- cx = _ref2.cx;
71
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
72
- as: "thead",
73
- background: "neutral",
74
- className: cx(css({
75
- // we use box shadow instead of bottom border
76
- // to allow the border to stay in the header on scroll
77
- // when the table is sticky
78
- boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
79
- }, headerClassName)),
80
- children: headerGroups.map(function (headerGroup) {
81
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
82
- as: "tr",
83
- children: headerGroup.headers.map(function (header) {
84
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
85
- as: "th",
86
- color: theme$1.color.foreground.muted,
87
- padding: "medium",
88
- css: css({
89
- fontFamily: theme$1.typography.fontFamily.sans.name,
90
- fontWeight: theme$1.typography.fontWeight.semibold,
91
- textAlign: 'left',
92
- textTransform: 'uppercase'
93
- }),
94
- children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
95
- }, header.id);
96
- })
97
- }, headerGroup.id);
66
+ css: className,
67
+ children: [headerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
68
+ as: "thead",
69
+ background: "neutral",
70
+ css: react.css({
71
+ // we use box shadow instead of bottom border
72
+ // to allow the border to stay in the header on scroll
73
+ // when the table is sticky
74
+ boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
75
+ }, headerClassName),
76
+ children: headerGroups.map(function (headerGroup) {
77
+ return jsxRuntime.jsx(box.Box, {
78
+ as: "tr",
79
+ children: headerGroup.headers.map(function (header) {
80
+ return jsxRuntime.jsx(box.Box, {
81
+ as: "th",
82
+ color: theme$1.color.foreground.muted,
83
+ padding: "medium",
84
+ css: react.css({
85
+ fontFamily: theme$1.typography.fontFamily.sans.name,
86
+ fontWeight: theme$1.typography.fontWeight.semibold,
87
+ textAlign: 'left',
88
+ textTransform: 'uppercase'
89
+ }),
90
+ children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
91
+ }, header.id);
98
92
  })
99
- });
100
- }
101
- }) : null, /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
93
+ }, headerGroup.id);
94
+ })
95
+ }) : null, jsxRuntime.jsxs(box.Box, {
102
96
  as: "tbody",
103
97
  children: [!renderRow ? table.getRowModel().rows.map(function (row) {
104
- return /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
105
- children: [/*#__PURE__*/jsxRuntime.jsx(box.Box, {
98
+ return jsxRuntime.jsxs(React__default["default"].Fragment, {
99
+ children: [jsxRuntime.jsx(box.Box, {
106
100
  as: "tr",
107
101
  css: react.css({
108
102
  '&[data-is-selected="true"],&[data-is-expanded="true"]': {
@@ -119,7 +113,7 @@ function DataTable(_ref) {
119
113
  "data-is-selected": row.getIsSelected(),
120
114
  "data-is-expanded": row.getIsExpanded(),
121
115
  children: row.getVisibleCells().map(function (cell) {
122
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
116
+ return jsxRuntime.jsx(box.Box, {
123
117
  as: "td",
124
118
  padding: "large",
125
119
  css: react.css({
@@ -134,15 +128,15 @@ function DataTable(_ref) {
134
128
  })
135
129
  }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
136
130
  }, row.id);
137
- }) : renderRow(table), showSpinner && /*#__PURE__*/jsxRuntime.jsx(reactIntersectionObserver.InView, {
131
+ }) : renderRow(table), showSpinner && jsxRuntime.jsx(reactIntersectionObserver.InView, {
138
132
  as: "tr"
139
133
  // @ts-ignore
140
134
  ,
141
- className: react.css({
135
+ css: react.css({
142
136
  columnSpan: 'all'
143
137
  }),
144
138
  onChange: onBottomSpinnerShown,
145
- children: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
139
+ children: jsxRuntime.jsx(box.Box, {
146
140
  as: "td",
147
141
  padding: "large",
148
142
  colSpan: headerGroups.map(function (hg) {
@@ -154,7 +148,7 @@ function DataTable(_ref) {
154
148
  textAlign: 'center',
155
149
  verticalAlign: 'middle'
156
150
  }),
157
- children: /*#__PURE__*/jsxRuntime.jsx(spinner.Spinner, {
151
+ children: jsxRuntime.jsx(spinner.Spinner, {
158
152
  data: {
159
153
  testId: 'data-table-spinner'
160
154
  },
@@ -162,25 +156,20 @@ function DataTable(_ref) {
162
156
  })
163
157
  })
164
158
  })]
165
- }), footerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(react.ClassNames, {
166
- children: function children(_ref3) {
167
- var cx = _ref3.cx;
168
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
169
- as: "tfoot",
170
- className: cx(footerClassName),
171
- children: footerGroups.map(function (footerGroup) {
172
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
173
- as: "tr",
174
- children: footerGroup.headers.map(function (footer) {
175
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
176
- as: "td",
177
- children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
178
- }, footer.id);
179
- })
180
- }, footerGroup.id);
159
+ }), footerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
160
+ as: "tfoot",
161
+ css: react.css(footerClassName),
162
+ children: footerGroups.map(function (footerGroup) {
163
+ return jsxRuntime.jsx(box.Box, {
164
+ as: "tr",
165
+ children: footerGroup.headers.map(function (footer) {
166
+ return jsxRuntime.jsx(box.Box, {
167
+ as: "td",
168
+ children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
169
+ }, footer.id);
181
170
  })
182
- });
183
- }
171
+ }, footerGroup.id);
172
+ })
184
173
  }) : null]
185
174
  }));
186
175
  }
package/dist/spark-web-data-table.esm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
2
2
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
3
- import { ClassNames, css } from '@emotion/react';
3
+ import { css } from '@emotion/react';
4
4
  import { Box } from '@spark-web/box';
5
5
  import { Spinner } from '@spark-web/spinner';
6
6
  import { useTheme } from '@spark-web/theme';
@@ -9,7 +9,7 @@ import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-tabl
9
9
  export { createColumnHelper, flexRender } from '@tanstack/react-table';
10
10
  import React from 'react';
11
11
  import { InView } from 'react-intersection-observer';
12
- import { jsxs, jsx } from 'react/jsx-runtime';
12
+ import { jsxs, jsx } from '@emotion/react/jsx-runtime';
13
13
 
14
14
  var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow"];
15
15
  function DataTable(_ref) {
@@ -53,49 +53,43 @@ function DataTable(_ref) {
53
53
  var defaultOnRowClick = function defaultOnRowClick(row) {
54
54
  return row.toggleSelected();
55
55
  };
56
- return /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread({
56
+ return jsxs(Box, _objectSpread(_objectSpread({
57
57
  as: "table"
58
58
  }, data ? buildDataAttributes(data) : undefined), {}, {
59
- className: className,
60
- children: [headerGroups.length > 0 ? /*#__PURE__*/jsx(ClassNames, {
61
- children: function children(_ref2) {
62
- var css = _ref2.css,
63
- cx = _ref2.cx;
64
- return /*#__PURE__*/jsx(Box, {
65
- as: "thead",
66
- background: "neutral",
67
- className: cx(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 /*#__PURE__*/jsx(Box, {
75
- as: "tr",
76
- children: headerGroup.headers.map(function (header) {
77
- return /*#__PURE__*/jsx(Box, {
78
- as: "th",
79
- color: theme.color.foreground.muted,
80
- padding: "medium",
81
- css: css({
82
- fontFamily: theme.typography.fontFamily.sans.name,
83
- fontWeight: theme.typography.fontWeight.semibold,
84
- textAlign: 'left',
85
- textTransform: 'uppercase'
86
- }),
87
- children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
88
- }, header.id);
89
- })
90
- }, headerGroup.id);
59
+ css: className,
60
+ children: [headerGroups.length > 0 ? jsx(Box, {
61
+ as: "thead",
62
+ background: "neutral",
63
+ css: css({
64
+ // we use box shadow instead of bottom border
65
+ // to allow the border to stay in the header on scroll
66
+ // when the table is sticky
67
+ boxShadow: "inset 0 -2px 0 ".concat(theme.border.color.primary)
68
+ }, headerClassName),
69
+ children: headerGroups.map(function (headerGroup) {
70
+ return jsx(Box, {
71
+ as: "tr",
72
+ children: headerGroup.headers.map(function (header) {
73
+ return jsx(Box, {
74
+ as: "th",
75
+ color: theme.color.foreground.muted,
76
+ padding: "medium",
77
+ css: css({
78
+ fontFamily: theme.typography.fontFamily.sans.name,
79
+ fontWeight: theme.typography.fontWeight.semibold,
80
+ textAlign: 'left',
81
+ textTransform: 'uppercase'
82
+ }),
83
+ children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
84
+ }, header.id);
91
85
  })
92
- });
93
- }
94
- }) : null, /*#__PURE__*/jsxs(Box, {
86
+ }, headerGroup.id);
87
+ })
88
+ }) : null, jsxs(Box, {
95
89
  as: "tbody",
96
90
  children: [!renderRow ? table.getRowModel().rows.map(function (row) {
97
- return /*#__PURE__*/jsxs(React.Fragment, {
98
- children: [/*#__PURE__*/jsx(Box, {
91
+ return jsxs(React.Fragment, {
92
+ children: [jsx(Box, {
99
93
  as: "tr",
100
94
  css: css({
101
95
  '&[data-is-selected="true"],&[data-is-expanded="true"]': {
@@ -112,7 +106,7 @@ function DataTable(_ref) {
112
106
  "data-is-selected": row.getIsSelected(),
113
107
  "data-is-expanded": row.getIsExpanded(),
114
108
  children: row.getVisibleCells().map(function (cell) {
115
- return /*#__PURE__*/jsx(Box, {
109
+ return jsx(Box, {
116
110
  as: "td",
117
111
  padding: "large",
118
112
  css: css({
@@ -127,15 +121,15 @@ function DataTable(_ref) {
127
121
  })
128
122
  }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
129
123
  }, row.id);
130
- }) : renderRow(table), showSpinner && /*#__PURE__*/jsx(InView, {
124
+ }) : renderRow(table), showSpinner && jsx(InView, {
131
125
  as: "tr"
132
126
  // @ts-ignore
133
127
  ,
134
- className: css({
128
+ css: css({
135
129
  columnSpan: 'all'
136
130
  }),
137
131
  onChange: onBottomSpinnerShown,
138
- children: /*#__PURE__*/jsx(Box, {
132
+ children: jsx(Box, {
139
133
  as: "td",
140
134
  padding: "large",
141
135
  colSpan: headerGroups.map(function (hg) {
@@ -147,7 +141,7 @@ function DataTable(_ref) {
147
141
  textAlign: 'center',
148
142
  verticalAlign: 'middle'
149
143
  }),
150
- children: /*#__PURE__*/jsx(Spinner, {
144
+ children: jsx(Spinner, {
151
145
  data: {
152
146
  testId: 'data-table-spinner'
153
147
  },
@@ -155,25 +149,20 @@ function DataTable(_ref) {
155
149
  })
156
150
  })
157
151
  })]
158
- }), footerGroups.length > 0 ? /*#__PURE__*/jsx(ClassNames, {
159
- children: function children(_ref3) {
160
- var cx = _ref3.cx;
161
- return /*#__PURE__*/jsx(Box, {
162
- as: "tfoot",
163
- className: cx(footerClassName),
164
- children: footerGroups.map(function (footerGroup) {
165
- return /*#__PURE__*/jsx(Box, {
166
- as: "tr",
167
- children: footerGroup.headers.map(function (footer) {
168
- return /*#__PURE__*/jsx(Box, {
169
- as: "td",
170
- children: flexRender(footer.column.columnDef.footer, footer.getContext())
171
- }, footer.id);
172
- })
173
- }, footerGroup.id);
152
+ }), footerGroups.length > 0 ? jsx(Box, {
153
+ as: "tfoot",
154
+ css: css(footerClassName),
155
+ children: footerGroups.map(function (footerGroup) {
156
+ return jsx(Box, {
157
+ as: "tr",
158
+ children: footerGroup.headers.map(function (footer) {
159
+ return jsx(Box, {
160
+ as: "td",
161
+ children: flexRender(footer.column.columnDef.footer, footer.getContext())
162
+ }, footer.id);
174
163
  })
175
- });
176
- }
164
+ }, footerGroup.id);
165
+ })
177
166
  }) : null]
178
167
  }));
179
168
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/data-table",
3
- "version": "1.0.0-rc.1",
3
+ "version": "1.0.0-rc.11",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -17,14 +17,14 @@
17
17
  ],
18
18
  "dependencies": {
19
19
  "@babel/runtime": "^7.25.0",
20
- "@emotion/react": "^11.13.5",
21
- "@spark-web/a11y": "^2.0.0-rc.1",
22
- "@spark-web/box": "^2.0.0-rc.1",
23
- "@spark-web/checkbox": "^2.0.0-rc.1",
24
- "@spark-web/spinner": "^2.0.0-rc.1",
25
- "@spark-web/text": "^2.0.0-rc.1",
26
- "@spark-web/theme": "^4.0.0-rc.1",
27
- "@spark-web/utils": "^2.0.0-rc.1",
20
+ "@emotion/react": "^11.14.0",
21
+ "@spark-web/a11y": "^2.0.0-rc.11",
22
+ "@spark-web/box": "^2.0.0-rc.11",
23
+ "@spark-web/checkbox": "^2.0.0-rc.11",
24
+ "@spark-web/spinner": "^2.0.0-rc.11",
25
+ "@spark-web/text": "^2.0.0-rc.11",
26
+ "@spark-web/theme": "^4.0.0-rc.11",
27
+ "@spark-web/utils": "^2.0.0-rc.11",
28
28
  "@tanstack/react-table": "^8.14.0",
29
29
  "react-intersection-observer": "^9.8.2"
30
30
  },