@instructure/ui-table 8.14.1-snapshot.37 → 8.14.1-snapshot.47

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 (72) hide show
  1. package/es/Table/Body/index.js +2 -1
  2. package/es/Table/Body/props.js +0 -3
  3. package/es/Table/Cell/index.js +1 -0
  4. package/es/Table/Cell/props.js +0 -4
  5. package/es/Table/ColHeader/index.js +3 -2
  6. package/es/Table/ColHeader/props.js +0 -30
  7. package/es/Table/Head/index.js +25 -21
  8. package/es/Table/Head/props.js +0 -3
  9. package/es/Table/Row/index.js +1 -0
  10. package/es/Table/Row/props.js +0 -3
  11. package/es/Table/RowHeader/index.js +1 -0
  12. package/es/Table/RowHeader/props.js +0 -4
  13. package/es/Table/index.js +8 -7
  14. package/es/Table/props.js +0 -28
  15. package/lib/Table/Body/index.js +2 -1
  16. package/lib/Table/Body/props.js +0 -3
  17. package/lib/Table/Cell/index.js +1 -0
  18. package/lib/Table/Cell/props.js +0 -4
  19. package/lib/Table/ColHeader/index.js +5 -2
  20. package/lib/Table/ColHeader/props.js +0 -30
  21. package/lib/Table/Head/index.js +29 -23
  22. package/lib/Table/Head/props.js +0 -3
  23. package/lib/Table/Row/index.js +1 -0
  24. package/lib/Table/Row/props.js +0 -3
  25. package/lib/Table/RowHeader/index.js +1 -0
  26. package/lib/Table/RowHeader/props.js +0 -4
  27. package/lib/Table/index.js +10 -7
  28. package/lib/Table/props.js +0 -28
  29. package/package.json +17 -17
  30. package/src/Table/Body/index.tsx +14 -12
  31. package/src/Table/Body/props.ts +5 -4
  32. package/src/Table/Cell/index.tsx +1 -0
  33. package/src/Table/Cell/props.ts +5 -5
  34. package/src/Table/ColHeader/index.tsx +6 -15
  35. package/src/Table/ColHeader/props.ts +29 -26
  36. package/src/Table/Head/index.tsx +38 -21
  37. package/src/Table/Head/props.ts +4 -4
  38. package/src/Table/Row/index.tsx +3 -4
  39. package/src/Table/Row/props.ts +5 -4
  40. package/src/Table/RowHeader/index.tsx +1 -0
  41. package/src/Table/RowHeader/props.ts +4 -4
  42. package/src/Table/index.tsx +14 -10
  43. package/src/Table/props.ts +24 -24
  44. package/tsconfig.build.tsbuildinfo +1 -1
  45. package/types/Table/Body/index.d.ts +4 -3
  46. package/types/Table/Body/index.d.ts.map +1 -1
  47. package/types/Table/Body/props.d.ts +5 -1
  48. package/types/Table/Body/props.d.ts.map +1 -1
  49. package/types/Table/Cell/index.d.ts +5 -4
  50. package/types/Table/Cell/index.d.ts.map +1 -1
  51. package/types/Table/Cell/props.d.ts +5 -2
  52. package/types/Table/Cell/props.d.ts.map +1 -1
  53. package/types/Table/ColHeader/index.d.ts +11 -6
  54. package/types/Table/ColHeader/index.d.ts.map +1 -1
  55. package/types/Table/ColHeader/props.d.ts +28 -2
  56. package/types/Table/ColHeader/props.d.ts.map +1 -1
  57. package/types/Table/Head/index.d.ts +6 -5
  58. package/types/Table/Head/index.d.ts.map +1 -1
  59. package/types/Table/Head/props.d.ts +4 -1
  60. package/types/Table/Head/props.d.ts.map +1 -1
  61. package/types/Table/Row/index.d.ts +3 -2
  62. package/types/Table/Row/index.d.ts.map +1 -1
  63. package/types/Table/Row/props.d.ts +5 -1
  64. package/types/Table/Row/props.d.ts.map +1 -1
  65. package/types/Table/RowHeader/index.d.ts +3 -2
  66. package/types/Table/RowHeader/index.d.ts.map +1 -1
  67. package/types/Table/RowHeader/props.d.ts +4 -1
  68. package/types/Table/RowHeader/props.d.ts.map +1 -1
  69. package/types/Table/index.d.ts +7 -6
  70. package/types/Table/index.d.ts.map +1 -1
  71. package/types/Table/props.d.ts +24 -1
  72. package/types/Table/props.d.ts.map +1 -1
@@ -2,6 +2,8 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
4
 
5
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
+
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
@@ -9,7 +11,7 @@ exports.default = exports.Table = void 0;
9
11
 
10
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
13
 
12
- var _react = require("react");
14
+ var _react = _interopRequireWildcard(require("react"));
13
15
 
14
16
  var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
15
17
 
@@ -47,6 +49,7 @@ var _dec, _class, _class2, _temp;
47
49
  ---
48
50
  category: components
49
51
  ---
52
+ @tsProps
50
53
  **/
51
54
  let Table = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Table extends _react.Component {
52
55
  constructor() {
@@ -78,14 +81,14 @@ let Table = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
78
81
  getHeaders() {
79
82
  const children = this.props.children;
80
83
 
81
- const _Children$toArray = _react.Children.toArray(children),
82
- _Children$toArray2 = (0, _slicedToArray2.default)(_Children$toArray, 1),
83
- head = _Children$toArray2[0];
84
+ const _ref = _react.Children.toArray(children),
85
+ _ref2 = (0, _slicedToArray2.default)(_ref, 1),
86
+ head = _ref2[0];
84
87
 
85
88
  if ((0, _matchComponentTypes.matchComponentTypes)(head, [_Head.Head])) {
86
- const _Children$toArray3 = _react.Children.toArray(head.props.children),
87
- _Children$toArray4 = (0, _slicedToArray2.default)(_Children$toArray3, 1),
88
- row = _Children$toArray4[0];
89
+ const _ref3 = _react.Children.toArray(head.props.children),
90
+ _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
91
+ row = _ref4[0];
89
92
 
90
93
  if ((0, _matchComponentTypes.matchComponentTypes)(row, [_Row.Row])) {
91
94
  return _react.Children.map(row.props.children, colHeader => {
@@ -41,39 +41,11 @@ var _Body = require("./Body");
41
41
  * SOFTWARE.
42
42
  */
43
43
  const propTypes = {
44
- /**
45
- * Provide a screen reader friendly description. Anything passed to this
46
- * prop will be wrapped by `<ScreenReaderContent>` when it is rendered.
47
- */
48
44
  caption: _propTypes.default.node.isRequired,
49
-
50
- /**
51
- * Build table via `Table.Head` and `Table.Body`
52
- */
53
45
  children: _Children.Children.oneOf([_Head.Head, _Body.Body]),
54
-
55
- /**
56
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
57
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
58
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
59
- */
60
46
  margin: _emotion.ThemeablePropTypes.spacing,
61
-
62
- /**
63
- * Provide a reference to the underlying html element
64
- */
65
47
  elementRef: _propTypes.default.func,
66
-
67
- /**
68
- * Highlight each row on hover
69
- */
70
48
  hover: _propTypes.default.bool,
71
-
72
- /**
73
- * `auto` lets the browser determine table column widths based on cell content,
74
- * while `fixed` forces columns of equal width. `stacked` renders table in one
75
- * column to be more readable on narrow screens
76
- */
77
49
  layout: _propTypes.default.oneOf(['auto', 'fixed', 'stacked'])
78
50
  };
79
51
  exports.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-table",
3
- "version": "8.14.1-snapshot.37+4b9816103",
3
+ "version": "8.14.1-snapshot.47+5adcc645d",
4
4
  "description": "A styled HTML table component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "type": "commonjs",
@@ -24,24 +24,24 @@
24
24
  },
25
25
  "license": "MIT",
26
26
  "devDependencies": {
27
- "@instructure/ui-babel-preset": "8.14.1-snapshot.37+4b9816103",
28
- "@instructure/ui-color-utils": "8.14.1-snapshot.37+4b9816103",
29
- "@instructure/ui-test-utils": "8.14.1-snapshot.37+4b9816103",
30
- "@instructure/ui-themes": "8.14.1-snapshot.37+4b9816103"
27
+ "@instructure/ui-babel-preset": "8.14.1-snapshot.47+5adcc645d",
28
+ "@instructure/ui-color-utils": "8.14.1-snapshot.47+5adcc645d",
29
+ "@instructure/ui-test-utils": "8.14.1-snapshot.47+5adcc645d",
30
+ "@instructure/ui-themes": "8.14.1-snapshot.47+5adcc645d"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.13.10",
34
- "@instructure/console": "8.14.1-snapshot.37+4b9816103",
35
- "@instructure/emotion": "8.14.1-snapshot.37+4b9816103",
36
- "@instructure/shared-types": "8.14.1-snapshot.37+4b9816103",
37
- "@instructure/ui-a11y-content": "8.14.1-snapshot.37+4b9816103",
38
- "@instructure/ui-icons": "8.14.1-snapshot.37+4b9816103",
39
- "@instructure/ui-prop-types": "8.14.1-snapshot.37+4b9816103",
40
- "@instructure/ui-react-utils": "8.14.1-snapshot.37+4b9816103",
41
- "@instructure/ui-simple-select": "8.14.1-snapshot.37+4b9816103",
42
- "@instructure/ui-testable": "8.14.1-snapshot.37+4b9816103",
43
- "@instructure/ui-utils": "8.14.1-snapshot.37+4b9816103",
44
- "@instructure/ui-view": "8.14.1-snapshot.37+4b9816103",
34
+ "@instructure/console": "8.14.1-snapshot.47+5adcc645d",
35
+ "@instructure/emotion": "8.14.1-snapshot.47+5adcc645d",
36
+ "@instructure/shared-types": "8.14.1-snapshot.47+5adcc645d",
37
+ "@instructure/ui-a11y-content": "8.14.1-snapshot.47+5adcc645d",
38
+ "@instructure/ui-icons": "8.14.1-snapshot.47+5adcc645d",
39
+ "@instructure/ui-prop-types": "8.14.1-snapshot.47+5adcc645d",
40
+ "@instructure/ui-react-utils": "8.14.1-snapshot.47+5adcc645d",
41
+ "@instructure/ui-simple-select": "8.14.1-snapshot.47+5adcc645d",
42
+ "@instructure/ui-testable": "8.14.1-snapshot.47+5adcc645d",
43
+ "@instructure/ui-utils": "8.14.1-snapshot.47+5adcc645d",
44
+ "@instructure/ui-view": "8.14.1-snapshot.47+5adcc645d",
45
45
  "prop-types": "^15"
46
46
  },
47
47
  "peerDependencies": {
@@ -51,5 +51,5 @@
51
51
  "access": "public"
52
52
  },
53
53
  "sideEffects": false,
54
- "gitHead": "4b98161030d7780fcbbf6f4a4154d21278a92089"
54
+ "gitHead": "5adcc645d00369613bc0d2cac445b0ad7cd5d40e"
55
55
  }
@@ -37,6 +37,7 @@ import generateStyle from './styles'
37
37
  import generateComponentTheme from './theme'
38
38
  import { Row } from '../Row'
39
39
  import type { TableBodyProps } from './props'
40
+ import type { TableRowProps } from '../Row/props'
40
41
  import { allowedProps, propTypes } from './props'
41
42
 
42
43
  /**
@@ -44,6 +45,7 @@ import { allowedProps, propTypes } from './props'
44
45
  parent: Table
45
46
  id: Table.Body
46
47
  ---
48
+ @tsProps
47
49
  **/
48
50
  @withStyle(generateStyle, generateComponentTheme)
49
51
  class Body extends Component<TableBodyProps> {
@@ -60,8 +62,7 @@ class Body extends Component<TableBodyProps> {
60
62
  this.props.makeStyles?.()
61
63
  }
62
64
 
63
- // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
64
- componentDidUpdate(prevProps, prevState, snapshot) {
65
+ componentDidUpdate() {
65
66
  this.props.makeStyles?.()
66
67
  }
67
68
 
@@ -75,16 +76,17 @@ class Body extends Component<TableBodyProps> {
75
76
  css={styles?.body}
76
77
  role={isStacked ? 'rowgroup' : undefined}
77
78
  >
78
- {Children.map(children, (child) =>
79
- matchComponentTypes(child, [Row])
80
- ? safeCloneElement(child as ReactElement, {
81
- // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
82
- key: child.props.name,
83
- hover,
84
- isStacked,
85
- headers
86
- })
87
- : null
79
+ {Children.map(
80
+ children as React.ComponentElement<TableRowProps, Row>[],
81
+ (child) =>
82
+ matchComponentTypes(child, [Row])
83
+ ? safeCloneElement(child as ReactElement, {
84
+ key: child.props.name,
85
+ hover,
86
+ isStacked,
87
+ headers
88
+ })
89
+ : null
88
90
  )}
89
91
  </View>
90
92
  )
@@ -27,6 +27,7 @@ import PropTypes from 'prop-types'
27
27
  import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
28
28
 
29
29
  import { Row } from '../Row'
30
+ import type { TableRowProps } from '../Row/props'
30
31
 
31
32
  import type {
32
33
  OtherHTMLAttributes,
@@ -38,7 +39,10 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
38
39
  type TableBodyOwnProps = {
39
40
  hover?: boolean
40
41
  isStacked?: boolean
41
- headers?: (React.ReactNode | ((...args: any[]) => any))[]
42
+ headers?: TableRowProps['headers']
43
+ /**
44
+ * `Table.Row`
45
+ */
42
46
  children?: React.ReactNode
43
47
  }
44
48
 
@@ -53,9 +57,6 @@ type TableBodyProps = TableBodyOwnProps &
53
57
  type TableBodyStyle = ComponentStyle<'body'>
54
58
 
55
59
  const propTypes: PropValidators<PropKeys> = {
56
- /**
57
- * `Table.Row`
58
- */
59
60
  children: ChildrenPropTypes.oneOf([Row]),
60
61
  hover: PropTypes.bool,
61
62
  isStacked: PropTypes.bool,
@@ -40,6 +40,7 @@ import { allowedProps, propTypes } from './props'
40
40
  parent: Table
41
41
  id: Table.Cell
42
42
  ---
43
+ @tsProps
43
44
  **/
44
45
  @withStyle(generateStyle, generateComponentTheme)
45
46
  class Cell extends Component<TableCellProps> {
@@ -34,9 +34,12 @@ import type {
34
34
 
35
35
  type TableCellOwnProps = {
36
36
  isStacked?: boolean
37
- header?: React.ReactNode | ((...args: any[]) => any)
37
+ header?: React.ReactNode | (() => React.ReactNode)
38
+ /**
39
+ * Control the text alignment in cell
40
+ */
38
41
  textAlign?: 'start' | 'center' | 'end'
39
- children?: React.ReactNode | ((...args: any[]) => React.ReactNode)
42
+ children?: React.ReactNode | (() => React.ReactNode)
40
43
  }
41
44
 
42
45
  type PropKeys = keyof TableCellOwnProps
@@ -53,9 +56,6 @@ const propTypes: PropValidators<PropKeys> = {
53
56
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
54
57
  isStacked: PropTypes.bool,
55
58
  header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
56
- /**
57
- * Control the text alignment in cell
58
- */
59
59
  textAlign: PropTypes.oneOf(['start', 'center', 'end'])
60
60
  }
61
61
 
@@ -23,7 +23,7 @@
23
23
  */
24
24
 
25
25
  /** @jsx jsx */
26
- import { Component } from 'react'
26
+ import React, { Component } from 'react'
27
27
 
28
28
  import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
29
29
  import {
@@ -43,6 +43,7 @@ import { allowedProps, propTypes } from './props'
43
43
  parent: Table
44
44
  id: Table.ColHeader
45
45
  ---
46
+ @tsProps
46
47
  **/
47
48
  @withStyle(generateStyle, generateComponentTheme)
48
49
  class ColHeader extends Component<TableColHeaderProps> {
@@ -66,14 +67,10 @@ class ColHeader extends Component<TableColHeaderProps> {
66
67
  this.props.makeStyles?.()
67
68
  }
68
69
 
69
- // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
70
- handleClick = (event) => {
70
+ handleClick = (event: React.SyntheticEvent) => {
71
71
  const { id, onRequestSort } = this.props
72
72
 
73
- // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
74
- onRequestSort(event, {
75
- id
76
- })
73
+ onRequestSort && onRequestSort(event, { id })
77
74
  }
78
75
 
79
76
  renderSortArrow() {
@@ -93,14 +90,8 @@ class ColHeader extends Component<TableColHeaderProps> {
93
90
  }
94
91
 
95
92
  render() {
96
- const {
97
- onRequestSort,
98
- width,
99
- children,
100
- sortDirection,
101
- scope,
102
- styles
103
- } = this.props
93
+ const { onRequestSort, width, children, sortDirection, scope, styles } =
94
+ this.props
104
95
 
105
96
  return (
106
97
  <th
@@ -32,14 +32,41 @@ import type {
32
32
  import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
33
33
 
34
34
  type TableColHeaderOwnProps = {
35
+ /**
36
+ * A unique id for this column. The `id` is also used as option in combobox,
37
+ * when sortable table is in stacked layout,
38
+ * and no `stackedSortByLabel` is provided.
39
+ */
35
40
  id: string
41
+ /**
42
+ * A custom string to display as option text in the combobox (instead of
43
+ * using the `id` prop), when sortable table is in stacked layout.
44
+ */
36
45
  stackedSortByLabel?: string
46
+ /**
47
+ * Control the width of column.
48
+ */
37
49
  width?: string | number
50
+ /**
51
+ * Control the text alignment in column header
52
+ */
38
53
  textAlign?: 'start' | 'center' | 'end'
54
+ /**
55
+ * The string of sorting direction
56
+ */
39
57
  sortDirection?: 'none' | 'ascending' | 'descending'
40
- onRequestSort?: (...args: any[]) => any
58
+ /**
59
+ * Callback fired when column header is clicked. Parameters: `(event, { id })`
60
+ */
61
+ onRequestSort?: (
62
+ event: React.SyntheticEvent,
63
+ param: { id: TableColHeaderOwnProps['id'] }
64
+ ) => void
65
+ /**
66
+ * The column header scope attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
67
+ */
41
68
  scope?: 'row' | 'col' | 'rowgroup' | 'colgroup' | 'auto'
42
- children?: React.ReactNode | ((...args: any[]) => React.ReactNode)
69
+ children?: React.ReactNode | (() => React.ReactNode)
43
70
  }
44
71
 
45
72
  type PropKeys = keyof TableColHeaderOwnProps
@@ -56,37 +83,13 @@ type TableColHeaderProps = TableColHeaderOwnProps &
56
83
  type TableColHeaderStyle = ComponentStyle<'colHeader' | 'button'>
57
84
 
58
85
  const propTypes: PropValidators<PropKeys> = {
59
- /**
60
- * A unique id for this column. The `id` is also used as option in combobox,
61
- * when sortable table is in stacked layout,
62
- * and no `stackedSortByLabel` is provided.
63
- */
64
86
  id: PropTypes.string.isRequired,
65
- /**
66
- * A custom string to display as option text in the combobox (instead of
67
- * using the `id` prop), when sortable table is in stacked layout.
68
- */
69
87
  stackedSortByLabel: PropTypes.string,
70
88
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
71
- /**
72
- * Control the width of column.
73
- */
74
89
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
75
- /**
76
- * Control the text alignment in column header
77
- */
78
90
  textAlign: PropTypes.oneOf(['start', 'center', 'end']),
79
- /**
80
- * The string of sorting direction
81
- */
82
91
  sortDirection: PropTypes.oneOf(['none', 'ascending', 'descending']),
83
- /**
84
- * Callback fired when column header is clicked. Parameters: `(event, { id })`
85
- */
86
92
  onRequestSort: PropTypes.func,
87
- /**
88
- * The column header scope attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
89
- */
90
93
  scope: PropTypes.oneOf(['row', 'col', 'rowgroup', 'colgroup', 'auto'])
91
94
  }
92
95
 
@@ -23,7 +23,7 @@
23
23
  */
24
24
 
25
25
  /** @jsx jsx */
26
- import { Component, Children } from 'react'
26
+ import React, { Component, Children } from 'react'
27
27
 
28
28
  import {
29
29
  omitProps,
@@ -43,7 +43,9 @@ import generateComponentTheme from './theme'
43
43
 
44
44
  import { Row } from '../Row'
45
45
  import { ColHeader } from '../ColHeader'
46
+ import type { TableColHeaderProps } from '../ColHeader/props'
46
47
  import type { TableHeadProps } from './props'
48
+ import type { TableRowProps } from '../Row/props'
47
49
  import { allowedProps, propTypes } from './props'
48
50
 
49
51
  /**
@@ -51,6 +53,7 @@ import { allowedProps, propTypes } from './props'
51
53
  parent: Table
52
54
  id: Table.Head
53
55
  ---
56
+ @tsProps
54
57
  **/
55
58
  @withStyle(generateStyle, generateComponentTheme)
56
59
  class Head extends Component<TableHeadProps> {
@@ -64,16 +67,23 @@ class Head extends Component<TableHeadProps> {
64
67
  }
65
68
 
66
69
  get isSortable() {
67
- const [row] = Children.toArray(this.props.children)
70
+ const [row] = Children.toArray(
71
+ this.props.children
72
+ ) as React.ComponentElement<TableRowProps, Row>[]
68
73
  let sortable = false
69
74
 
70
75
  if (row) {
71
- // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
72
- Children.forEach(row.props.children, (colHeader) => {
73
- if (matchComponentTypes(colHeader, [ColHeader])) {
74
- if (colHeader.props.onRequestSort) sortable = true
76
+ Children.forEach(
77
+ row.props.children as React.ComponentElement<
78
+ TableColHeaderProps,
79
+ ColHeader
80
+ >[],
81
+ (colHeader) => {
82
+ if (matchComponentTypes(colHeader, [ColHeader])) {
83
+ if (colHeader.props.onRequestSort) sortable = true
84
+ }
75
85
  }
76
- })
86
+ )
77
87
  }
78
88
 
79
89
  return sortable
@@ -95,30 +105,38 @@ class Head extends Component<TableHeadProps> {
95
105
 
96
106
  renderSelect() {
97
107
  const { children, renderSortLabel } = this.props
98
- const [row] = Children.toArray(children)
108
+ const [row] = Children.toArray(children) as React.ComponentElement<
109
+ TableRowProps,
110
+ Row
111
+ >[]
99
112
 
100
113
  if (!matchComponentTypes(row, [Row])) {
101
114
  return null
102
115
  }
103
- // @ts-expect-error ts-migrate(7034) FIXME: Variable 'options' implicitly has type 'any[]' in ... Remove this comment to see the full error message
104
- const options = []
105
- const clickHandlers = {}
106
- // @ts-expect-error ts-migrate(7034) FIXME: Variable 'selectedOption' implicitly has type 'any... Remove this comment to see the full error message
107
- let selectedOption = undefined
116
+ const options: {
117
+ id: TableColHeaderProps['id']
118
+ label:
119
+ | TableColHeaderProps['stackedSortByLabel']
120
+ | TableColHeaderProps['id']
121
+ }[] = []
122
+ const clickHandlers: Record<
123
+ TableColHeaderProps['id'],
124
+ TableColHeaderProps['onRequestSort']
125
+ > = {}
126
+ let selectedOption: TableColHeaderProps['id'] | undefined
108
127
  let count = 0
109
128
 
110
- // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
111
129
  Children.forEach(row.props.children, (colHeader) => {
112
130
  count += 1
113
131
  if (matchComponentTypes(colHeader, [ColHeader])) {
114
- const { id, stackedSortByLabel, sortDirection, onRequestSort } =
115
- colHeader.props
132
+ const { id, stackedSortByLabel, sortDirection, onRequestSort } = (
133
+ colHeader as ColHeader
134
+ ).props
116
135
 
117
136
  const label = stackedSortByLabel || id
118
137
 
119
138
  if (onRequestSort) {
120
139
  options.push({ id, label })
121
- // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
122
140
  clickHandlers[id] = onRequestSort
123
141
  if (sortDirection !== 'none') {
124
142
  selectedOption = id
@@ -130,8 +148,9 @@ class Head extends Component<TableHeadProps> {
130
148
  return null
131
149
  }
132
150
  const handleSelect: SimpleSelectProps['onChange'] = (event, { value }) => {
133
- // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
134
- clickHandlers[value](event, { id: value })
151
+ if (value && typeof clickHandlers[value] === 'function') {
152
+ clickHandlers[value]!(event, { id: `${value}` })
153
+ }
135
154
  }
136
155
  return (
137
156
  <div role="rowgroup">
@@ -149,14 +168,12 @@ class Head extends Component<TableHeadProps> {
149
168
  value={selectedOption}
150
169
  onChange={handleSelect}
151
170
  >
152
- {/* @ts-expect-error ts-migrate(7005) FIXME: Variable 'options' implicitly has an 'any[]' type. */}
153
171
  {options.map(({ id, label }) => (
154
172
  <SimpleSelect.Option
155
173
  id={id}
156
174
  key={id}
157
175
  value={id}
158
176
  renderBeforeLabel={
159
- // @ts-expect-error ts-migrate(7005) FIXME: Variable 'selectedOption' implicitly has an 'any' ... Remove this comment to see the full error message
160
177
  id === selectedOption
161
178
  ? IconCheckLine
162
179
  : () => <IconCheckLine style={{ color: 'transparent' }} />
@@ -38,7 +38,10 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
38
38
 
39
39
  type TableHeadOwnProps = {
40
40
  isStacked?: boolean
41
- renderSortLabel?: React.ReactNode | ((...args: any[]) => any)
41
+ renderSortLabel?: React.ReactNode | (() => React.ReactNode)
42
+ /**
43
+ * `Table.Row`
44
+ */
42
45
  children?: React.ReactNode
43
46
  }
44
47
  type PropKeys = keyof TableHeadOwnProps
@@ -52,9 +55,6 @@ type TableHeadProps = TableHeadOwnProps &
52
55
  type TableHeadStyle = ComponentStyle<'head'>
53
56
 
54
57
  const propTypes: PropValidators<PropKeys> = {
55
- /**
56
- * `Table.Row`
57
- */
58
58
  children: ChildrenPropTypes.oneOf([Row]),
59
59
  isStacked: PropTypes.bool,
60
60
  renderSortLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
@@ -48,6 +48,7 @@ import { allowedProps, propTypes } from './props'
48
48
  parent: Table
49
49
  id: Table.Row
50
50
  ---
51
+ @tsProps
51
52
  **/
52
53
  @withStyle(generateStyle, generateComponentTheme)
53
54
  class Row extends Component<TableRowProps> {
@@ -86,15 +87,13 @@ class Row extends Component<TableRowProps> {
86
87
  }
87
88
  if (matchComponentTypes(child, [RowHeader])) {
88
89
  return safeCloneElement(child as ReactElement, {
89
- // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
90
- key: child.props.name,
90
+ key: (child as RowHeader).props.name,
91
91
  isStacked
92
92
  })
93
93
  }
94
94
  if (matchComponentTypes(child, [Cell])) {
95
95
  return safeCloneElement(child as ReactElement, {
96
- // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
97
- key: child.props.name,
96
+ key: (child as Cell).props.name,
98
97
  isStacked,
99
98
  header: headers && headers[index]
100
99
  })
@@ -30,6 +30,7 @@ import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
30
30
  import { ColHeader } from '../ColHeader'
31
31
  import { RowHeader } from '../RowHeader'
32
32
  import { Cell } from '../Cell'
33
+ import type { TableCellProps } from '../Cell/props'
33
34
 
34
35
  import type {
35
36
  OtherHTMLAttributes,
@@ -41,7 +42,10 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
41
42
  type TableRowOwnProps = {
42
43
  hover?: boolean
43
44
  isStacked?: boolean
44
- headers?: (React.ReactNode | ((...args: any[]) => any))[]
45
+ headers?: TableCellProps['header'][]
46
+ /**
47
+ * `Table.ColHeader`, `Table.RowHeader` or `Table.Cell`
48
+ */
45
49
  children?: React.ReactNode
46
50
  }
47
51
 
@@ -56,9 +60,6 @@ type TableRowProps = TableRowOwnProps &
56
60
  type TableRowStyle = ComponentStyle<'row'>
57
61
 
58
62
  const propTypes: PropValidators<PropKeys> = {
59
- /**
60
- * `Table.ColHeader`, `Table.RowHeader` or `Table.Cell`
61
- */
62
63
  children: ChildrenPropTypes.oneOf([ColHeader, RowHeader, Cell]),
63
64
  hover: PropTypes.bool,
64
65
  isStacked: PropTypes.bool,
@@ -40,6 +40,7 @@ import { allowedProps, propTypes } from './props'
40
40
  parent: Table
41
41
  id: Table.RowHeader
42
42
  ---
43
+ @tsProps
43
44
  **/
44
45
  @withStyle(generateStyle, generateComponentTheme)
45
46
  class RowHeader extends Component<TableRowHeaderProps> {
@@ -34,8 +34,11 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
34
34
 
35
35
  type TableRowHeaderOwnProps = {
36
36
  isStacked?: boolean
37
+ /**
38
+ * Control the text alignment in row header
39
+ */
37
40
  textAlign?: 'start' | 'center' | 'end'
38
- children?: React.ReactNode | ((...args: any[]) => React.ReactNode)
41
+ children?: React.ReactNode | (() => React.ReactNode)
39
42
  }
40
43
 
41
44
  type PropKeys = keyof TableRowHeaderOwnProps
@@ -51,9 +54,6 @@ type TableRowHeaderStyle = ComponentStyle<'rowHeader'>
51
54
  const propTypes: PropValidators<PropKeys> = {
52
55
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
53
56
  isStacked: PropTypes.bool,
54
- /**
55
- * Control the text alignment in row header
56
- */
57
57
  textAlign: PropTypes.oneOf(['start', 'center', 'end'])
58
58
  }
59
59