@instructure/ui-table 8.14.1-snapshot.7 → 8.15.1-snapshot.2

package/lib/Table/props.js

@@ -41,39 +41,11 @@ var _Body = require("./Body");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * Provide a screen reader friendly description. Anything passed to this
-   * prop will be wrapped by `<ScreenReaderContent>` when it is rendered.
-   */
   caption: _propTypes.default.node.isRequired,
-
-  /**
-   * Build table via `Table.Head` and `Table.Body`
-   */
   children: _Children.Children.oneOf([_Head.Head, _Body.Body]),
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: _emotion.ThemeablePropTypes.spacing,
-
-  /**
-   * Provide a reference to the underlying html element
-   */
   elementRef: _propTypes.default.func,
-
-  /**
-   * Highlight each row on hover
-   */
   hover: _propTypes.default.bool,
-
-  /**
-   * `auto` lets the browser determine table column widths based on cell content,
-   * while `fixed` forces columns of equal width. `stacked` renders table in one
-   * column to be more readable on narrow screens
-   */
   layout: _propTypes.default.oneOf(['auto', 'fixed', 'stacked'])
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "8.14.1-snapshot.7+845d7ec6c",
+  "version": "8.15.1-snapshot.2+00f55c738",
   "description": "A styled HTML table component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,24 +24,24 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-color-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-test-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-themes": "8.14.1-snapshot.7+845d7ec6c"
+    "@instructure/ui-babel-preset": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-color-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-test-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-themes": "8.15.1-snapshot.2+00f55c738"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/emotion": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/shared-types": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-a11y-content": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-icons": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-prop-types": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-react-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-simple-select": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-testable": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-view": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/console": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/emotion": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/shared-types": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-a11y-content": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-icons": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-prop-types": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-react-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-simple-select": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-testable": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-view": "8.15.1-snapshot.2+00f55c738",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -51,5 +51,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "845d7ec6c159d8946b22caa9d8fb3d0175167a6f"
+  "gitHead": "00f55c7382e82209ea553c107951c4356ba202bf"
 }

package/src/Table/Body/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component, Children, ReactElement } from 'react'
+import { Component, Children } from 'react'
 
 import {
   matchComponentTypes,
@@ -37,6 +37,7 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import { Row } from '../Row'
 import type { TableBodyProps } from './props'
+import type { RowChild } from '../props'
 import { allowedProps, propTypes } from './props'
 
 /**
@@ -44,6 +45,7 @@ import { allowedProps, propTypes } from './props'
 parent: Table
 id: Table.Body
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class Body extends Component<TableBodyProps> {
@@ -60,8 +62,7 @@ class Body extends Component<TableBodyProps> {
     this.props.makeStyles?.()
   }
 
-  // @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
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate() {
     this.props.makeStyles?.()
   }
 
@@ -75,10 +76,9 @@ class Body extends Component<TableBodyProps> {
         css={styles?.body}
         role={isStacked ? 'rowgroup' : undefined}
       >
-        {Children.map(children, (child) =>
+        {Children.map(children as RowChild[], (child) =>
           matchComponentTypes(child, [Row])
-            ? safeCloneElement(child as ReactElement, {
-                // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
+            ? safeCloneElement(child, {
                 key: child.props.name,
                 hover,
                 isStacked,

package/src/Table/Body/props.ts

@@ -27,6 +27,7 @@ import PropTypes from 'prop-types'
 import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
 
 import { Row } from '../Row'
+import type { TableRowProps } from '../Row/props'
 
 import type {
   OtherHTMLAttributes,
@@ -38,7 +39,10 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 type TableBodyOwnProps = {
   hover?: boolean
   isStacked?: boolean
-  headers?: (React.ReactNode | ((...args: any[]) => any))[]
+  headers?: TableRowProps['headers']
+  /**
+   * `Table.Row`
+   */
   children?: React.ReactNode
 }
 
@@ -53,9 +57,6 @@ type TableBodyProps = TableBodyOwnProps &
 type TableBodyStyle = ComponentStyle<'body'>
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * `Table.Row`
-   */
   children: ChildrenPropTypes.oneOf([Row]),
   hover: PropTypes.bool,
   isStacked: PropTypes.bool,

package/src/Table/Cell/index.tsx

@@ -40,6 +40,7 @@ import { allowedProps, propTypes } from './props'
 parent: Table
 id: Table.Cell
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class Cell extends Component<TableCellProps> {

package/src/Table/Cell/props.ts

@@ -34,9 +34,12 @@ import type {
 
 type TableCellOwnProps = {
   isStacked?: boolean
-  header?: React.ReactNode | ((...args: any[]) => any)
+  header?: React.ReactNode | (() => React.ReactNode)
+  /**
+   * Control the text alignment in cell
+   */
   textAlign?: 'start' | 'center' | 'end'
-  children?: React.ReactNode | ((...args: any[]) => React.ReactNode)
+  children?: React.ReactNode | (() => React.ReactNode)
 }
 
 type PropKeys = keyof TableCellOwnProps
@@ -53,9 +56,6 @@ const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   isStacked: PropTypes.bool,
   header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  /**
-   * Control the text alignment in cell
-   */
   textAlign: PropTypes.oneOf(['start', 'center', 'end'])
 }
 

package/src/Table/ColHeader/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component } from 'react'
+import React, { Component } from 'react'
 
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
 import {
@@ -43,6 +43,7 @@ import { allowedProps, propTypes } from './props'
 parent: Table
 id: Table.ColHeader
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class ColHeader extends Component<TableColHeaderProps> {
@@ -66,14 +67,10 @@ class ColHeader extends Component<TableColHeaderProps> {
     this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleClick = (event) => {
+  handleClick = (event: React.SyntheticEvent) => {
     const { id, onRequestSort } = this.props
 
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    onRequestSort(event, {
-      id
-    })
+    onRequestSort && onRequestSort(event, { id })
   }
 
   renderSortArrow() {
@@ -93,14 +90,8 @@ class ColHeader extends Component<TableColHeaderProps> {
   }
 
   render() {
-    const {
-      onRequestSort,
-      width,
-      children,
-      sortDirection,
-      scope,
-      styles
-    } = this.props
+    const { onRequestSort, width, children, sortDirection, scope, styles } =
+      this.props
 
     return (
       <th

package/src/Table/ColHeader/props.ts

@@ -32,14 +32,41 @@ import type {
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type TableColHeaderOwnProps = {
+  /**
+   * A unique id for this column. The `id` is also used as option in combobox,
+   * when sortable table is in stacked layout,
+   * and no `stackedSortByLabel` is provided.
+   */
   id: string
+  /**
+   * A custom string to display as option text in the combobox (instead of
+   * using the `id` prop), when sortable table is in stacked layout.
+   */
   stackedSortByLabel?: string
+  /**
+   * Control the width of column.
+   */
   width?: string | number
+  /**
+   * Control the text alignment in column header
+   */
   textAlign?: 'start' | 'center' | 'end'
+  /**
+   * The string of sorting direction
+   */
   sortDirection?: 'none' | 'ascending' | 'descending'
-  onRequestSort?: (...args: any[]) => any
+  /**
+   * Callback fired when column header is clicked. Parameters: `(event, { id })`
+   */
+  onRequestSort?: (
+    event: React.SyntheticEvent,
+    param: { id: TableColHeaderOwnProps['id'] }
+  ) => void
+  /**
+   * The column header scope attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
+   */
   scope?: 'row' | 'col' | 'rowgroup' | 'colgroup' | 'auto'
-  children?: React.ReactNode | ((...args: any[]) => React.ReactNode)
+  children?: React.ReactNode | (() => React.ReactNode)
 }
 
 type PropKeys = keyof TableColHeaderOwnProps
@@ -56,37 +83,13 @@ type TableColHeaderProps = TableColHeaderOwnProps &
 type TableColHeaderStyle = ComponentStyle<'colHeader' | 'button'>
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * A unique id for this column. The `id` is also used as option in combobox,
-   * when sortable table is in stacked layout,
-   * and no `stackedSortByLabel` is provided.
-   */
   id: PropTypes.string.isRequired,
-  /**
-   * A custom string to display as option text in the combobox (instead of
-   * using the `id` prop), when sortable table is in stacked layout.
-   */
   stackedSortByLabel: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  /**
-   * Control the width of column.
-   */
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Control the text alignment in column header
-   */
   textAlign: PropTypes.oneOf(['start', 'center', 'end']),
-  /**
-   * The string of sorting direction
-   */
   sortDirection: PropTypes.oneOf(['none', 'ascending', 'descending']),
-  /**
-   * Callback fired when column header is clicked. Parameters: `(event, { id })`
-   */
   onRequestSort: PropTypes.func,
-  /**
-   * The column header scope attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
-   */
   scope: PropTypes.oneOf(['row', 'col', 'rowgroup', 'colgroup', 'auto'])
 }
 

package/src/Table/Head/index.tsx

@@ -31,6 +31,7 @@ import {
   callRenderProp
 } from '@instructure/ui-react-utils'
 import { SimpleSelect } from '@instructure/ui-simple-select'
+import type { SimpleSelectProps } from '@instructure/ui-simple-select'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 import { IconCheckLine } from '@instructure/ui-icons'
 import { warn } from '@instructure/console'
@@ -42,7 +43,9 @@ import generateComponentTheme from './theme'
 
 import { Row } from '../Row'
 import { ColHeader } from '../ColHeader'
+import type { TableColHeaderProps } from '../ColHeader/props'
 import type { TableHeadProps } from './props'
+import type { ColHeaderChild, RowChild } from '../props'
 import { allowedProps, propTypes } from './props'
 
 /**
@@ -50,6 +53,7 @@ import { allowedProps, propTypes } from './props'
 parent: Table
 id: Table.Head
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class Head extends Component<TableHeadProps> {
@@ -63,16 +67,18 @@ class Head extends Component<TableHeadProps> {
   }
 
   get isSortable() {
-    const [row] = Children.toArray(this.props.children)
+    const [row] = Children.toArray(this.props.children) as RowChild[]
     let sortable = false
 
     if (row) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
-      Children.forEach(row.props.children, (colHeader) => {
-        if (matchComponentTypes(colHeader, [ColHeader])) {
-          if (colHeader.props.onRequestSort) sortable = true
+      Children.forEach(
+        row.props.children as ColHeaderChild[],
+        (colHeader) => {
+          if (matchComponentTypes<ColHeaderChild>(colHeader, [ColHeader])) {
+            if (colHeader.props.onRequestSort) sortable = true
+          }
         }
-      })
+      )
     }
 
     return sortable
@@ -94,34 +100,35 @@ class Head extends Component<TableHeadProps> {
 
   renderSelect() {
     const { children, renderSortLabel } = this.props
-    const [row] = Children.toArray(children)
+    const [row] = Children.toArray(children) as RowChild[]
 
-    if (!matchComponentTypes(row, [Row])) {
+    if (!matchComponentTypes<RowChild>(row, [Row])) {
       return null
     }
-    // @ts-expect-error ts-migrate(7034) FIXME: Variable 'options' implicitly has type 'any[]' in ... Remove this comment to see the full error message
-    const options = []
-    const clickHandlers = {}
-    // @ts-expect-error ts-migrate(7034) FIXME: Variable 'selectedOption' implicitly has type 'any... Remove this comment to see the full error message
-    let selectedOption = undefined
+    const options: {
+      id: TableColHeaderProps['id']
+      label:
+        | TableColHeaderProps['stackedSortByLabel']
+        | TableColHeaderProps['id']
+    }[] = []
+    const clickHandlers: Record<
+      TableColHeaderProps['id'],
+      TableColHeaderProps['onRequestSort']
+    > = {}
+    let selectedOption: TableColHeaderProps['id'] | undefined
     let count = 0
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
     Children.forEach(row.props.children, (colHeader) => {
       count += 1
-      if (matchComponentTypes(colHeader, [ColHeader])) {
-        const {
-          id,
-          stackedSortByLabel,
-          sortDirection,
-          onRequestSort
-        } = colHeader.props
+      if (matchComponentTypes<ColHeaderChild>(colHeader, [ColHeader])) {
+        const { id, stackedSortByLabel, sortDirection, onRequestSort } = (
+          colHeader
+        ).props
 
         const label = stackedSortByLabel || id
 
         if (onRequestSort) {
           options.push({ id, label })
-          // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
           clickHandlers[id] = onRequestSort
           if (sortDirection !== 'none') {
             selectedOption = id
@@ -132,10 +139,10 @@ class Head extends Component<TableHeadProps> {
     if (!options.length) {
       return null
     }
-    // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-    const handleSelect = (event, { value }) => {
-      // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-      clickHandlers[value](event, { id: value })
+    const handleSelect: SimpleSelectProps['onChange'] = (event, { value }) => {
+      if (value && typeof clickHandlers[value] === 'function') {
+        clickHandlers[value]!(event, { id: `${value}` })
+      }
     }
     return (
       <div role="rowgroup">
@@ -153,14 +160,12 @@ class Head extends Component<TableHeadProps> {
               value={selectedOption}
               onChange={handleSelect}
             >
-              {/* @ts-expect-error ts-migrate(7005) FIXME: Variable 'options' implicitly has an 'any[]' type. */}
               {options.map(({ id, label }) => (
                 <SimpleSelect.Option
                   id={id}
                   key={id}
                   value={id}
                   renderBeforeLabel={
-                    // @ts-expect-error ts-migrate(7005) FIXME: Variable 'selectedOption' implicitly has an 'any' ... Remove this comment to see the full error message
                     id === selectedOption
                       ? IconCheckLine
                       : () => <IconCheckLine style={{ color: 'transparent' }} />
@@ -184,7 +189,7 @@ class Head extends Component<TableHeadProps> {
     ) : (
       <thead {...omitProps(this.props, Head.allowedProps)} css={styles?.head}>
         {Children.map(children, (child) =>
-          matchComponentTypes(child, [Row]) ? child : null
+          matchComponentTypes<RowChild>(child, [Row]) ? child : null
         )}
       </thead>
     )

package/src/Table/Head/props.ts

@@ -38,7 +38,10 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type TableHeadOwnProps = {
   isStacked?: boolean
-  renderSortLabel?: React.ReactNode | ((...args: any[]) => any)
+  renderSortLabel?: React.ReactNode | (() => React.ReactNode)
+  /**
+   * `Table.Row`
+   */
   children?: React.ReactNode
 }
 type PropKeys = keyof TableHeadOwnProps
@@ -52,9 +55,6 @@ type TableHeadProps = TableHeadOwnProps &
 type TableHeadStyle = ComponentStyle<'head'>
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * `Table.Row`
-   */
   children: ChildrenPropTypes.oneOf([Row]),
   isStacked: PropTypes.bool,
   renderSortLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])

package/src/Table/Row/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component, Children, ReactElement } from 'react'
+import { Component, Children } from 'react'
 
 import {
   omitProps,
@@ -41,6 +41,7 @@ import { ColHeader } from '../ColHeader'
 import { RowHeader } from '../RowHeader'
 import { Cell } from '../Cell'
 import type { TableRowProps } from './props'
+import type { ColHeaderChild, RowHeaderChild, CellChild } from '../props'
 import { allowedProps, propTypes } from './props'
 
 /**
@@ -48,6 +49,7 @@ import { allowedProps, propTypes } from './props'
 parent: Table
 id: Table.Row
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class Row extends Component<TableRowProps> {
@@ -78,22 +80,26 @@ class Row extends Component<TableRowProps> {
         css={styles?.row}
         role={isStacked ? 'row' : undefined}
       >
-        {Children.toArray(children)
+        {(
+          Children.toArray(children) as (
+            | ColHeaderChild
+            | RowHeaderChild
+            | CellChild
+          )[]
+        )
           .filter(Boolean)
           .map((child, index) => {
-            if (matchComponentTypes(child, [ColHeader])) {
+            if (matchComponentTypes<ColHeaderChild>(child, [ColHeader])) {
               return child
             }
-            if (matchComponentTypes(child, [RowHeader])) {
-              return safeCloneElement(child as ReactElement, {
-                // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
+            if (matchComponentTypes<RowHeaderChild>(child, [RowHeader])) {
+              return safeCloneElement(child, {
                 key: child.props.name,
                 isStacked
               })
             }
-            if (matchComponentTypes(child, [Cell])) {
-              return safeCloneElement(child as ReactElement, {
-                // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
+            if (matchComponentTypes<CellChild>(child, [Cell])) {
+              return safeCloneElement(child, {
                 key: child.props.name,
                 isStacked,
                 header: headers && headers[index]

package/src/Table/Row/props.ts

@@ -30,6 +30,7 @@ import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
 import { ColHeader } from '../ColHeader'
 import { RowHeader } from '../RowHeader'
 import { Cell } from '../Cell'
+import type { TableCellProps } from '../Cell/props'
 
 import type {
   OtherHTMLAttributes,
@@ -41,7 +42,10 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 type TableRowOwnProps = {
   hover?: boolean
   isStacked?: boolean
-  headers?: (React.ReactNode | ((...args: any[]) => any))[]
+  headers?: TableCellProps['header'][]
+  /**
+   * `Table.ColHeader`, `Table.RowHeader` or `Table.Cell`
+   */
   children?: React.ReactNode
 }
 
@@ -56,9 +60,6 @@ type TableRowProps = TableRowOwnProps &
 type TableRowStyle = ComponentStyle<'row'>
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * `Table.ColHeader`, `Table.RowHeader` or `Table.Cell`
-   */
   children: ChildrenPropTypes.oneOf([ColHeader, RowHeader, Cell]),
   hover: PropTypes.bool,
   isStacked: PropTypes.bool,

package/src/Table/RowHeader/index.tsx

@@ -40,6 +40,7 @@ import { allowedProps, propTypes } from './props'
 parent: Table
 id: Table.RowHeader
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class RowHeader extends Component<TableRowHeaderProps> {

package/src/Table/RowHeader/props.ts

@@ -34,8 +34,11 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type TableRowHeaderOwnProps = {
   isStacked?: boolean
+  /**
+   * Control the text alignment in row header
+   */
   textAlign?: 'start' | 'center' | 'end'
-  children?: React.ReactNode | ((...args: any[]) => React.ReactNode)
+  children?: React.ReactNode | (() => React.ReactNode)
 }
 
 type PropKeys = keyof TableRowHeaderOwnProps
@@ -51,9 +54,6 @@ type TableRowHeaderStyle = ComponentStyle<'rowHeader'>
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   isStacked: PropTypes.bool,
-  /**
-   * Control the text alignment in row header
-   */
   textAlign: PropTypes.oneOf(['start', 'center', 'end'])
 }