@instructure/ui-table 10.16.1 → 10.16.3

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 (10) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/es/Table/Head/index.js +1 -1
  3. package/es/Table/__new-tests__/Table.test.js +34 -12
  4. package/lib/Table/Head/index.js +1 -1
  5. package/lib/Table/__new-tests__/Table.test.js +34 -12
  6. package/package.json +17 -17
  7. package/src/Table/Head/index.tsx +1 -1
  8. package/src/Table/README.md +2 -2
  9. package/src/Table/__new-tests__/Table.test.tsx +18 -1
  10. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [10.16.3](https://github.com/instructure/instructure-ui/compare/v10.16.1...v10.16.3) (2025-04-30)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **ui-table:** fix table crashing in stacked layout when using falsy children ([cb1b2ae](https://github.com/instructure/instructure-ui/commit/cb1b2ae4c24f00f6ba37f414f52fd4a3fe444edf))
12
+
13
+
14
+
15
+
16
+
17
+ ## [10.16.2](https://github.com/instructure/instructure-ui/compare/v10.16.1...v10.16.2) (2025-04-22)
18
+
19
+ **Note:** Version bump only for package @instructure/ui-table
20
+
21
+
22
+
23
+
24
+
6
25
  ## [10.16.1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1) (2025-04-22)
7
26
 
8
27
  **Note:** Version bump only for package @instructure/ui-table
package/es/Table/Head/index.js CHANGED
@@ -97,7 +97,7 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
97
97
  let count = 0;
98
98
  Children.forEach(firstRow.props.children, grandchild => {
99
99
  count += 1;
100
- if (!grandchild.props) return;
100
+ if (!(grandchild !== null && grandchild !== void 0 && grandchild.props)) return; // grandchild can be false
101
101
  const _grandchild$props2 = grandchild.props,
102
102
  id = _grandchild$props2.id,
103
103
  stackedSortByLabel = _grandchild$props2.stackedSortByLabel,
package/es/Table/__new-tests__/Table.test.js CHANGED
@@ -1,4 +1,4 @@
1
- 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;
1
+ var _Table$Head, _Table$Body, _Table, _Table2, _Table$Cell, _Table$Body2, _span, _span2, _Table$Row, _span3, _span4, _Table$Row2, _Table$Body3, _Table$RowHeader, _Table$Cell2, _Table$Head2, _Table$Row3, _Table$ColHeader, _Table$RowHeader2, _Table$Cell3;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -138,22 +138,44 @@ describe('<Table />', async () => {
138
138
  expect(stackedTable).toBeInTheDocument();
139
139
  });
140
140
  it('can handle invalid header in stacked layout', async () => {
141
- render(_Table3 || (_Table3 = _jsx(Table, {
141
+ render(_jsxs(Table, {
142
142
  caption: "Test table",
143
143
  layout: "stacked",
144
- children: _jsx(Table.Head, {
145
- children: _jsx(Table.Row, {
146
- children: _jsx(Table.Cell, {
144
+ children: [_jsx(Table.Head, {
145
+ children: _jsxs(Table.Row, {
146
+ children: [_Table$Cell || (_Table$Cell = _jsx(Table.Cell, {
147
147
  children: "Foo"
148
- })
148
+ })), false]
149
149
  })
150
- })
151
- })));
150
+ }), _Table$Body2 || (_Table$Body2 = _jsxs(Table.Body, {
151
+ children: [_jsxs(Table.Row, {
152
+ children: [_jsx(Table.RowHeader, {
153
+ children: "1"
154
+ }), _jsx(Table.Cell, {
155
+ children: "The Shawshank Redemption"
156
+ }), _jsx(Table.Cell, {
157
+ children: "1994"
158
+ }), _jsx(Table.Cell, {
159
+ children: "9.3"
160
+ })]
161
+ }), _jsxs(Table.Row, {
162
+ children: [_jsx(Table.RowHeader, {
163
+ children: "2"
164
+ }), _jsx(Table.Cell, {
165
+ children: "The Godfather"
166
+ }), _jsx(Table.Cell, {
167
+ children: "1972"
168
+ }), _jsx(Table.Cell, {
169
+ children: "9.2"
170
+ })]
171
+ })]
172
+ }))]
173
+ }));
152
174
  const stackedTable = screen.getByRole('table');
153
175
  expect(stackedTable).toBeInTheDocument();
154
176
  expect(stackedTable).not.toHaveTextContent('Foo');
155
177
  });
156
- it('does not crash for invalid children', async () => {
178
+ it('does not crash for invalid children in stacked layout', async () => {
157
179
  render(_jsxs(Table, {
158
180
  caption: "Test table",
159
181
  layout: "stacked",
@@ -206,7 +228,7 @@ describe('<Table />', async () => {
206
228
  children: "Bar"
207
229
  })]
208
230
  })
209
- }), _Table$Body2 || (_Table$Body2 = _jsxs(Table.Body, {
231
+ }), _Table$Body3 || (_Table$Body3 = _jsxs(Table.Body, {
210
232
  children: [_jsx(Table.Row, {}), _jsx(Table.Row, {})]
211
233
  }))]
212
234
  }));
@@ -308,7 +330,7 @@ describe('<Table />', async () => {
308
330
  ...this.props,
309
331
  children: [_Table$RowHeader || (_Table$RowHeader = _jsx(Table.RowHeader, {
310
332
  children: "1"
311
- })), _Table$Cell || (_Table$Cell = _jsx(Table.Cell, {
333
+ })), _Table$Cell2 || (_Table$Cell2 = _jsx(Table.Cell, {
312
334
  children: "The Shawshank Redemption"
313
335
  })), _CustomTableCell2 || (_CustomTableCell2 = _jsx(CustomTableCell, {
314
336
  children: "9.3"
@@ -389,7 +411,7 @@ describe('<Table />', async () => {
389
411
  children: "RowHeader2"
390
412
  })), _jsx(CustomTableCell, {
391
413
  children: "Cell"
392
- }), _Table$Cell2 || (_Table$Cell2 = _jsx(Table.Cell, {
414
+ }), _Table$Cell3 || (_Table$Cell3 = _jsx(Table.Cell, {
393
415
  children: "Cell2"
394
416
  }))]
395
417
  })
package/lib/Table/Head/index.js CHANGED
@@ -103,7 +103,7 @@ let Head = exports.Head = (_dec = (0, _emotion.withStyle)(_styles.default, _them
103
103
  let count = 0;
104
104
  _react.Children.forEach(firstRow.props.children, grandchild => {
105
105
  count += 1;
106
- if (!grandchild.props) return;
106
+ if (!(grandchild !== null && grandchild !== void 0 && grandchild.props)) return; // grandchild can be false
107
107
  const _grandchild$props2 = grandchild.props,
108
108
  id = _grandchild$props2.id,
109
109
  stackedSortByLabel = _grandchild$props2.stackedSortByLabel,
package/lib/Table/__new-tests__/Table.test.js CHANGED
@@ -8,7 +8,7 @@ require("@testing-library/jest-dom");
8
8
  var _index = require("../index");
9
9
  var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
10
10
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
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;
11
+ var _Table$Head, _Table$Body, _Table, _Table2, _Table$Cell, _Table$Body2, _span, _span2, _Table$Row, _span3, _span4, _Table$Row2, _Table$Body3, _Table$RowHeader, _Table$Cell2, _Table$Head2, _Table$Row3, _Table$ColHeader, _Table$RowHeader2, _Table$Cell3;
12
12
  /*
13
13
  * The MIT License (MIT)
14
14
  *
@@ -139,22 +139,44 @@ describe('<Table />', async () => {
139
139
  expect(stackedTable).toBeInTheDocument();
140
140
  });
141
141
  it('can handle invalid header in stacked layout', async () => {
142
- (0, _react2.render)(_Table3 || (_Table3 = (0, _jsxRuntime.jsx)(_index.Table, {
142
+ (0, _react2.render)((0, _jsxRuntime.jsxs)(_index.Table, {
143
143
  caption: "Test table",
144
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, {
145
+ children: [(0, _jsxRuntime.jsx)(_index.Table.Head, {
146
+ children: (0, _jsxRuntime.jsxs)(_index.Table.Row, {
147
+ children: [_Table$Cell || (_Table$Cell = (0, _jsxRuntime.jsx)(_index.Table.Cell, {
148
148
  children: "Foo"
149
- })
149
+ })), false]
150
150
  })
151
- })
152
- })));
151
+ }), _Table$Body2 || (_Table$Body2 = (0, _jsxRuntime.jsxs)(_index.Table.Body, {
152
+ children: [(0, _jsxRuntime.jsxs)(_index.Table.Row, {
153
+ children: [(0, _jsxRuntime.jsx)(_index.Table.RowHeader, {
154
+ children: "1"
155
+ }), (0, _jsxRuntime.jsx)(_index.Table.Cell, {
156
+ children: "The Shawshank Redemption"
157
+ }), (0, _jsxRuntime.jsx)(_index.Table.Cell, {
158
+ children: "1994"
159
+ }), (0, _jsxRuntime.jsx)(_index.Table.Cell, {
160
+ children: "9.3"
161
+ })]
162
+ }), (0, _jsxRuntime.jsxs)(_index.Table.Row, {
163
+ children: [(0, _jsxRuntime.jsx)(_index.Table.RowHeader, {
164
+ children: "2"
165
+ }), (0, _jsxRuntime.jsx)(_index.Table.Cell, {
166
+ children: "The Godfather"
167
+ }), (0, _jsxRuntime.jsx)(_index.Table.Cell, {
168
+ children: "1972"
169
+ }), (0, _jsxRuntime.jsx)(_index.Table.Cell, {
170
+ children: "9.2"
171
+ })]
172
+ })]
173
+ }))]
174
+ }));
153
175
  const stackedTable = _react2.screen.getByRole('table');
154
176
  expect(stackedTable).toBeInTheDocument();
155
177
  expect(stackedTable).not.toHaveTextContent('Foo');
156
178
  });
157
- it('does not crash for invalid children', async () => {
179
+ it('does not crash for invalid children in stacked layout', async () => {
158
180
  (0, _react2.render)((0, _jsxRuntime.jsxs)(_index.Table, {
159
181
  caption: "Test table",
160
182
  layout: "stacked",
@@ -207,7 +229,7 @@ describe('<Table />', async () => {
207
229
  children: "Bar"
208
230
  })]
209
231
  })
210
- }), _Table$Body2 || (_Table$Body2 = (0, _jsxRuntime.jsxs)(_index.Table.Body, {
232
+ }), _Table$Body3 || (_Table$Body3 = (0, _jsxRuntime.jsxs)(_index.Table.Body, {
211
233
  children: [(0, _jsxRuntime.jsx)(_index.Table.Row, {}), (0, _jsxRuntime.jsx)(_index.Table.Row, {})]
212
234
  }))]
213
235
  }));
@@ -309,7 +331,7 @@ describe('<Table />', async () => {
309
331
  ...this.props,
310
332
  children: [_Table$RowHeader || (_Table$RowHeader = (0, _jsxRuntime.jsx)(_index.Table.RowHeader, {
311
333
  children: "1"
312
- })), _Table$Cell || (_Table$Cell = (0, _jsxRuntime.jsx)(_index.Table.Cell, {
334
+ })), _Table$Cell2 || (_Table$Cell2 = (0, _jsxRuntime.jsx)(_index.Table.Cell, {
313
335
  children: "The Shawshank Redemption"
314
336
  })), _CustomTableCell2 || (_CustomTableCell2 = (0, _jsxRuntime.jsx)(CustomTableCell, {
315
337
  children: "9.3"
@@ -390,7 +412,7 @@ describe('<Table />', async () => {
390
412
  children: "RowHeader2"
391
413
  })), (0, _jsxRuntime.jsx)(CustomTableCell, {
392
414
  children: "Cell"
393
- }), _Table$Cell2 || (_Table$Cell2 = (0, _jsxRuntime.jsx)(_index.Table.Cell, {
415
+ }), _Table$Cell3 || (_Table$Cell3 = (0, _jsxRuntime.jsx)(_index.Table.Cell, {
394
416
  children: "Cell2"
395
417
  }))]
396
418
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-table",
3
- "version": "10.16.1",
3
+ "version": "10.16.3",
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",
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",
26
+ "@instructure/ui-axe-check": "10.16.3",
27
+ "@instructure/ui-babel-preset": "10.16.3",
28
+ "@instructure/ui-color-utils": "10.16.3",
29
+ "@instructure/ui-test-utils": "10.16.3",
30
+ "@instructure/ui-themes": "10.16.3",
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",
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",
38
+ "@instructure/console": "10.16.3",
39
+ "@instructure/emotion": "10.16.3",
40
+ "@instructure/shared-types": "10.16.3",
41
+ "@instructure/ui-a11y-content": "10.16.3",
42
+ "@instructure/ui-icons": "10.16.3",
43
+ "@instructure/ui-prop-types": "10.16.3",
44
+ "@instructure/ui-react-utils": "10.16.3",
45
+ "@instructure/ui-simple-select": "10.16.3",
46
+ "@instructure/ui-testable": "10.16.3",
47
+ "@instructure/ui-utils": "10.16.3",
48
+ "@instructure/ui-view": "10.16.3",
49
49
  "prop-types": "^15.8.1"
50
50
  },
51
51
  "peerDependencies": {
package/src/Table/Head/index.tsx CHANGED
@@ -117,7 +117,7 @@ class Head extends Component<TableHeadProps> {
117
117
  let count = 0
118
118
  Children.forEach(firstRow.props.children, (grandchild) => {
119
119
  count += 1
120
- if (!grandchild.props) return
120
+ if (!grandchild?.props) return // grandchild can be false
121
121
  const { id, stackedSortByLabel, sortDirection, onRequestSort } =
122
122
  grandchild.props
123
123
  if (id && onRequestSort) {
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
- {Children.toArray(this.props.children)
2017
+ {React.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
- {Children.toArray(children)
2147
+ {React.Children.toArray(children)
2148
2148
  .filter(React.isValidElement)
2149
2149
  .map((child, index) => {
2150
2150
  return React.cloneElement(child, {
package/src/Table/__new-tests__/Table.test.tsx CHANGED
@@ -155,10 +155,27 @@ describe('<Table />', async () => {
155
155
  render(
156
156
  <Table caption="Test table" layout="stacked">
157
157
  <Table.Head>
158
+ {/* @ts-expect-error error is normal here */}
158
159
  <Table.Row>
159
160
  <Table.Cell>Foo</Table.Cell>
161
+ {}
162
+ {false}
160
163
  </Table.Row>
161
164
  </Table.Head>
165
+ <Table.Body>
166
+ <Table.Row>
167
+ <Table.RowHeader>1</Table.RowHeader>
168
+ <Table.Cell>The Shawshank Redemption</Table.Cell>
169
+ <Table.Cell>1994</Table.Cell>
170
+ <Table.Cell>9.3</Table.Cell>
171
+ </Table.Row>
172
+ <Table.Row>
173
+ <Table.RowHeader>2</Table.RowHeader>
174
+ <Table.Cell>The Godfather</Table.Cell>
175
+ <Table.Cell>1972</Table.Cell>
176
+ <Table.Cell>9.2</Table.Cell>
177
+ </Table.Row>
178
+ </Table.Body>
162
179
  </Table>
163
180
  )
164
181
  const stackedTable = screen.getByRole('table')
@@ -167,7 +184,7 @@ describe('<Table />', async () => {
167
184
  expect(stackedTable).not.toHaveTextContent('Foo')
168
185
  })
169
186
 
170
- it('does not crash for invalid children', async () => {
187
+ it('does not crash for invalid children in stacked layout', async () => {
171
188
  render(
172
189
  <Table caption="Test table" layout="stacked">
173
190
  test1