@instructure/ui-table 8.14.1-snapshot.63 → 8.14.1-snapshot.66

package/es/Table/Head/index.js

@@ -27,7 +27,7 @@ var _dec, _class, _class2, _temp, _ScreenReaderContent;
  */
 
 /** @jsx jsx */
-import React, { Component, Children } from 'react';
+import { Component, Children } from 'react';
 import { omitProps, matchComponentTypes, callRenderProp } from '@instructure/ui-react-utils';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
@@ -103,11 +103,11 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       count += 1;
 
       if (matchComponentTypes(colHeader, [ColHeader])) {
-        const _props = colHeader.props,
-              id = _props.id,
-              stackedSortByLabel = _props.stackedSortByLabel,
-              sortDirection = _props.sortDirection,
-              onRequestSort = _props.onRequestSort;
+        const _colHeader$props = colHeader.props,
+              id = _colHeader$props.id,
+              stackedSortByLabel = _colHeader$props.stackedSortByLabel,
+              sortDirection = _colHeader$props.sortDirection,
+              onRequestSort = _colHeader$props.onRequestSort;
         const label = stackedSortByLabel || id;
 
         if (onRequestSort) {

package/es/Table/index.js

@@ -27,7 +27,7 @@ var _dec, _class, _class2, _temp;
  */
 
 /** @jsx jsx */
-import React, { Component, Children } from 'react';
+import { Component, Children } from 'react';
 import { matchComponentTypes, safeCloneElement, omitProps } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
@@ -83,18 +83,18 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
           head = _ref2[0];
 
     if (matchComponentTypes(head, [Head])) {
-      const _ref3 = Children.toArray(head.props.children),
-            _ref4 = _slicedToArray(_ref3, 1),
-            row = _ref4[0];
+      const _Children$toArray = Children.toArray(head.props.children),
+            _Children$toArray2 = _slicedToArray(_Children$toArray, 1),
+            row = _Children$toArray2[0];
 
       if (matchComponentTypes(row, [Row])) {
         return Children.map(row.props.children, colHeader => {
-          return matchComponentTypes(colHeader, [ColHeader]) ? colHeader.props.children : null;
+          return matchComponentTypes(colHeader, [ColHeader]) ? colHeader.props.children : void 0;
         });
       }
     }
 
-    return null;
+    return void 0;
   }
 
   render() {
@@ -106,7 +106,7 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
           hover = _this$props3.hover,
           styles = _this$props3.styles;
     const isStacked = layout === 'stacked';
-    const headers = isStacked ? this.getHeaders() : null;
+    const headers = isStacked ? this.getHeaders() : void 0;
     return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Table.allowedProps), Table), {
       as: isStacked ? 'div' : 'table',
       margin: margin,

package/lib/Table/Head/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +9,7 @@ exports.default = exports.Head = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 
@@ -37,7 +35,7 @@ var _Row = require("../Row");
 
 var _ColHeader = require("../ColHeader");
 
-var _props2 = require("./props");
+var _props = require("./props");
 
 var _dec, _class, _class2, _temp, _ScreenReaderContent;
 
@@ -105,11 +103,11 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       count += 1;
 
       if ((0, _matchComponentTypes.matchComponentTypes)(colHeader, [_ColHeader.ColHeader])) {
-        const _props = colHeader.props,
-              id = _props.id,
-              stackedSortByLabel = _props.stackedSortByLabel,
-              sortDirection = _props.sortDirection,
-              onRequestSort = _props.onRequestSort;
+        const _colHeader$props = colHeader.props,
+              id = _colHeader$props.id,
+              stackedSortByLabel = _colHeader$props.stackedSortByLabel,
+              sortDirection = _colHeader$props.sortDirection,
+              onRequestSort = _colHeader$props.onRequestSort;
         const label = stackedSortByLabel || id;
 
         if (onRequestSort) {
@@ -178,7 +176,7 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     }), _react.Children.map(children, child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Row.Row]) ? child : null));
   }
 
-}, _class2.displayName = "Head", _class2.componentId = 'Table.Head', _class2.allowedProps = _props2.allowedProps, _class2.propTypes = _props2.propTypes, _class2.defaultProps = {
+}, _class2.displayName = "Head", _class2.componentId = 'Table.Head', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   children: null
 }, _temp)) || _class);
 exports.Head = Head;

package/lib/Table/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +9,7 @@ exports.default = exports.Table = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 
@@ -86,18 +84,18 @@ let Table = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
           head = _ref2[0];
 
     if ((0, _matchComponentTypes.matchComponentTypes)(head, [_Head.Head])) {
-      const _ref3 = _react.Children.toArray(head.props.children),
-            _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
-            row = _ref4[0];
+      const _Children$toArray = _react.Children.toArray(head.props.children),
+            _Children$toArray2 = (0, _slicedToArray2.default)(_Children$toArray, 1),
+            row = _Children$toArray2[0];
 
       if ((0, _matchComponentTypes.matchComponentTypes)(row, [_Row.Row])) {
         return _react.Children.map(row.props.children, colHeader => {
-          return (0, _matchComponentTypes.matchComponentTypes)(colHeader, [_ColHeader.ColHeader]) ? colHeader.props.children : null;
+          return (0, _matchComponentTypes.matchComponentTypes)(colHeader, [_ColHeader.ColHeader]) ? colHeader.props.children : void 0;
         });
       }
     }
 
-    return null;
+    return void 0;
   }
 
   render() {
@@ -109,7 +107,7 @@ let Table = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
           hover = _this$props3.hover,
           styles = _this$props3.styles;
     const isStacked = layout === 'stacked';
-    const headers = isStacked ? this.getHeaders() : null;
+    const headers = isStacked ? this.getHeaders() : void 0;
     return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Table.allowedProps), Table), {
       as: isStacked ? 'div' : 'table',
       margin: margin,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "8.14.1-snapshot.63+2acf47d5b",
+  "version": "8.14.1-snapshot.66+ff0decd44",
   "description": "A styled HTML table component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,24 +24,24 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-color-utils": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-test-utils": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-themes": "8.14.1-snapshot.63+2acf47d5b"
+    "@instructure/ui-babel-preset": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-color-utils": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-test-utils": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-themes": "8.14.1-snapshot.66+ff0decd44"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/emotion": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/shared-types": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-a11y-content": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-icons": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-prop-types": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-react-utils": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-simple-select": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-testable": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-utils": "8.14.1-snapshot.63+2acf47d5b",
-    "@instructure/ui-view": "8.14.1-snapshot.63+2acf47d5b",
+    "@instructure/console": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/emotion": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/shared-types": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-a11y-content": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-icons": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-prop-types": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-react-utils": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-simple-select": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-testable": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-utils": "8.14.1-snapshot.66+ff0decd44",
+    "@instructure/ui-view": "8.14.1-snapshot.66+ff0decd44",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -51,5 +51,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "2acf47d5bc73bd07f4f5228bdc7654a3df997d3e"
+  "gitHead": "ff0decd44fd390bd7f50885610373d2c9c793053"
 }

package/src/Table/Body/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component, Children, ReactElement } from 'react'
+import { Component, Children } from 'react'
 
 import {
   matchComponentTypes,
@@ -37,7 +37,7 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import { Row } from '../Row'
 import type { TableBodyProps } from './props'
-import type { TableRowProps } from '../Row/props'
+import type { RowChild } from '../props'
 import { allowedProps, propTypes } from './props'
 
 /**
@@ -76,17 +76,15 @@ class Body extends Component<TableBodyProps> {
         css={styles?.body}
         role={isStacked ? 'rowgroup' : undefined}
       >
-        {Children.map(
-          children as React.ComponentElement<TableRowProps, Row>[],
-          (child) =>
-            matchComponentTypes(child, [Row])
-              ? safeCloneElement(child as ReactElement, {
-                  key: child.props.name,
-                  hover,
-                  isStacked,
-                  headers
-                })
-              : null
+        {Children.map(children as RowChild[], (child) =>
+          matchComponentTypes(child, [Row])
+            ? safeCloneElement(child, {
+                key: child.props.name,
+                hover,
+                isStacked,
+                headers
+              })
+            : null
         )}
       </View>
     )

package/src/Table/Head/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import React, { Component, Children } from 'react'
+import { Component, Children } from 'react'
 
 import {
   omitProps,
@@ -45,7 +45,7 @@ import { Row } from '../Row'
 import { ColHeader } from '../ColHeader'
 import type { TableColHeaderProps } from '../ColHeader/props'
 import type { TableHeadProps } from './props'
-import type { TableRowProps } from '../Row/props'
+import type { ColHeaderChild, RowChild } from '../props'
 import { allowedProps, propTypes } from './props'
 
 /**
@@ -67,19 +67,14 @@ class Head extends Component<TableHeadProps> {
   }
 
   get isSortable() {
-    const [row] = Children.toArray(
-      this.props.children
-    ) as React.ComponentElement<TableRowProps, Row>[]
+    const [row] = Children.toArray(this.props.children) as RowChild[]
     let sortable = false
 
     if (row) {
       Children.forEach(
-        row.props.children as React.ComponentElement<
-          TableColHeaderProps,
-          ColHeader
-        >[],
+        row.props.children as ColHeaderChild[],
         (colHeader) => {
-          if (matchComponentTypes(colHeader, [ColHeader])) {
+          if (matchComponentTypes<ColHeaderChild>(colHeader, [ColHeader])) {
             if (colHeader.props.onRequestSort) sortable = true
           }
         }
@@ -105,12 +100,9 @@ class Head extends Component<TableHeadProps> {
 
   renderSelect() {
     const { children, renderSortLabel } = this.props
-    const [row] = Children.toArray(children) as React.ComponentElement<
-      TableRowProps,
-      Row
-    >[]
+    const [row] = Children.toArray(children) as RowChild[]
 
-    if (!matchComponentTypes(row, [Row])) {
+    if (!matchComponentTypes<RowChild>(row, [Row])) {
       return null
     }
     const options: {
@@ -128,9 +120,9 @@ class Head extends Component<TableHeadProps> {
 
     Children.forEach(row.props.children, (colHeader) => {
       count += 1
-      if (matchComponentTypes(colHeader, [ColHeader])) {
+      if (matchComponentTypes<ColHeaderChild>(colHeader, [ColHeader])) {
         const { id, stackedSortByLabel, sortDirection, onRequestSort } = (
-          colHeader as ColHeader
+          colHeader
         ).props
 
         const label = stackedSortByLabel || id
@@ -197,7 +189,7 @@ class Head extends Component<TableHeadProps> {
     ) : (
       <thead {...omitProps(this.props, Head.allowedProps)} css={styles?.head}>
         {Children.map(children, (child) =>
-          matchComponentTypes(child, [Row]) ? child : null
+          matchComponentTypes<RowChild>(child, [Row]) ? child : null
         )}
       </thead>
     )

package/src/Table/Row/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component, Children, ReactElement } from 'react'
+import { Component, Children } from 'react'
 
 import {
   omitProps,
@@ -41,6 +41,7 @@ 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'
 
 /**
@@ -79,21 +80,27 @@ 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, index) => {
-            if (matchComponentTypes(child, [ColHeader])) {
+            if (matchComponentTypes<ColHeaderChild>(child, [ColHeader])) {
               return child
             }
-            if (matchComponentTypes(child, [RowHeader])) {
-              return safeCloneElement(child as ReactElement, {
-                key: (child as RowHeader).props.name,
+            if (matchComponentTypes<RowHeaderChild>(child, [RowHeader])) {
+              return safeCloneElement(child, {
+                key: child.props.name,
                 isStacked
               })
             }
-            if (matchComponentTypes(child, [Cell])) {
-              return safeCloneElement(child as ReactElement, {
-                key: (child as Cell).props.name,
+            if (matchComponentTypes<CellChild>(child, [Cell])) {
+              return safeCloneElement(child, {
+                key: child.props.name,
                 isStacked,
                 header: headers && headers[index]
               })

package/src/Table/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import React, { Component, Children, ReactElement } from 'react'
+import { Component, Children } from 'react'
 
 import {
   matchComponentTypes,
@@ -44,9 +44,17 @@ import { Row } from './Row'
 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 type {
+  TableProps,
+  HeadChild,
+  BodyChild,
+  RowChild,
+  ColHeaderChild,
+  RowHeaderChild,
+  CellChild
+} from './props'
+
 import { allowedProps, propTypes } from './props'
 
 /**
@@ -97,31 +105,29 @@ class Table extends Component<TableProps> {
 
   getHeaders() {
     const { children } = this.props
-    const [head] = Children.toArray(children) as React.ComponentElement<
-      TableHeadProps,
-      Head
-    >[]
-
-    if (matchComponentTypes(head, [Head])) {
-      const [row] = Children.toArray(
-        head.props.children
-      ) as React.ComponentElement<TableRowProps, Row>[]
-
-      if (matchComponentTypes(row, [Row])) {
-        return Children.map(row.props.children, (colHeader) => {
-          return matchComponentTypes(colHeader, [ColHeader])
-            ? (colHeader as ColHeader).props.children
-            : null
-        })
+    const [head] = Children.toArray(children) as HeadChild[]
+
+    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 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
@@ -142,15 +148,15 @@ class Table extends Component<TableProps> {
           </caption>
         )}
         {Children.map(children, (child) => {
-          if (matchComponentTypes(child, [Head])) {
-            return safeCloneElement(child as ReactElement, {
-              key: (child as Head).props.name,
+          if (matchComponentTypes<HeadChild>(child, [Head])) {
+            return safeCloneElement(child, {
+              key: child.props.name,
               isStacked
             })
           }
-          if (matchComponentTypes(child, [Body])) {
-            return safeCloneElement(child as ReactElement, {
-              key: (child as Body).props.name,
+          if (matchComponentTypes<BodyChild>(child, [Body])) {
+            return safeCloneElement(child, {
+              key: child.props.name,
               isStacked,
               hover,
               headers

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,6 +38,26 @@ 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 = {
   /**
    * Provide a screen reader friendly description. Anything passed to this
@@ -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 }