@instructure/ui-table 8.14.1-snapshot.6 → 8.14.1-snapshot.69

package/src/Table/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component, Children, ReactElement } from 'react'
+import { Component, Children } from 'react'
 
 import {
   matchComponentTypes,
@@ -44,13 +44,24 @@ import { Row } from './Row'
 import { ColHeader } from './ColHeader'
 import { RowHeader } from './RowHeader'
 import { Cell } from './Cell'
-import type { TableProps } from './props'
+
+import type {
+  TableProps,
+  HeadChild,
+  BodyChild,
+  RowChild,
+  ColHeaderChild,
+  RowHeaderChild,
+  CellChild
+} from './props'
+
 import { allowedProps, propTypes } from './props'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class Table extends Component<TableProps> {
@@ -94,28 +105,29 @@ class Table extends Component<TableProps> {
 
   getHeaders() {
     const { children } = this.props
-    const [head] = Children.toArray(children)
+    const [head] = Children.toArray(children) as HeadChild[]
 
-    if (matchComponentTypes(head, [Head])) {
-      // @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<HeadChild>(head, [Head])) {
       const [row] = Children.toArray(head.props.children)
 
-      if (matchComponentTypes(row, [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
-        return Children.map(row.props.children, (colHeader) => {
-          return matchComponentTypes(colHeader, [ColHeader])
-            ? colHeader.props.children
-            : null
-        })
+      if (matchComponentTypes<RowChild>(row, [Row])) {
+        return Children.map(
+          row.props.children as (ColHeaderChild | RowHeaderChild | CellChild)[],
+          (colHeader) => {
+            return matchComponentTypes<ColHeaderChild>(colHeader, [ColHeader])
+              ? colHeader.props.children
+              : undefined
+          }
+        )
       }
     }
-    return null
+    return undefined
   }
 
   render() {
     const { margin, layout, caption, children, hover, styles } = this.props
     const isStacked = layout === 'stacked'
-    const headers = isStacked ? this.getHeaders() : null
+    const headers = isStacked ? this.getHeaders() : undefined
 
     return (
       <View
@@ -136,16 +148,14 @@ class Table extends Component<TableProps> {
           </caption>
         )}
         {Children.map(children, (child) => {
-          if (matchComponentTypes(child, [Head])) {
-            return safeCloneElement(child as ReactElement, {
-              // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
+          if (matchComponentTypes<HeadChild>(child, [Head])) {
+            return safeCloneElement(child, {
               key: child.props.name,
               isStacked
             })
           }
-          if (matchComponentTypes(child, [Body])) {
-            return safeCloneElement(child as ReactElement, {
-              // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
+          if (matchComponentTypes<BodyChild>(child, [Body])) {
+            return safeCloneElement(child, {
               key: child.props.name,
               isStacked,
               hover,

package/src/Table/props.ts

@@ -27,9 +27,6 @@ import PropTypes from 'prop-types'
 import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
 import { ThemeablePropTypes } from '@instructure/emotion'
 
-import { Head } from './Head'
-import { Body } from './Body'
-
 import type {
   Spacing,
   WithStyleProps,
@@ -41,12 +38,55 @@ import type {
   TableTheme
 } from '@instructure/shared-types'
 
+import { Head } from './Head'
+import type { TableHeadProps } from './Head/props'
+import { Body } from './Body'
+import type { TableBodyProps } from './Body/props'
+import { Row } from './Row'
+import type { TableRowProps } from './Row/props'
+import { ColHeader } from './ColHeader'
+import type { TableColHeaderProps } from './ColHeader/props'
+import { RowHeader } from './RowHeader'
+import type { TableRowHeaderProps } from './RowHeader/props'
+import { Cell } from './Cell'
+import type { TableCellProps } from './Cell/props'
+
+type HeadChild = React.ComponentElement<TableHeadProps, Head>
+type BodyChild = React.ComponentElement<TableBodyProps, Body>
+type RowChild = React.ComponentElement<TableRowProps, Row>
+type ColHeaderChild = React.ComponentElement<TableColHeaderProps, ColHeader>
+type RowHeaderChild = React.ComponentElement<TableRowHeaderProps, RowHeader>
+type CellChild = React.ComponentElement<TableCellProps, Cell>
+
 type TableOwnProps = {
-  caption: React.ReactNode
+  /**
+   * Provide a screen reader friendly description. Anything passed to this
+   * prop will be wrapped by `<ScreenReaderContent>` when it is rendered.
+   */
+  caption?: React.ReactNode
+  /**
+   * 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?: Spacing
+  /**
+   * Provide a reference to the underlying html element
+   */
   elementRef?: (element: Element | null) => void
+  /**
+   * Highlight each row on hover
+   */
   hover?: boolean
+  /**
+   * `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?: 'auto' | 'fixed' | 'stacked'
+  /**
+   * Build table via `Table.Head` and `Table.Body`
+   */
   children?: React.ReactNode
 }
 
@@ -61,34 +101,11 @@ type TableProps = TableOwnProps &
 type TableStyle = ComponentStyle<'table'>
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * Provide a screen reader friendly description. Anything passed to this
-   * prop will be wrapped by `<ScreenReaderContent>` when it is rendered.
-   */
   caption: PropTypes.node.isRequired,
-  /**
-   * Build table via `Table.Head` and `Table.Body`
-   */
   children: ChildrenPropTypes.oneOf([Head, 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: ThemeablePropTypes.spacing,
-  /**
-   * Provide a reference to the underlying html element
-   */
   elementRef: PropTypes.func,
-  /**
-   * Highlight each row on hover
-   */
   hover: PropTypes.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.oneOf(['auto', 'fixed', 'stacked'])
 }
 
@@ -101,5 +118,15 @@ const allowedProps: AllowedPropKeys = [
   'layout'
 ]
 
-export type { TableProps, TableStyle }
+export type {
+  TableProps,
+  TableStyle,
+  // children
+  HeadChild,
+  BodyChild,
+  RowChild,
+  ColHeaderChild,
+  RowHeaderChild,
+  CellChild
+}
 export { propTypes, allowedProps }