@instructure/ui-table 10.16.1-snapshot-0 → 10.16.1

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 (45) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/Table/Body/index.js +23 -21
  3. package/es/Table/Cell/index.js +7 -5
  4. package/es/Table/ColHeader/index.js +18 -14
  5. package/es/Table/Head/index.js +35 -29
  6. package/es/Table/Row/index.js +19 -17
  7. package/es/Table/RowHeader/index.js +7 -5
  8. package/es/Table/__new-tests__/Table.test.js +170 -53
  9. package/es/Table/index.js +26 -19
  10. package/lib/Table/Body/index.js +22 -20
  11. package/lib/Table/Cell/index.js +6 -4
  12. package/lib/Table/ColHeader/index.js +17 -14
  13. package/lib/Table/Head/index.js +34 -28
  14. package/lib/Table/Row/index.js +18 -16
  15. package/lib/Table/RowHeader/index.js +6 -4
  16. package/lib/Table/__new-tests__/Table.test.js +170 -54
  17. package/lib/Table/index.js +25 -18
  18. package/package.json +17 -17
  19. package/src/Table/Body/index.tsx +1 -2
  20. package/src/Table/Cell/index.tsx +1 -2
  21. package/src/Table/ColHeader/index.tsx +2 -3
  22. package/src/Table/ColHeader/props.ts +1 -1
  23. package/src/Table/Head/index.tsx +1 -2
  24. package/src/Table/README.md +2 -2
  25. package/src/Table/Row/index.tsx +1 -2
  26. package/src/Table/RowHeader/index.tsx +1 -2
  27. package/src/Table/__new-tests__/Table.test.tsx +5 -5
  28. package/src/Table/index.tsx +1 -2
  29. package/tsconfig.build.tsbuildinfo +1 -1
  30. package/types/Table/Body/index.d.ts +1 -3
  31. package/types/Table/Body/index.d.ts.map +1 -1
  32. package/types/Table/Cell/index.d.ts +1 -3
  33. package/types/Table/Cell/index.d.ts.map +1 -1
  34. package/types/Table/ColHeader/index.d.ts +3 -5
  35. package/types/Table/ColHeader/index.d.ts.map +1 -1
  36. package/types/Table/ColHeader/props.d.ts +1 -1
  37. package/types/Table/ColHeader/props.d.ts.map +1 -1
  38. package/types/Table/Head/index.d.ts +2 -4
  39. package/types/Table/Head/index.d.ts.map +1 -1
  40. package/types/Table/Row/index.d.ts +1 -3
  41. package/types/Table/Row/index.d.ts.map +1 -1
  42. package/types/Table/RowHeader/index.d.ts +1 -3
  43. package/types/Table/RowHeader/index.d.ts.map +1 -1
  44. package/types/Table/index.d.ts +1 -3
  45. package/types/Table/index.d.ts.map +1 -1
package/lib/Table/Row/index.js CHANGED
@@ -14,6 +14,7 @@ var _styles = _interopRequireDefault(require("./styles"));
14
14
  var _theme = _interopRequireDefault(require("./theme"));
15
15
  var _props = require("./props");
16
16
  var _TableContext = _interopRequireDefault(require("../TableContext"));
17
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
17
18
  var _dec, _class, _Row;
18
19
  /*
19
20
  * The MIT License (MIT)
@@ -38,7 +39,6 @@ var _dec, _class, _Row;
38
39
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
39
40
  * SOFTWARE.
40
41
  */
41
- /** @jsx jsx */
42
42
  /**
43
43
  ---
44
44
  parent: Table
@@ -66,23 +66,25 @@ let Row = exports.Row = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
66
66
  styles = _this$props3.styles;
67
67
  const isStacked = this.context.isStacked;
68
68
  const headers = this.context.headers;
69
- return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Row.allowedProps), Row), {
69
+ return (0, _jsxRuntime.jsx)(_View.View, {
70
+ ..._View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Row.allowedProps), Row),
70
71
  as: isStacked ? 'div' : 'tr',
71
72
  css: styles === null || styles === void 0 ? void 0 : styles.row,
72
- role: isStacked ? 'row' : void 0
73
- }), _react.Children.toArray(children).filter(Boolean).map((child, index) => {
74
- if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
75
- return (0, _safeCloneElement.safeCloneElement)(child, {
76
- key: child.props.name,
77
- // Sent down for compatibility with custom components
78
- // TODO DEPRECATED, remove in v11
79
- isStacked,
80
- // used by `Cell` to render its column title in `stacked` layout
81
- header: headers && headers[index]
82
- });
83
- }
84
- return child;
85
- }));
73
+ role: isStacked ? 'row' : void 0,
74
+ children: _react.Children.toArray(children).filter(Boolean).map((child, index) => {
75
+ if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
76
+ return (0, _safeCloneElement.safeCloneElement)(child, {
77
+ key: child.props.name,
78
+ // Sent down for compatibility with custom components
79
+ // TODO DEPRECATED, remove in v11
80
+ isStacked,
81
+ // used by `Cell` to render its column title in `stacked` layout
82
+ header: headers && headers[index]
83
+ });
84
+ }
85
+ return child;
86
+ })
87
+ });
86
88
  }
87
89
  }, _Row.displayName = "Row", _Row.componentId = 'Table.Row', _Row.contextType = _TableContext.default, _Row.allowedProps = _props.allowedProps, _Row.propTypes = _props.propTypes, _Row.defaultProps = {
88
90
  children: null
package/lib/Table/RowHeader/index.js CHANGED
@@ -14,6 +14,7 @@ var _styles = _interopRequireDefault(require("./styles"));
14
14
  var _theme = _interopRequireDefault(require("./theme"));
15
15
  var _props = require("./props");
16
16
  var _TableContext = _interopRequireDefault(require("../TableContext"));
17
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
17
18
  var _dec, _class, _RowHeader;
18
19
  /*
19
20
  * The MIT License (MIT)
@@ -38,7 +39,6 @@ var _dec, _class, _RowHeader;
38
39
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
39
40
  * SOFTWARE.
40
41
  */
41
- /** @jsx jsx */
42
42
  /**
43
43
  ---
44
44
  parent: Table
@@ -59,12 +59,14 @@ let RowHeader = exports.RowHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
59
59
  children = _this$props3.children,
60
60
  styles = _this$props3.styles;
61
61
  const isStacked = this.context.isStacked;
62
- return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, RowHeader.allowedProps), RowHeader), {
62
+ return (0, _jsxRuntime.jsx)(_View.View, {
63
+ ..._View.View.omitViewProps((0, _omitProps.omitProps)(this.props, RowHeader.allowedProps), RowHeader),
63
64
  as: isStacked ? 'div' : 'th',
64
65
  css: styles === null || styles === void 0 ? void 0 : styles.rowHeader,
65
66
  scope: "row",
66
- role: isStacked ? 'rowheader' : void 0
67
- }), (0, _callRenderProp.callRenderProp)(children));
67
+ role: isStacked ? 'rowheader' : void 0,
68
+ children: (0, _callRenderProp.callRenderProp)(children)
69
+ });
68
70
  }
69
71
  }, _RowHeader.displayName = "RowHeader", _RowHeader.componentId = 'Table.RowHeader', _RowHeader.contextType = _TableContext.default, _RowHeader.allowedProps = _props.allowedProps, _RowHeader.propTypes = _props.propTypes, _RowHeader.defaultProps = {
70
72
  textAlign: 'start',
package/lib/Table/__new-tests__/Table.test.js CHANGED
@@ -1,13 +1,13 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _react = _interopRequireDefault(require("react"));
3
+ var _react = require("react");
5
4
  var _react2 = require("@testing-library/react");
6
5
  var _vitest = require("vitest");
7
6
  var _userEvent = require("@testing-library/user-event");
8
7
  require("@testing-library/jest-dom");
9
8
  var _index = require("../index");
10
9
  var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
10
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
11
11
  var _Table$Head, _Table$Body, _Table, _Table2, _Table3, _span, _span2, _Table$Row, _span3, _span4, _Table$Row2, _Table$Body2, _Table$RowHeader, _Table$Cell, _Table$Head2, _Table$Row3, _Table$ColHeader, _Table$RowHeader2, _Table$Cell2;
12
12
  /*
13
13
  * The MIT License (MIT)
@@ -41,13 +41,29 @@ describe('<Table />', async () => {
41
41
  afterEach(() => {
42
42
  consoleErrorMock.mockRestore();
43
43
  });
44
- const renderTable = props => (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Table, Object.assign({
45
- caption: "Test table"
46
- }, props), _Table$Head || (_Table$Head = /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, {
47
- id: "foo"
48
- }, "ColHeader"), /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, {
49
- id: "bar"
50
- }, "Bar-header")))), _Table$Body || (_Table$Body = /*#__PURE__*/_react.default.createElement(_index.Table.Body, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.RowHeader, null, "RowHeader"), /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Cell"))))));
44
+ const renderTable = props => (0, _react2.render)((0, _jsxRuntime.jsxs)(_index.Table, {
45
+ caption: "Test table",
46
+ ...props,
47
+ children: [_Table$Head || (_Table$Head = (0, _jsxRuntime.jsx)(_index.Table.Head, {
48
+ children: (0, _jsxRuntime.jsxs)(_index.Table.Row, {
49
+ children: [(0, _jsxRuntime.jsx)(_index.Table.ColHeader, {
50
+ id: "foo",
51
+ children: "ColHeader"
52
+ }), (0, _jsxRuntime.jsx)(_index.Table.ColHeader, {
53
+ id: "bar",
54
+ children: "Bar-header"
55
+ })]
56
+ })
57
+ })), _Table$Body || (_Table$Body = (0, _jsxRuntime.jsx)(_index.Table.Body, {
58
+ children: (0, _jsxRuntime.jsxs)(_index.Table.Row, {
59
+ children: [(0, _jsxRuntime.jsx)(_index.Table.RowHeader, {
60
+ children: "RowHeader"
61
+ }), (0, _jsxRuntime.jsx)(_index.Table.Cell, {
62
+ children: "Cell"
63
+ })]
64
+ })
65
+ }))]
66
+ }));
51
67
  it('should render a caption', async () => {
52
68
  const _renderTable = renderTable(),
53
69
  container = _renderTable.container;
@@ -105,48 +121,96 @@ describe('<Table />', async () => {
105
121
  expect(stackedTable).not.toHaveTextContent('ColHeader');
106
122
  });
107
123
  it('can handle non-existent head in stacked layout', async () => {
108
- (0, _react2.render)(_Table || (_Table = /*#__PURE__*/_react.default.createElement(_index.Table, {
124
+ (0, _react2.render)(_Table || (_Table = (0, _jsxRuntime.jsx)(_index.Table, {
109
125
  caption: "Test table",
110
- layout: "stacked"
111
- }, /*#__PURE__*/_react.default.createElement(_index.Table.Body, null))));
126
+ layout: "stacked",
127
+ children: (0, _jsxRuntime.jsx)(_index.Table.Body, {})
128
+ })));
112
129
  const stackedTable = _react2.screen.getByRole('table');
113
130
  expect(stackedTable).toBeInTheDocument();
114
131
  });
115
132
  it('can handle empty head in stacked layout', async () => {
116
- (0, _react2.render)(_Table2 || (_Table2 = /*#__PURE__*/_react.default.createElement(_index.Table, {
133
+ (0, _react2.render)(_Table2 || (_Table2 = (0, _jsxRuntime.jsx)(_index.Table, {
117
134
  caption: "Test table",
118
- layout: "stacked"
119
- }, /*#__PURE__*/_react.default.createElement(_index.Table.Head, null))));
135
+ layout: "stacked",
136
+ children: (0, _jsxRuntime.jsx)(_index.Table.Head, {})
137
+ })));
120
138
  const stackedTable = _react2.screen.getByRole('table');
121
139
  expect(stackedTable).toBeInTheDocument();
122
140
  });
123
141
  it('can handle invalid header in stacked layout', async () => {
124
- (0, _react2.render)(_Table3 || (_Table3 = /*#__PURE__*/_react.default.createElement(_index.Table, {
142
+ (0, _react2.render)(_Table3 || (_Table3 = (0, _jsxRuntime.jsx)(_index.Table, {
125
143
  caption: "Test table",
126
- layout: "stacked"
127
- }, /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Foo"))))));
144
+ layout: "stacked",
145
+ children: (0, _jsxRuntime.jsx)(_index.Table.Head, {
146
+ children: (0, _jsxRuntime.jsx)(_index.Table.Row, {
147
+ children: (0, _jsxRuntime.jsx)(_index.Table.Cell, {
148
+ children: "Foo"
149
+ })
150
+ })
151
+ })
152
+ })));
128
153
  const stackedTable = _react2.screen.getByRole('table');
129
154
  expect(stackedTable).toBeInTheDocument();
130
155
  expect(stackedTable).not.toHaveTextContent('Foo');
131
156
  });
132
157
  it('does not crash for invalid children', async () => {
133
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Table, {
158
+ (0, _react2.render)((0, _jsxRuntime.jsxs)(_index.Table, {
134
159
  caption: "Test table",
135
- layout: "stacked"
136
- }, "test1", _span || (_span = /*#__PURE__*/_react.default.createElement("span", null, "test")), /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, _span2 || (_span2 = /*#__PURE__*/_react.default.createElement("span", null, "test")), "test2", _Table$Row || (_Table$Row = /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, "test3", /*#__PURE__*/_react.default.createElement("span", null, "test"), /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Foo"))), "test4", _span3 || (_span3 = /*#__PURE__*/_react.default.createElement("span", null, "test"))), "test5", /*#__PURE__*/_react.default.createElement(_index.Table.Body, null, "test", _span4 || (_span4 = /*#__PURE__*/_react.default.createElement("span", null, "test")), _Table$Row2 || (_Table$Row2 = /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, "test", /*#__PURE__*/_react.default.createElement("span", null, "test"), /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Foo"), "test", /*#__PURE__*/_react.default.createElement("span", null, "test"))))));
160
+ layout: "stacked",
161
+ children: ["test1", _span || (_span = (0, _jsxRuntime.jsx)("span", {
162
+ children: "test"
163
+ })), (0, _jsxRuntime.jsxs)(_index.Table.Head, {
164
+ children: [_span2 || (_span2 = (0, _jsxRuntime.jsx)("span", {
165
+ children: "test"
166
+ })), "test2", _Table$Row || (_Table$Row = (0, _jsxRuntime.jsxs)(_index.Table.Row, {
167
+ children: ["test3", (0, _jsxRuntime.jsx)("span", {
168
+ children: "test"
169
+ }), (0, _jsxRuntime.jsx)(_index.Table.Cell, {
170
+ children: "Foo"
171
+ })]
172
+ })), "test4", _span3 || (_span3 = (0, _jsxRuntime.jsx)("span", {
173
+ children: "test"
174
+ }))]
175
+ }), "test5", (0, _jsxRuntime.jsxs)(_index.Table.Body, {
176
+ children: ["test", _span4 || (_span4 = (0, _jsxRuntime.jsx)("span", {
177
+ children: "test"
178
+ })), _Table$Row2 || (_Table$Row2 = (0, _jsxRuntime.jsxs)(_index.Table.Row, {
179
+ children: ["test", (0, _jsxRuntime.jsx)("span", {
180
+ children: "test"
181
+ }), (0, _jsxRuntime.jsx)(_index.Table.Cell, {
182
+ children: "Foo"
183
+ }), "test", (0, _jsxRuntime.jsx)("span", {
184
+ children: "test"
185
+ })]
186
+ }))]
187
+ })]
188
+ }));
137
189
  const table = _react2.screen.getByRole('table');
138
190
  expect(table).toBeInTheDocument();
139
191
  expect(table).toHaveTextContent('Foo');
140
192
  });
141
193
  describe('when table is sortable', async () => {
142
- const renderSortableTable = (props, handlers = {}, layout = 'auto') => (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Table, {
194
+ const renderSortableTable = (props, handlers = {}, layout = 'auto') => (0, _react2.render)((0, _jsxRuntime.jsxs)(_index.Table, {
143
195
  caption: "Sortable table",
144
- layout: layout
145
- }, /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, Object.assign({
146
- id: "foo"
147
- }, props, handlers), "Foo"), /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, Object.assign({
148
- id: "bar"
149
- }, handlers), "Bar"))), _Table$Body2 || (_Table$Body2 = /*#__PURE__*/_react.default.createElement(_index.Table.Body, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null), /*#__PURE__*/_react.default.createElement(_index.Table.Row, null)))));
196
+ layout: layout,
197
+ children: [(0, _jsxRuntime.jsx)(_index.Table.Head, {
198
+ children: (0, _jsxRuntime.jsxs)(_index.Table.Row, {
199
+ children: [(0, _jsxRuntime.jsx)(_index.Table.ColHeader, {
200
+ id: "foo",
201
+ ...props,
202
+ ...handlers,
203
+ children: "Foo"
204
+ }), (0, _jsxRuntime.jsx)(_index.Table.ColHeader, {
205
+ id: "bar",
206
+ ...handlers,
207
+ children: "Bar"
208
+ })]
209
+ })
210
+ }), _Table$Body2 || (_Table$Body2 = (0, _jsxRuntime.jsxs)(_index.Table.Body, {
211
+ children: [(0, _jsxRuntime.jsx)(_index.Table.Row, {}), (0, _jsxRuntime.jsx)(_index.Table.Row, {})]
212
+ }))]
213
+ }));
150
214
  it('can render up arrow for ascending order', async () => {
151
215
  const _renderSortableTable = renderSortableTable({
152
216
  id: 'id',
@@ -230,27 +294,57 @@ describe('<Table />', async () => {
230
294
  describe('when using custom components', () => {
231
295
  it('should render wrapper HOCs', () => {
232
296
  var _CustomTableCell2;
233
- class CustomTableCell extends _react.default.Component {
297
+ class CustomTableCell extends _react.Component {
234
298
  render() {
235
- return /*#__PURE__*/_react.default.createElement(_index.Table.Cell, this.props, this.props.children);
299
+ return (0, _jsxRuntime.jsx)(_index.Table.Cell, {
300
+ ...this.props,
301
+ children: this.props.children
302
+ });
236
303
  }
237
304
  }
238
305
  CustomTableCell.displayName = "CustomTableCell";
239
- class CustomTableRow extends _react.default.Component {
306
+ class CustomTableRow extends _react.Component {
240
307
  render() {
241
- return /*#__PURE__*/_react.default.createElement(_index.Table.Row, this.props, _Table$RowHeader || (_Table$RowHeader = /*#__PURE__*/_react.default.createElement(_index.Table.RowHeader, null, "1")), _Table$Cell || (_Table$Cell = /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "The Shawshank Redemption")), _CustomTableCell2 || (_CustomTableCell2 = /*#__PURE__*/_react.default.createElement(CustomTableCell, null, "9.3")));
308
+ return (0, _jsxRuntime.jsxs)(_index.Table.Row, {
309
+ ...this.props,
310
+ children: [_Table$RowHeader || (_Table$RowHeader = (0, _jsxRuntime.jsx)(_index.Table.RowHeader, {
311
+ children: "1"
312
+ })), _Table$Cell || (_Table$Cell = (0, _jsxRuntime.jsx)(_index.Table.Cell, {
313
+ children: "The Shawshank Redemption"
314
+ })), _CustomTableCell2 || (_CustomTableCell2 = (0, _jsxRuntime.jsx)(CustomTableCell, {
315
+ children: "9.3"
316
+ }))]
317
+ });
242
318
  }
243
319
  }
244
320
  CustomTableRow.displayName = "CustomTableRow";
245
- const table = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Table, {
246
- caption: "Test custom table"
247
- }, _Table$Head2 || (_Table$Head2 = /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, {
248
- id: "foo"
249
- }, "ColHeader"), /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, {
250
- id: "bar"
251
- }, "Bar-header"), /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, {
252
- id: "baz"
253
- }, "Bar-header")))), /*#__PURE__*/_react.default.createElement(_index.Table.Body, null, /*#__PURE__*/_react.default.createElement(CustomTableRow, null), _Table$Row3 || (_Table$Row3 = /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.RowHeader, null, "RowHeader"), /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Cell"), /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Cell2"))))));
321
+ const table = (0, _react2.render)((0, _jsxRuntime.jsxs)(_index.Table, {
322
+ caption: "Test custom table",
323
+ children: [_Table$Head2 || (_Table$Head2 = (0, _jsxRuntime.jsx)(_index.Table.Head, {
324
+ children: (0, _jsxRuntime.jsxs)(_index.Table.Row, {
325
+ children: [(0, _jsxRuntime.jsx)(_index.Table.ColHeader, {
326
+ id: "foo",
327
+ children: "ColHeader"
328
+ }), (0, _jsxRuntime.jsx)(_index.Table.ColHeader, {
329
+ id: "bar",
330
+ children: "Bar-header"
331
+ }), (0, _jsxRuntime.jsx)(_index.Table.ColHeader, {
332
+ id: "baz",
333
+ children: "Bar-header"
334
+ })]
335
+ })
336
+ })), (0, _jsxRuntime.jsxs)(_index.Table.Body, {
337
+ children: [(0, _jsxRuntime.jsx)(CustomTableRow, {}), _Table$Row3 || (_Table$Row3 = (0, _jsxRuntime.jsxs)(_index.Table.Row, {
338
+ children: [(0, _jsxRuntime.jsx)(_index.Table.RowHeader, {
339
+ children: "RowHeader"
340
+ }), (0, _jsxRuntime.jsx)(_index.Table.Cell, {
341
+ children: "Cell"
342
+ }), (0, _jsxRuntime.jsx)(_index.Table.Cell, {
343
+ children: "Cell2"
344
+ })]
345
+ }))]
346
+ })]
347
+ }));
254
348
  const stackedTable = _react2.screen.getByRole('table');
255
349
  expect(stackedTable).toBeInTheDocument();
256
350
  const container = table.container;
@@ -259,27 +353,49 @@ describe('<Table />', async () => {
259
353
  expect(container).toHaveTextContent('9.3');
260
354
  });
261
355
  it('should render fully custom components', () => {
262
- class CustomTableCell extends _react.default.Component {
356
+ class CustomTableCell extends _react.Component {
263
357
  render() {
264
- return /*#__PURE__*/_react.default.createElement("td", null, this.props.children);
358
+ return (0, _jsxRuntime.jsx)("td", {
359
+ children: this.props.children
360
+ });
265
361
  }
266
362
  }
267
363
  CustomTableCell.displayName = "CustomTableCell";
268
- class CustomTableRow extends _react.default.Component {
364
+ class CustomTableRow extends _react.Component {
269
365
  render() {
270
- return /*#__PURE__*/_react.default.createElement("tr", null, this.props.children);
366
+ return (0, _jsxRuntime.jsx)("tr", {
367
+ children: this.props.children
368
+ });
271
369
  }
272
370
  }
273
371
  CustomTableRow.displayName = "CustomTableRow";
274
- const table = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Table, {
275
- caption: "Test custom table"
276
- }, /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, /*#__PURE__*/_react.default.createElement(CustomTableRow, null, /*#__PURE__*/_react.default.createElement(CustomTableCell, {
277
- id: "foo"
278
- }, "ColHeader"), /*#__PURE__*/_react.default.createElement(CustomTableCell, {
279
- id: "bar"
280
- }, "Bar-header"), _Table$ColHeader || (_Table$ColHeader = /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, {
281
- id: "baz"
282
- }, "Bar-header")))), /*#__PURE__*/_react.default.createElement(_index.Table.Body, null, /*#__PURE__*/_react.default.createElement(CustomTableRow, null, _Table$RowHeader2 || (_Table$RowHeader2 = /*#__PURE__*/_react.default.createElement(_index.Table.RowHeader, null, "RowHeader2")), /*#__PURE__*/_react.default.createElement(CustomTableCell, null, "Cell"), _Table$Cell2 || (_Table$Cell2 = /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Cell2"))))));
372
+ const table = (0, _react2.render)((0, _jsxRuntime.jsxs)(_index.Table, {
373
+ caption: "Test custom table",
374
+ children: [(0, _jsxRuntime.jsx)(_index.Table.Head, {
375
+ children: (0, _jsxRuntime.jsxs)(CustomTableRow, {
376
+ children: [(0, _jsxRuntime.jsx)(CustomTableCell, {
377
+ id: "foo",
378
+ children: "ColHeader"
379
+ }), (0, _jsxRuntime.jsx)(CustomTableCell, {
380
+ id: "bar",
381
+ children: "Bar-header"
382
+ }), _Table$ColHeader || (_Table$ColHeader = (0, _jsxRuntime.jsx)(_index.Table.ColHeader, {
383
+ id: "baz",
384
+ children: "Bar-header"
385
+ }))]
386
+ })
387
+ }), (0, _jsxRuntime.jsx)(_index.Table.Body, {
388
+ children: (0, _jsxRuntime.jsxs)(CustomTableRow, {
389
+ children: [_Table$RowHeader2 || (_Table$RowHeader2 = (0, _jsxRuntime.jsx)(_index.Table.RowHeader, {
390
+ children: "RowHeader2"
391
+ })), (0, _jsxRuntime.jsx)(CustomTableCell, {
392
+ children: "Cell"
393
+ }), _Table$Cell2 || (_Table$Cell2 = (0, _jsxRuntime.jsx)(_index.Table.Cell, {
394
+ children: "Cell2"
395
+ }))]
396
+ })
397
+ })]
398
+ }));
283
399
  const stackedTable = _react2.screen.getByRole('table');
284
400
  expect(stackedTable).toBeInTheDocument();
285
401
  const container = table.container;
package/lib/Table/index.js CHANGED
@@ -22,6 +22,7 @@ var _RowHeader = require("./RowHeader");
22
22
  var _Cell = require("./Cell");
23
23
  var _props = require("./props");
24
24
  var _TableContext = _interopRequireDefault(require("./TableContext"));
25
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
25
26
  var _dec, _class, _Table;
26
27
  /*
27
28
  * The MIT License (MIT)
@@ -46,7 +47,6 @@ var _dec, _class, _Table;
46
47
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
47
48
  * SOFTWARE.
48
49
  */
49
- /** @jsx jsx */
50
50
  /**
51
51
  ---
52
52
  category: components
@@ -96,27 +96,34 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyle)(_styles.default, _th
96
96
  styles = _this$props3.styles;
97
97
  const isStacked = layout === 'stacked';
98
98
  const headers = isStacked ? this.getHeaders() : void 0;
99
- return (0, _emotion.jsx)(_TableContext.default.Provider, {
99
+ return (0, _jsxRuntime.jsx)(_TableContext.default.Provider, {
100
100
  value: {
101
101
  isStacked: isStacked,
102
102
  hover: hover,
103
103
  headers: headers
104
- }
105
- }, (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Table.allowedProps), Table), {
106
- as: isStacked ? 'div' : 'table',
107
- margin: margin,
108
- elementRef: this.handleRef,
109
- css: styles === null || styles === void 0 ? void 0 : styles.table,
110
- role: isStacked ? 'table' : void 0,
111
- "aria-label": isStacked ? caption : void 0
112
- }), !isStacked && (0, _emotion.jsx)("caption", null, (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, caption)), _react.Children.map(children, child => {
113
- if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
114
- return (0, _safeCloneElement.safeCloneElement)(child, {
115
- key: child.props.name
116
- });
117
- }
118
- return child;
119
- })));
104
+ },
105
+ children: (0, _jsxRuntime.jsxs)(_View.View, {
106
+ ..._View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Table.allowedProps), Table),
107
+ as: isStacked ? 'div' : 'table',
108
+ margin: margin,
109
+ elementRef: this.handleRef,
110
+ css: styles === null || styles === void 0 ? void 0 : styles.table,
111
+ role: isStacked ? 'table' : void 0,
112
+ "aria-label": isStacked ? caption : void 0,
113
+ children: [!isStacked && (0, _jsxRuntime.jsx)("caption", {
114
+ children: (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
115
+ children: caption
116
+ })
117
+ }), _react.Children.map(children, child => {
118
+ if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
119
+ return (0, _safeCloneElement.safeCloneElement)(child, {
120
+ key: child.props.name
121
+ });
122
+ }
123
+ return child;
124
+ })]
125
+ })
126
+ });
120
127
  }
121
128
  }, _Table.displayName = "Table", _Table.componentId = 'Table', _Table.allowedProps = _props.allowedProps, _Table.propTypes = _props.propTypes, _Table.defaultProps = {
122
129
  children: null,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-table",
3
- "version": "10.16.1-snapshot-0",
3
+ "version": "10.16.1",
4
4
  "description": "A styled HTML table component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,11 +23,11 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.16.1-snapshot-0",
27
- "@instructure/ui-babel-preset": "10.16.1-snapshot-0",
28
- "@instructure/ui-color-utils": "10.16.1-snapshot-0",
29
- "@instructure/ui-test-utils": "10.16.1-snapshot-0",
30
- "@instructure/ui-themes": "10.16.1-snapshot-0",
26
+ "@instructure/ui-axe-check": "10.16.1",
27
+ "@instructure/ui-babel-preset": "10.16.1",
28
+ "@instructure/ui-color-utils": "10.16.1",
29
+ "@instructure/ui-test-utils": "10.16.1",
30
+ "@instructure/ui-themes": "10.16.1",
31
31
  "@testing-library/jest-dom": "^6.6.3",
32
32
  "@testing-library/react": "^16.0.1",
33
33
  "@testing-library/user-event": "^14.5.2",
@@ -35,17 +35,17 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@babel/runtime": "^7.26.0",
38
- "@instructure/console": "10.16.1-snapshot-0",
39
- "@instructure/emotion": "10.16.1-snapshot-0",
40
- "@instructure/shared-types": "10.16.1-snapshot-0",
41
- "@instructure/ui-a11y-content": "10.16.1-snapshot-0",
42
- "@instructure/ui-icons": "10.16.1-snapshot-0",
43
- "@instructure/ui-prop-types": "10.16.1-snapshot-0",
44
- "@instructure/ui-react-utils": "10.16.1-snapshot-0",
45
- "@instructure/ui-simple-select": "10.16.1-snapshot-0",
46
- "@instructure/ui-testable": "10.16.1-snapshot-0",
47
- "@instructure/ui-utils": "10.16.1-snapshot-0",
48
- "@instructure/ui-view": "10.16.1-snapshot-0",
38
+ "@instructure/console": "10.16.1",
39
+ "@instructure/emotion": "10.16.1",
40
+ "@instructure/shared-types": "10.16.1",
41
+ "@instructure/ui-a11y-content": "10.16.1",
42
+ "@instructure/ui-icons": "10.16.1",
43
+ "@instructure/ui-prop-types": "10.16.1",
44
+ "@instructure/ui-react-utils": "10.16.1",
45
+ "@instructure/ui-simple-select": "10.16.1",
46
+ "@instructure/ui-testable": "10.16.1",
47
+ "@instructure/ui-utils": "10.16.1",
48
+ "@instructure/ui-view": "10.16.1",
49
49
  "prop-types": "^15.8.1"
50
50
  },
51
51
  "peerDependencies": {
package/src/Table/Body/index.tsx CHANGED
@@ -22,12 +22,11 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- /** @jsx jsx */
26
25
  import { Component, Children, ContextType, isValidElement } from 'react'
27
26
 
28
27
  import { safeCloneElement, omitProps } from '@instructure/ui-react-utils'
29
28
  import { View } from '@instructure/ui-view'
30
- import { withStyle, jsx } from '@instructure/emotion'
29
+ import { withStyle } from '@instructure/emotion'
31
30
 
32
31
  import generateStyle from './styles'
33
32
  import generateComponentTheme from './theme'
package/src/Table/Cell/index.tsx CHANGED
@@ -22,13 +22,12 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- /** @jsx jsx */
26
25
  import { Component, ContextType } from 'react'
27
26
 
28
27
  import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
29
28
  import { View } from '@instructure/ui-view'
30
29
 
31
- import { withStyle, jsx } from '@instructure/emotion'
30
+ import { withStyle } from '@instructure/emotion'
32
31
 
33
32
  import generateStyle from './styles'
34
33
  import generateComponentTheme from './theme'
package/src/Table/ColHeader/index.tsx CHANGED
@@ -22,8 +22,7 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- /** @jsx jsx */
26
- import React, { Component } from 'react'
25
+ import { Component } from 'react'
27
26
 
28
27
  import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
29
28
  import {
@@ -32,7 +31,7 @@ import {
32
31
  IconMiniArrowDoubleLine
33
32
  } from '@instructure/ui-icons'
34
33
 
35
- import { withStyle, jsx } from '@instructure/emotion'
34
+ import { withStyle } from '@instructure/emotion'
36
35
 
37
36
  import generateStyle from './styles'
38
37
  import generateComponentTheme from './theme'
package/src/Table/ColHeader/props.ts CHANGED
@@ -21,7 +21,7 @@
21
21
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22
22
  * SOFTWARE.
23
23
  */
24
- import React, { ThHTMLAttributes } from 'react'
24
+ import { ThHTMLAttributes } from 'react'
25
25
  import PropTypes from 'prop-types'
26
26
 
27
27
  import type {
package/src/Table/Head/index.tsx CHANGED
@@ -22,7 +22,6 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- /** @jsx jsx */
26
25
  import { Component, Children, ContextType } from 'react'
27
26
 
28
27
  import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
@@ -32,7 +31,7 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content'
32
31
  import { IconCheckLine } from '@instructure/ui-icons'
33
32
  import { warn } from '@instructure/console'
34
33
 
35
- import { withStyle, jsx } from '@instructure/emotion'
34
+ import { withStyle } from '@instructure/emotion'
36
35
 
37
36
  import generateStyle from './styles'
38
37
  import generateComponentTheme from './theme'
package/src/Table/README.md CHANGED
@@ -2014,7 +2014,7 @@ Custom table with `stacked` layout support:
2014
2014
  onMouseOver={this.toggleHoverOn}
2015
2015
  onMouseOut={this.toggleHoverOff}
2016
2016
  >
2017
- {React.Children.toArray(this.props.children)
2017
+ {Children.toArray(this.props.children)
2018
2018
  .filter(React.isValidElement)
2019
2019
  .map((child, index) => {
2020
2020
  return React.cloneElement(child, {
@@ -2144,7 +2144,7 @@ Custom table with `stacked` layout support:
2144
2144
  onMouseOver={() => setIsHovered(true)}
2145
2145
  onMouseOut={() => setIsHovered(false)}
2146
2146
  >
2147
- {React.Children.toArray(children)
2147
+ {Children.toArray(children)
2148
2148
  .filter(React.isValidElement)
2149
2149
  .map((child, index) => {
2150
2150
  return React.cloneElement(child, {
package/src/Table/Row/index.tsx CHANGED
@@ -22,13 +22,12 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- /** @jsx jsx */
26
25
  import { Component, Children, ContextType, isValidElement } from 'react'
27
26
 
28
27
  import { omitProps, safeCloneElement } from '@instructure/ui-react-utils'
29
28
  import { View } from '@instructure/ui-view'
30
29
 
31
- import { withStyle, jsx } from '@instructure/emotion'
30
+ import { withStyle } from '@instructure/emotion'
32
31
 
33
32
  import generateStyle from './styles'
34
33
  import generateComponentTheme from './theme'