@instructure/ui-table 9.7.0 → 9.8.0

package/src/Table/Row/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component, Children } from 'react'
+import { Component, Children, ContextType, isValidElement } from 'react'
 
 import { omitProps, safeCloneElement } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
@@ -35,6 +35,7 @@ import generateComponentTheme from './theme'
 
 import type { TableRowProps } from './props'
 import { allowedProps, propTypes } from './props'
+import TableContext from '../TableContext'
 
 /**
 ---
@@ -45,7 +46,8 @@ id: Table.Row
 @withStyle(generateStyle, generateComponentTheme)
 class Row extends Component<TableRowProps> {
   static readonly componentId = 'Table.Row'
-
+  static contextType = TableContext
+  declare context: ContextType<typeof TableContext>
   static allowedProps = allowedProps
   static propTypes = propTypes
 
@@ -54,15 +56,23 @@ class Row extends Component<TableRowProps> {
   }
 
   componentDidMount() {
-    this.props.makeStyles?.()
+    this.props.makeStyles?.({
+      isStacked: this.context.isStacked,
+      hover: this.context.hover
+    })
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.()
+    this.props.makeStyles?.({
+      isStacked: this.context.isStacked,
+      hover: this.context.hover
+    })
   }
 
   render() {
-    const { children, styles, isStacked, headers } = this.props
+    const { children, styles } = this.props
+    const isStacked = this.context.isStacked
+    const headers = this.context.headers
 
     return (
       <View
@@ -73,12 +83,18 @@ class Row extends Component<TableRowProps> {
       >
         {Children.toArray(children)
           .filter(Boolean)
-          .map((child: any, index) => {
-            return safeCloneElement(child, {
-              key: child.props.name,
-              isStacked,
-              header: headers && headers[index]
-            })
+          .map((child, index) => {
+            if (isValidElement(child)) {
+              return safeCloneElement(child, {
+                key: child.props.name,
+                // Sent down for compatibility with custom components
+                // TODO DEPRECATED, remove in v11
+                isStacked,
+                // used by `Cell` to render its column title in `stacked` layout
+                header: headers && headers[index]
+              })
+            }
+            return child
           })}
       </View>
     )

package/src/Table/Row/props.ts

@@ -25,8 +25,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import type { TableCellProps } from '../Cell/props'
-
 import type {
   OtherHTMLAttributes,
   PropValidators,
@@ -35,13 +33,13 @@ import type {
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type TableRowOwnProps = {
-  hover?: boolean
-  isStacked?: boolean
-  headers?: TableCellProps['header'][]
   /**
-   * `Table.ColHeader`, `Table.RowHeader` or `Table.Cell`
+   * A row's children should be table cells. Its children should have the
+   * `header` prop to render the column header in `stacked` layout
+   *
+   * By default `Table.ColHeader` or `Table.RowHeader` or `Table.Cell`
    */
-  children?: React.ReactNode
+  children?: React.ReactElement | React.ReactElement[]
 }
 
 type PropKeys = keyof TableRowOwnProps
@@ -55,20 +53,10 @@ type TableRowProps = TableRowOwnProps &
 type TableRowStyle = ComponentStyle<'row'>
 
 const propTypes: PropValidators<PropKeys> = {
-  children: PropTypes.node,
-  hover: PropTypes.bool,
-  isStacked: PropTypes.bool,
-  headers: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-  )
+  children: PropTypes.node
 }
 
-const allowedProps: AllowedPropKeys = [
-  'children',
-  'hover',
-  'isStacked',
-  'headers'
-]
+const allowedProps: AllowedPropKeys = ['children']
 
 export type { TableRowProps, TableRowStyle }
 export { propTypes, allowedProps }

package/src/Table/Row/styles.ts

@@ -32,15 +32,14 @@ import type { TableRowProps, TableRowStyle } from './props'
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
+ * @param  {Object} extraArgs the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
   componentTheme: TableRowTheme,
-  props: TableRowProps
+  _props: TableRowProps,
+  extraArgs: { isStacked: boolean; hover: boolean }
 ): TableRowStyle => {
-  const { hover, isStacked } = props
-
   return {
     row: {
       label: 'row',
@@ -54,7 +53,7 @@ const generateStyle = (
       borderBottomWidth: '0.0625rem',
       borderBottomColor: componentTheme.borderColor,
 
-      ...(hover && {
+      ...(extraArgs.hover && {
         borderLeft: '0.1875rem solid transparent',
         borderRight: '0.1875rem solid transparent',
 
@@ -64,7 +63,7 @@ const generateStyle = (
         }
       }),
 
-      ...(isStacked && { padding: componentTheme.padding })
+      ...(extraArgs.isStacked && { padding: componentTheme.padding })
     }
   }
 }

package/src/Table/RowHeader/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component } from 'react'
+import { Component, ContextType } from 'react'
 
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
@@ -34,6 +34,7 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import type { TableRowHeaderProps } from './props'
 import { allowedProps, propTypes } from './props'
+import TableContext from '../TableContext'
 
 /**
 ---
@@ -44,7 +45,8 @@ id: Table.RowHeader
 @withStyle(generateStyle, generateComponentTheme)
 class RowHeader extends Component<TableRowHeaderProps> {
   static readonly componentId = 'Table.RowHeader'
-
+  static contextType = TableContext
+  declare context: ContextType<typeof TableContext>
   static allowedProps = allowedProps
   static propTypes = propTypes
 
@@ -62,8 +64,8 @@ class RowHeader extends Component<TableRowHeaderProps> {
   }
 
   render() {
-    const { children, isStacked, styles } = this.props
-
+    const { children, styles } = this.props
+    const isStacked = this.context.isStacked
     return (
       <View
         {...View.omitViewProps(

package/src/Table/RowHeader/props.ts

@@ -33,7 +33,6 @@ import type {
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type TableRowHeaderOwnProps = {
-  isStacked?: boolean
   /**
    * Control the text alignment in row header
    */
@@ -53,11 +52,10 @@ type TableRowHeaderStyle = ComponentStyle<'rowHeader'>
 
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  isStacked: PropTypes.bool,
   textAlign: PropTypes.oneOf(['start', 'center', 'end'])
 }
 
-const allowedProps: AllowedPropKeys = ['children', 'isStacked', 'textAlign']
+const allowedProps: AllowedPropKeys = ['children', 'textAlign']
 
 export type { TableRowHeaderProps, TableRowHeaderStyle }
 export { propTypes, allowedProps }

package/src/Table/TableContext.ts

@@ -0,0 +1,54 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { createContext } from 'react'
+import { Renderable } from '@instructure/shared-types'
+
+type TableContextType = {
+  /**
+   * If `true` the table gets rendered in one column to be more readable on
+   * narrow screens.
+   */
+  isStacked: boolean
+  /**
+   * Highlight each row on hover.
+   */
+  hover: boolean
+  /**
+   * Contents of the first row of cells. Has value if `isStacked` is `true`.
+   */
+  headers?: Renderable[]
+}
+
+/**
+ * React context created by the `Table` component to hold its data
+ */
+const TableContext = createContext<TableContextType>({
+  isStacked: false,
+  hover: false
+})
+
+export default TableContext
+export { TableContext }
+export type { TableContextType }

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'
 
@@ -34,7 +34,7 @@ import type { TableColHeaderProps } from '../ColHeader/props'
 import { runAxeCheck } from '@instructure/ui-axe-check'
 
 describe('<Table />', async () => {
-  let consoleErrorMock: any
+  let consoleErrorMock: MockInstance<typeof console.error>
 
   beforeEach(() => {
     // Mocking console to prevent test output pollution
@@ -167,6 +167,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')
+  })
+
   describe('when table is sortable', async () => {
     const renderSortableTable = (
       props: TableColHeaderProps | null,
@@ -290,4 +329,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'