@spark-web/data-table 1.0.0-rc.7 → 1.0.0-rc.9

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 +34 -0
  2. package/dist/declarations/src/data-table.d.ts +4 -4
  3. package/dist/spark-web-data-table.cjs.dev.js +38 -49
  4. package/dist/spark-web-data-table.cjs.prod.js +38 -49
  5. package/dist/spark-web-data-table.esm.js +39 -50
  6. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,39 @@
1
1
  # @spark-web/data-table
2
2
 
3
+ ## 1.0.0-rc.9
4
+
5
+ ### Major Changes
6
+
7
+ - test
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies []:
12
+ - @spark-web/checkbox@2.0.0-rc.9
13
+ - @spark-web/spinner@2.0.0-rc.9
14
+ - @spark-web/theme@4.0.0-rc.9
15
+ - @spark-web/utils@2.0.0-rc.9
16
+ - @spark-web/a11y@2.0.0-rc.9
17
+ - @spark-web/text@2.0.0-rc.9
18
+ - @spark-web/box@2.0.0-rc.9
19
+
20
+ ## 1.0.0-rc.8
21
+
22
+ ### Major Changes
23
+
24
+ - test
25
+
26
+ ### Patch Changes
27
+
28
+ - Updated dependencies []:
29
+ - @spark-web/checkbox@2.0.0-rc.8
30
+ - @spark-web/spinner@2.0.0-rc.8
31
+ - @spark-web/theme@4.0.0-rc.8
32
+ - @spark-web/utils@2.0.0-rc.8
33
+ - @spark-web/a11y@2.0.0-rc.8
34
+ - @spark-web/text@2.0.0-rc.8
35
+ - @spark-web/box@2.0.0-rc.8
36
+
3
37
  ## 1.0.0-rc.7
4
38
 
5
39
  ### 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
@@ -64,47 +64,41 @@ function DataTable(_ref) {
64
64
  as: "table"
65
65
  }, data ? internal.buildDataAttributes(data) : undefined), {}, {
66
66
  css: className,
67
- children: [headerGroups.length > 0 ? jsxRuntime.jsx(react.ClassNames, {
68
- children: function children(_ref2) {
69
- var css = _ref2.css,
70
- cx = _ref2.cx;
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) {
71
77
  return jsxRuntime.jsx(box.Box, {
72
- as: "thead",
73
- background: "neutral",
74
- css: 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) {
78
+ as: "tr",
79
+ children: headerGroup.headers.map(function (header) {
81
80
  return jsxRuntime.jsx(box.Box, {
82
- as: "tr",
83
- children: headerGroup.headers.map(function (header) {
84
- return 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);
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
- }
93
+ }, headerGroup.id);
94
+ })
101
95
  }) : null, jsxRuntime.jsxs(box.Box, {
102
96
  as: "tbody",
103
97
  children: [!renderRow ? table.getRowModel().rows.map(function (row) {
104
98
  return jsxRuntime.jsxs(React__default["default"].Fragment, {
105
99
  children: [jsxRuntime.jsx(box.Box, {
106
100
  as: "tr",
107
- className: react.css({
101
+ css: react.css({
108
102
  '&[data-is-selected="true"],&[data-is-expanded="true"]': {
109
103
  background: theme$1.color.background.primaryMuted
110
104
  },
@@ -138,7 +132,7 @@ function DataTable(_ref) {
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,
@@ -162,25 +156,20 @@ function DataTable(_ref) {
162
156
  })
163
157
  })
164
158
  })]
165
- }), footerGroups.length > 0 ? jsxRuntime.jsx(react.ClassNames, {
166
- children: function children(_ref3) {
167
- var cx = _ref3.cx;
159
+ }), footerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
160
+ as: "tfoot",
161
+ css: react.css(footerClassName),
162
+ children: footerGroups.map(function (footerGroup) {
168
163
  return jsxRuntime.jsx(box.Box, {
169
- as: "tfoot",
170
- className: cx(footerClassName),
171
- children: footerGroups.map(function (footerGroup) {
164
+ as: "tr",
165
+ children: footerGroup.headers.map(function (footer) {
172
166
  return jsxRuntime.jsx(box.Box, {
173
- as: "tr",
174
- children: footerGroup.headers.map(function (footer) {
175
- return jsxRuntime.jsx(box.Box, {
176
- as: "td",
177
- children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
178
- }, footer.id);
179
- })
180
- }, footerGroup.id);
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
@@ -64,47 +64,41 @@ function DataTable(_ref) {
64
64
  as: "table"
65
65
  }, data ? internal.buildDataAttributes(data) : undefined), {}, {
66
66
  css: className,
67
- children: [headerGroups.length > 0 ? jsxRuntime.jsx(react.ClassNames, {
68
- children: function children(_ref2) {
69
- var css = _ref2.css,
70
- cx = _ref2.cx;
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) {
71
77
  return jsxRuntime.jsx(box.Box, {
72
- as: "thead",
73
- background: "neutral",
74
- css: 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) {
78
+ as: "tr",
79
+ children: headerGroup.headers.map(function (header) {
81
80
  return jsxRuntime.jsx(box.Box, {
82
- as: "tr",
83
- children: headerGroup.headers.map(function (header) {
84
- return 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);
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
- }
93
+ }, headerGroup.id);
94
+ })
101
95
  }) : null, jsxRuntime.jsxs(box.Box, {
102
96
  as: "tbody",
103
97
  children: [!renderRow ? table.getRowModel().rows.map(function (row) {
104
98
  return jsxRuntime.jsxs(React__default["default"].Fragment, {
105
99
  children: [jsxRuntime.jsx(box.Box, {
106
100
  as: "tr",
107
- className: react.css({
101
+ css: react.css({
108
102
  '&[data-is-selected="true"],&[data-is-expanded="true"]': {
109
103
  background: theme$1.color.background.primaryMuted
110
104
  },
@@ -138,7 +132,7 @@ function DataTable(_ref) {
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,
@@ -162,25 +156,20 @@ function DataTable(_ref) {
162
156
  })
163
157
  })
164
158
  })]
165
- }), footerGroups.length > 0 ? jsxRuntime.jsx(react.ClassNames, {
166
- children: function children(_ref3) {
167
- var cx = _ref3.cx;
159
+ }), footerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
160
+ as: "tfoot",
161
+ css: react.css(footerClassName),
162
+ children: footerGroups.map(function (footerGroup) {
168
163
  return jsxRuntime.jsx(box.Box, {
169
- as: "tfoot",
170
- className: cx(footerClassName),
171
- children: footerGroups.map(function (footerGroup) {
164
+ as: "tr",
165
+ children: footerGroup.headers.map(function (footer) {
172
166
  return jsxRuntime.jsx(box.Box, {
173
- as: "tr",
174
- children: footerGroup.headers.map(function (footer) {
175
- return jsxRuntime.jsx(box.Box, {
176
- as: "td",
177
- children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
178
- }, footer.id);
179
- })
180
- }, footerGroup.id);
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';
@@ -57,47 +57,41 @@ function DataTable(_ref) {
57
57
  as: "table"
58
58
  }, data ? buildDataAttributes(data) : undefined), {}, {
59
59
  css: className,
60
- children: [headerGroups.length > 0 ? jsx(ClassNames, {
61
- children: function children(_ref2) {
62
- var css = _ref2.css,
63
- cx = _ref2.cx;
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) {
64
70
  return jsx(Box, {
65
- as: "thead",
66
- background: "neutral",
67
- css: 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) {
71
+ as: "tr",
72
+ children: headerGroup.headers.map(function (header) {
74
73
  return jsx(Box, {
75
- as: "tr",
76
- children: headerGroup.headers.map(function (header) {
77
- return 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);
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
- }
86
+ }, headerGroup.id);
87
+ })
94
88
  }) : null, jsxs(Box, {
95
89
  as: "tbody",
96
90
  children: [!renderRow ? table.getRowModel().rows.map(function (row) {
97
91
  return jsxs(React.Fragment, {
98
92
  children: [jsx(Box, {
99
93
  as: "tr",
100
- className: css({
94
+ css: css({
101
95
  '&[data-is-selected="true"],&[data-is-expanded="true"]': {
102
96
  background: theme.color.background.primaryMuted
103
97
  },
@@ -131,7 +125,7 @@ function DataTable(_ref) {
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,
@@ -155,25 +149,20 @@ function DataTable(_ref) {
155
149
  })
156
150
  })
157
151
  })]
158
- }), footerGroups.length > 0 ? jsx(ClassNames, {
159
- children: function children(_ref3) {
160
- var cx = _ref3.cx;
152
+ }), footerGroups.length > 0 ? jsx(Box, {
153
+ as: "tfoot",
154
+ css: css(footerClassName),
155
+ children: footerGroups.map(function (footerGroup) {
161
156
  return jsx(Box, {
162
- as: "tfoot",
163
- className: cx(footerClassName),
164
- children: footerGroups.map(function (footerGroup) {
157
+ as: "tr",
158
+ children: footerGroup.headers.map(function (footer) {
165
159
  return jsx(Box, {
166
- as: "tr",
167
- children: footerGroup.headers.map(function (footer) {
168
- return jsx(Box, {
169
- as: "td",
170
- children: flexRender(footer.column.columnDef.footer, footer.getContext())
171
- }, footer.id);
172
- })
173
- }, footerGroup.id);
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.7",
3
+ "version": "1.0.0-rc.9",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -18,13 +18,13 @@
18
18
  "dependencies": {
19
19
  "@babel/runtime": "^7.25.0",
20
20
  "@emotion/react": "^11.14.0",
21
- "@spark-web/a11y": "^2.0.0-rc.7",
22
- "@spark-web/box": "^2.0.0-rc.7",
23
- "@spark-web/checkbox": "^2.0.0-rc.7",
24
- "@spark-web/spinner": "^2.0.0-rc.7",
25
- "@spark-web/text": "^2.0.0-rc.7",
26
- "@spark-web/theme": "^4.0.0-rc.7",
27
- "@spark-web/utils": "^2.0.0-rc.7",
21
+ "@spark-web/a11y": "^2.0.0-rc.9",
22
+ "@spark-web/box": "^2.0.0-rc.9",
23
+ "@spark-web/checkbox": "^2.0.0-rc.9",
24
+ "@spark-web/spinner": "^2.0.0-rc.9",
25
+ "@spark-web/text": "^2.0.0-rc.9",
26
+ "@spark-web/theme": "^4.0.0-rc.9",
27
+ "@spark-web/utils": "^2.0.0-rc.9",
28
28
  "@tanstack/react-table": "^8.14.0",
29
29
  "react-intersection-observer": "^9.8.2"
30
30
  },