@instructure/ui-table 10.2.1-snapshot-3 → 10.2.1-snapshot-11

package/src/Table/__new-tests__/Table.test.tsx

@@ -24,7 +24,7 @@
 
 import React from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
-import { vi } from 'vitest'
+import { MockInstance, vi } from 'vitest'
 import { userEvent } from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 
@@ -36,7 +36,7 @@ import { runAxeCheck } from '@instructure/ui-axe-check'
 // see https://github.com/vitest-dev/eslint-plugin-vitest/issues/511
 // eslint-disable-next-line vitest/valid-describe-callback
 describe('<Table />', async () => {
-  let consoleErrorMock: any
+  let consoleErrorMock: MockInstance<typeof console.error>
 
   beforeEach(() => {
     // Mocking console to prevent test output pollution
@@ -169,6 +169,45 @@ describe('<Table />', async () => {
     expect(stackedTable).not.toHaveTextContent('Foo')
   })
 
+  it('does not crash for invalid children', async () => {
+    render(
+      <Table caption="Test table" layout="stacked">
+        test1
+        <span>test</span>
+        {/* @ts-ignore error is normal here */}
+        <Table.Head>
+          <span>test</span>
+          test2
+          {/* @ts-ignore error is normal here */}
+          <Table.Row>
+            test3
+            <span>test</span>
+            <Table.Cell>Foo</Table.Cell>
+          </Table.Row>
+          test4
+          <span>test</span>
+        </Table.Head>
+        test5
+        <Table.Body>
+          test
+          <span>test</span>
+          {/* @ts-ignore error is normal here */}
+          <Table.Row>
+            test
+            <span>test</span>
+            <Table.Cell>Foo</Table.Cell>
+            test
+            <span>test</span>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    )
+    const table = screen.getByRole('table')
+
+    expect(table).toBeInTheDocument()
+    expect(table).toHaveTextContent('Foo')
+  })
+
   // see https://github.com/vitest-dev/eslint-plugin-vitest/issues/511
   // eslint-disable-next-line vitest/valid-describe-callback
   describe('when table is sortable', async () => {
@@ -294,4 +333,94 @@ describe('<Table />', async () => {
       expect(header).toHaveAttribute('aria-sort', 'descending')
     })
   })
+
+  describe('when using custom components', () => {
+    it('should render wrapper HOCs', () => {
+      class CustomTableCell extends React.Component<any> {
+        render() {
+          return <Table.Cell {...this.props}>{this.props.children}</Table.Cell>
+        }
+      }
+      class CustomTableRow extends React.Component {
+        render() {
+          return (
+            <Table.Row {...this.props}>
+              <Table.RowHeader>1</Table.RowHeader>
+              <Table.Cell>The Shawshank Redemption</Table.Cell>
+              <CustomTableCell>9.3</CustomTableCell>
+            </Table.Row>
+          )
+        }
+      }
+      const table = render(
+        <Table caption="Test custom table">
+          <Table.Head>
+            <Table.Row>
+              <Table.ColHeader id="foo">ColHeader</Table.ColHeader>
+              <Table.ColHeader id="bar">Bar-header</Table.ColHeader>
+              <Table.ColHeader id="baz">Bar-header</Table.ColHeader>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            <CustomTableRow />
+            <Table.Row>
+              <Table.RowHeader>RowHeader</Table.RowHeader>
+              <Table.Cell>Cell</Table.Cell>
+              <Table.Cell>Cell2</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      )
+      const stackedTable = screen.getByRole('table')
+
+      expect(stackedTable).toBeInTheDocument()
+      const { container } = table
+      expect(container).toBeInTheDocument()
+      expect(container).toHaveTextContent('The Shawshank Redemption')
+      expect(container).toHaveTextContent('9.3')
+    })
+
+    it('should render fully custom components', () => {
+      class CustomTableCell extends React.Component<any> {
+        render() {
+          return <td>{this.props.children}</td>
+        }
+      }
+
+      class CustomTableRow extends React.Component<any> {
+        render() {
+          return <tr>{this.props.children}</tr>
+        }
+      }
+
+      const table = render(
+        <Table caption="Test custom table">
+          <Table.Head>
+            <CustomTableRow>
+              <CustomTableCell id="foo">ColHeader</CustomTableCell>
+              <CustomTableCell id="bar">Bar-header</CustomTableCell>
+              <Table.ColHeader id="baz">Bar-header</Table.ColHeader>
+            </CustomTableRow>
+          </Table.Head>
+          <Table.Body>
+            <CustomTableRow>
+              <Table.RowHeader>RowHeader2</Table.RowHeader>
+              <CustomTableCell>Cell</CustomTableCell>
+              <Table.Cell>Cell2</Table.Cell>
+            </CustomTableRow>
+          </Table.Body>
+        </Table>
+      )
+      const stackedTable = screen.getByRole('table')
+
+      expect(stackedTable).toBeInTheDocument()
+      const { container } = table
+      expect(container).toBeInTheDocument()
+      expect(container).toHaveTextContent('ColHeader')
+      expect(container).toHaveTextContent('Bar-header')
+      expect(container).toHaveTextContent('RowHeader2')
+      expect(container).toHaveTextContent('Cell')
+      expect(container).toHaveTextContent('Cell2')
+    })
+  })
 })

package/src/Table/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component, Children } from 'react'
+import { Component, Children, isValidElement } from 'react'
 
 import { safeCloneElement, omitProps } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
@@ -41,15 +41,10 @@ import { ColHeader } from './ColHeader'
 import { RowHeader } from './RowHeader'
 import { Cell } from './Cell'
 
-import type {
-  TableProps,
-  HeadChild,
-  ColHeaderChild,
-  RowHeaderChild,
-  CellChild
-} from './props'
+import type { TableProps } from './props'
 
 import { allowedProps, propTypes } from './props'
+import TableContext from './TableContext'
 
 /**
 ---
@@ -97,17 +92,14 @@ class Table extends Component<TableProps> {
   }
 
   getHeaders() {
-    const { children } = this.props
-    const [head] = Children.toArray(children) as HeadChild[]
-    const [row]: any = Children.toArray(head.props.children)
-    if (!row) return undefined
-
-    return Children.map(
-      row.props.children as (ColHeaderChild | RowHeaderChild | CellChild)[],
-      (colHeader) => {
-        return colHeader.props.children
-      }
-    )
+    const [headChild] = Children.toArray(this.props.children)
+    if (!headChild || !isValidElement(headChild)) return undefined
+    const [firstRow] = Children.toArray(headChild.props.children)
+    if (!firstRow || !isValidElement(firstRow)) return undefined
+    return Children.map(firstRow.props.children, (colHeader) => {
+      if (!isValidElement<{ children?: any }>(colHeader)) return undefined
+      return colHeader.props.children
+    })
   }
 
   render() {
@@ -116,32 +108,38 @@ class Table extends Component<TableProps> {
     const headers = isStacked ? this.getHeaders() : undefined
 
     return (
-      <View
-        {...View.omitViewProps(
-          omitProps(this.props, Table.allowedProps),
-          Table
-        )}
-        as={isStacked ? 'div' : 'table'}
-        margin={margin}
-        elementRef={this.handleRef}
-        css={styles?.table}
-        role={isStacked ? 'table' : undefined}
-        aria-label={isStacked ? (caption as string) : undefined}
+      <TableContext.Provider
+        value={{
+          isStacked: isStacked,
+          hover: hover!,
+          headers: headers
+        }}
       >
-        {!isStacked && (
-          <caption>
-            <ScreenReaderContent>{caption}</ScreenReaderContent>
-          </caption>
-        )}
-        {Children.map(children, (child: any) => {
-          return safeCloneElement(child, {
-            key: child.props.name,
-            isStacked,
-            hover,
-            headers
-          })
-        })}
-      </View>
+        <View
+          {...View.omitViewProps(
+            omitProps(this.props, Table.allowedProps),
+            Table
+          )}
+          as={isStacked ? 'div' : 'table'}
+          margin={margin}
+          elementRef={this.handleRef}
+          css={styles?.table}
+          role={isStacked ? 'table' : undefined}
+          aria-label={isStacked ? (caption as string) : undefined}
+        >
+          {!isStacked && (
+            <caption>
+              <ScreenReaderContent>{caption}</ScreenReaderContent>
+            </caption>
+          )}
+          {Children.map(children, (child) => {
+            if (isValidElement(child)) {
+              return safeCloneElement(child, { key: child.props.name })
+            }
+            return child
+          })}
+        </View>
+      </TableContext.Provider>
     )
   }
 }

package/src/Table/props.ts

@@ -37,25 +37,7 @@ 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 RowChild = React.ReactElement<{ children: React.ReactElement }>
 
 type TableOwnProps = {
   /**
@@ -79,12 +61,15 @@ type TableOwnProps = {
   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
+   * while `fixed` forces columns of equal width (sets the
+   * [tableLayout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)
+   * CSS prop to `fixed`).
+   *
+   * `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`
+   * `Table.Head` or `Table.Body`
    */
   children?: React.ReactNode
 }
@@ -121,11 +106,6 @@ export type {
   TableProps,
   TableStyle,
   // children
-  HeadChild,
-  BodyChild,
-  RowChild,
-  ColHeaderChild,
-  RowHeaderChild,
-  CellChild
+  RowChild
 }
 export { propTypes, allowedProps }

package/src/index.ts

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 export { Table } from './Table'
+export { TableContext } from './Table/TableContext'
 
 export type { TableProps } from './Table/props'
 export type { TableBodyProps } from './Table/Body/props'