@instructure/ui-table 9.1.1-pr-snapshot-1720014507835 → 9.1.1-pr-snapshot-1720186232821

package/src/Table/README.md

@@ -873,118 +873,6 @@ render(
 )
 ```
 
-### Using Custom Components as Children
-
-In some cases you might want to use custom components in a `Table`, e.g. a HOC for `Table.Row` or `Table.Cell`. This is generally not recommended but sometimes it could be beneficial for codesplitting or writing cleaner code for larger and more complex Tables. In those cases you have to pay attention to always pass down the appropriate props manually.
-
-```javascript
----
-type: example
----
-class CustomTableCell extends React.Component {
-  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>
-          <Table.Cell>1994</Table.Cell>
-          <CustomTableCell>9.3</CustomTableCell>
-        </Table.Row>
-    )
-  }
-}
-
-class Example extends React.Component {
-  state = {
-    layout: 'auto',
-    hover: false,
-  }
-
-  handleChange = (field, value) => {
-    this.setState({
-      [field]: value,
-    })
-  }
-
-  renderOptions () {
-    const { layout, hover } = this.state
-
-    return (
-      <Flex alignItems="start">
-        <Flex.Item margin="small">
-          <RadioInputGroup
-            name="layout2"
-            description="layout2"
-            value={layout}
-            onChange={(e, value) => this.handleChange('layout', value)}
-          >
-            <RadioInput label="auto" value="auto" />
-            <RadioInput label="fixed" value="fixed" />
-            <RadioInput label="stacked" value="stacked" />
-          </RadioInputGroup>
-        </Flex.Item>
-        <Flex.Item margin="small">
-          <Checkbox
-            label="hover"
-            checked={hover}
-            onChange={(e, value) => this.handleChange('hover', !hover)}
-          />
-        </Flex.Item>
-      </Flex>
-    )
-  }
-
-  render() {
-    const { layout, hover } = this.state
-
-    return (
-      <div>
-        {this.renderOptions()}
-        <Table
-          caption='Top rated movies'
-          layout={layout}
-          hover={hover}
-        >
-          <Table.Head>
-            <Table.Row>
-              <Table.ColHeader id="Rank">Rank</Table.ColHeader>
-              <Table.ColHeader id="Title">Title</Table.ColHeader>
-              <Table.ColHeader id="Year">Year</Table.ColHeader>
-              <Table.ColHeader id="Rating">Rating</Table.ColHeader>
-            </Table.Row>
-          </Table.Head>
-          <Table.Body>
-            <CustomTableRow/>
-            <Table.Row>
-              <Table.RowHeader>2</Table.RowHeader>
-              <Table.Cell>The Godfather</Table.Cell>
-              <Table.Cell>1972</Table.Cell>
-              <Table.Cell>9.2</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.RowHeader>3</Table.RowHeader>
-              <Table.Cell>The Godfather: Part II</Table.Cell>
-              <Table.Cell>1974</Table.Cell>
-              <Table.Cell>9.0</Table.Cell>
-            </Table.Row>
-          </Table.Body>
-        </Table>
-      </div>
-    )
-  }
-}
-
-render(<Example />)
-```
-
 ### Guidelines
 
 ```js

package/src/Table/Row/index.tsx

@@ -25,7 +25,11 @@
 /** @jsx jsx */
 import { Component, Children } from 'react'
 
-import { omitProps, safeCloneElement } from '@instructure/ui-react-utils'
+import {
+  omitProps,
+  matchComponentTypes,
+  safeCloneElement
+} from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
 
 import { withStyle, jsx } from '@instructure/emotion'
@@ -33,7 +37,11 @@ import { withStyle, jsx } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
+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'
 
 /**
@@ -71,14 +79,32 @@ 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: any, index) => {
-            return safeCloneElement(child, {
-              key: child.props.name,
-              isStacked,
-              header: headers && headers[index]
-            })
+          .map((child, index) => {
+            if (matchComponentTypes<ColHeaderChild>(child, [ColHeader])) {
+              return child
+            }
+            if (matchComponentTypes<RowHeaderChild>(child, [RowHeader])) {
+              return safeCloneElement(child, {
+                key: child.props.name,
+                isStacked
+              })
+            }
+            if (matchComponentTypes<CellChild>(child, [Cell])) {
+              return safeCloneElement(child, {
+                key: child.props.name,
+                isStacked,
+                header: headers && headers[index]
+              })
+            }
+            return null
           })}
       </View>
     )

package/src/Table/Row/props.ts

@@ -25,6 +25,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+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 {
@@ -55,7 +60,7 @@ type TableRowProps = TableRowOwnProps &
 type TableRowStyle = ComponentStyle<'row'>
 
 const propTypes: PropValidators<PropKeys> = {
-  children: PropTypes.node,
+  children: ChildrenPropTypes.oneOf([ColHeader, RowHeader, Cell]),
   hover: PropTypes.bool,
   isStacked: PropTypes.bool,
   headers: PropTypes.arrayOf(

package/src/Table/index.tsx

@@ -25,7 +25,11 @@
 /** @jsx jsx */
 import { Component, Children } from 'react'
 
-import { safeCloneElement, omitProps } from '@instructure/ui-react-utils'
+import {
+  matchComponentTypes,
+  safeCloneElement,
+  omitProps
+} from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 
@@ -44,6 +48,8 @@ import { Cell } from './Cell'
 import type {
   TableProps,
   HeadChild,
+  BodyChild,
+  RowChild,
   ColHeaderChild,
   RowHeaderChild,
   CellChild
@@ -99,15 +105,22 @@ 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
+    if (matchComponentTypes<HeadChild>(head, [Head])) {
+      const [row] = Children.toArray(head.props.children)
+
+      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 undefined
   }
 
   render() {
@@ -133,13 +146,22 @@ class Table extends Component<TableProps> {
             <ScreenReaderContent>{caption}</ScreenReaderContent>
           </caption>
         )}
-        {Children.map(children, (child: any) => {
-          return safeCloneElement(child, {
-            key: child.props.name,
-            isStacked,
-            hover,
-            headers
-          })
+        {Children.map(children, (child) => {
+          if (matchComponentTypes<HeadChild>(child, [Head])) {
+            return safeCloneElement(child, {
+              key: child.props.name,
+              isStacked
+            })
+          }
+          if (matchComponentTypes<BodyChild>(child, [Body])) {
+            return safeCloneElement(child, {
+              key: child.props.name,
+              isStacked,
+              hover,
+              headers
+            })
+          }
+          return null
         })}
       </View>
     )

package/src/Table/props.ts

@@ -24,6 +24,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
 import { ThemeablePropTypes } from '@instructure/emotion'
 
 import type {
@@ -101,7 +102,7 @@ type TableStyle = ComponentStyle<'table'>
 
 const propTypes: PropValidators<PropKeys> = {
   caption: PropTypes.node.isRequired,
-  children: PropTypes.node,
+  children: ChildrenPropTypes.oneOf([Head, Body]),
   margin: ThemeablePropTypes.spacing,
   elementRef: PropTypes.func,
   hover: PropTypes.bool,