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

package/src/Table/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component, Children, ReactElement } from 'react'
+import React, { Component, Children, ReactElement } from 'react'
 
 import {
   matchComponentTypes,
@@ -45,12 +45,15 @@ import { ColHeader } from './ColHeader'
 import { RowHeader } from './RowHeader'
 import { Cell } from './Cell'
 import type { TableProps } from './props'
+import type { TableHeadProps } from './Head/props'
+import type { TableRowProps } from './Row/props'
 import { allowedProps, propTypes } from './props'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class Table extends Component<TableProps> {
@@ -94,17 +97,20 @@ class Table extends Component<TableProps> {
 
   getHeaders() {
     const { children } = this.props
-    const [head] = Children.toArray(children)
+    const [head] = Children.toArray(children) as React.ComponentElement<
+      TableHeadProps,
+      Head
+    >[]
 
     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
-      const [row] = Children.toArray(head.props.children)
+      const [row] = Children.toArray(
+        head.props.children
+      ) as React.ComponentElement<TableRowProps, Row>[]
 
       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
+            ? (colHeader as ColHeader).props.children
             : null
         })
       }
@@ -138,15 +144,13 @@ class Table extends Component<TableProps> {
         {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'.
-              key: child.props.name,
+              key: (child as Head).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'.
-              key: child.props.name,
+              key: (child as Body).props.name,
               isStacked,
               hover,
               headers

package/src/Table/props.ts

@@ -42,11 +42,34 @@ import type {
 } from '@instructure/shared-types'
 
 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 +84,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'])
 }