@instructure/ui-table 8.14.1-snapshot.7 → 8.15.1-snapshot.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.15.0](https://github.com/instructure/instructure-ui/compare/v8.14.0...v8.15.0) (2022-01-26)
+
+**Note:** Version bump only for package @instructure/ui-table
+
 # [8.14.0](https://github.com/instructure/instructure-ui/compare/v8.13.0...v8.14.0) (2021-12-16)
 
 **Note:** Version bump only for package @instructure/ui-table

package/es/Table/Body/index.js

@@ -38,6 +38,7 @@ import { allowedProps, propTypes } from './props';
 parent: Table
 id: Table.Body
 ---
+@tsProps
 **/
 
 let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Body extends Component {
@@ -47,7 +48,7 @@ let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
 
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);

package/es/Table/Body/props.js

@@ -25,9 +25,6 @@ import PropTypes from 'prop-types';
 import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { Row } from '../Row';
 const propTypes = {
-  /**
-   * `Table.Row`
-   */
   children: ChildrenPropTypes.oneOf([Row]),
   hover: PropTypes.bool,
   isStacked: PropTypes.bool,

package/es/Table/Cell/index.js

@@ -37,6 +37,7 @@ import { allowedProps, propTypes } from './props';
 parent: Table
 id: Table.Cell
 ---
+@tsProps
 **/
 
 let Cell = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Cell extends Component {

package/es/Table/Cell/props.js

@@ -26,10 +26,6 @@ const propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   isStacked: PropTypes.bool,
   header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Control the text alignment in cell
-   */
   textAlign: PropTypes.oneOf(['start', 'center', 'end'])
 };
 const allowedProps = ['children', 'isStacked', 'header', 'textAlign'];

package/es/Table/ColHeader/index.js

@@ -25,7 +25,7 @@ var _dec, _class, _class2, _temp, _IconMiniArrowUpLine, _IconMiniArrowDownLin;
  */
 
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils';
 import { IconMiniArrowUpLine, IconMiniArrowDownLine } from '@instructure/ui-icons';
 import { withStyle, jsx } from '@instructure/emotion';
@@ -37,6 +37,7 @@ import { allowedProps, propTypes } from './props';
 parent: Table
 id: Table.ColHeader
 ---
+@tsProps
 **/
 
 let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class ColHeader extends Component {
@@ -47,7 +48,7 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
       const _this$props = this.props,
             id = _this$props.id,
             onRequestSort = _this$props.onRequestSort;
-      onRequestSort(event, {
+      onRequestSort && onRequestSort(event, {
         id
       });
     };

package/es/Table/ColHeader/props.js

@@ -23,43 +23,13 @@
  */
 import PropTypes from 'prop-types';
 const propTypes = {
-  /**
-   * A unique id for this column. The `id` is also used as option in combobox,
-   * when sortable table is in stacked layout,
-   * and no `stackedSortByLabel` is provided.
-   */
   id: PropTypes.string.isRequired,
-
-  /**
-   * A custom string to display as option text in the combobox (instead of
-   * using the `id` prop), when sortable table is in stacked layout.
-   */
   stackedSortByLabel: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Control the width of column.
-   */
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Control the text alignment in column header
-   */
   textAlign: PropTypes.oneOf(['start', 'center', 'end']),
-
-  /**
-   * The string of sorting direction
-   */
   sortDirection: PropTypes.oneOf(['none', 'ascending', 'descending']),
-
-  /**
-   * Callback fired when column header is clicked. Parameters: `(event, { id })`
-   */
   onRequestSort: PropTypes.func,
-
-  /**
-   * The column header scope attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
-   */
   scope: PropTypes.oneOf(['row', 'col', 'rowgroup', 'colgroup', 'auto'])
 };
 const allowedProps = ['id', 'stackedSortByLabel', 'children', 'width', 'textAlign', 'sortDirection', 'onRequestSort', 'scope'];

package/es/Table/Head/index.js

@@ -44,13 +44,14 @@ import { allowedProps, propTypes } from './props';
 parent: Table
 id: Table.Head
 ---
+@tsProps
 **/
 
 let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Head extends Component {
   get isSortable() {
-    const _Children$toArray = Children.toArray(this.props.children),
-          _Children$toArray2 = _slicedToArray(_Children$toArray, 1),
-          row = _Children$toArray2[0];
+    const _ref = Children.toArray(this.props.children),
+          _ref2 = _slicedToArray(_ref, 1),
+          row = _ref2[0];
 
     let sortable = false;
 
@@ -86,9 +87,9 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
           children = _this$props3.children,
           renderSortLabel = _this$props3.renderSortLabel;
 
-    const _Children$toArray3 = Children.toArray(children),
-          _Children$toArray4 = _slicedToArray(_Children$toArray3, 1),
-          row = _Children$toArray4[0];
+    const _ref3 = Children.toArray(children),
+          _ref4 = _slicedToArray(_ref3, 1),
+          row = _ref4[0];
 
     if (!matchComponentTypes(row, [Row])) {
       return null;
@@ -96,7 +97,7 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
 
     const options = [];
     const clickHandlers = {};
-    let selectedOption = void 0;
+    let selectedOption;
     let count = 0;
     Children.forEach(row.props.children, colHeader => {
       count += 1;
@@ -127,11 +128,14 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       return null;
     }
 
-    const handleSelect = (event, _ref) => {
-      let value = _ref.value;
-      clickHandlers[value](event, {
-        id: value
-      });
+    const handleSelect = (event, _ref5) => {
+      let value = _ref5.value;
+
+      if (value && typeof clickHandlers[value] === 'function') {
+        clickHandlers[value](event, {
+          id: `${value}`
+        });
+      }
     };
 
     return jsx("div", {
@@ -146,9 +150,9 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       renderBeforeInput: selectedOption && IconCheckLine,
       value: selectedOption,
       onChange: handleSelect
-    }, options.map(_ref2 => {
-      let id = _ref2.id,
-          label = _ref2.label;
+    }, options.map(_ref6 => {
+      let id = _ref6.id,
+          label = _ref6.label;
       return jsx(SimpleSelect.Option, {
         id: id,
         key: id,

package/es/Table/Head/props.js

@@ -25,9 +25,6 @@ import PropTypes from 'prop-types';
 import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { Row } from '../Row';
 const propTypes = {
-  /**
-   * `Table.Row`
-   */
   children: ChildrenPropTypes.oneOf([Row]),
   isStacked: PropTypes.bool,
   renderSortLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])

package/es/Table/Row/index.js

@@ -40,6 +40,7 @@ import { allowedProps, propTypes } from './props';
 parent: Table
 id: Table.Row
 ---
+@tsProps
 **/
 
 let Row = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Row extends Component {

package/es/Table/Row/props.js

@@ -27,9 +27,6 @@ import { ColHeader } from '../ColHeader';
 import { RowHeader } from '../RowHeader';
 import { Cell } from '../Cell';
 const propTypes = {
-  /**
-   * `Table.ColHeader`, `Table.RowHeader` or `Table.Cell`
-   */
   children: ChildrenPropTypes.oneOf([ColHeader, RowHeader, Cell]),
   hover: PropTypes.bool,
   isStacked: PropTypes.bool,

package/es/Table/RowHeader/index.js

@@ -37,6 +37,7 @@ import { allowedProps, propTypes } from './props';
 parent: Table
 id: Table.RowHeader
 ---
+@tsProps
 **/
 
 let RowHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class RowHeader extends Component {

package/es/Table/RowHeader/props.js

@@ -25,10 +25,6 @@ import PropTypes from 'prop-types';
 const propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   isStacked: PropTypes.bool,
-
-  /**
-   * Control the text alignment in row header
-   */
   textAlign: PropTypes.oneOf(['start', 'center', 'end'])
 };
 const allowedProps = ['children', 'isStacked', 'textAlign'];

package/es/Table/index.js

@@ -45,6 +45,7 @@ import { allowedProps, propTypes } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 
 let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Table extends Component {
@@ -77,23 +78,23 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
   getHeaders() {
     const children = this.props.children;
 
-    const _Children$toArray = Children.toArray(children),
-          _Children$toArray2 = _slicedToArray(_Children$toArray, 1),
-          head = _Children$toArray2[0];
+    const _ref = Children.toArray(children),
+          _ref2 = _slicedToArray(_ref, 1),
+          head = _ref2[0];
 
     if (matchComponentTypes(head, [Head])) {
-      const _Children$toArray3 = Children.toArray(head.props.children),
-            _Children$toArray4 = _slicedToArray(_Children$toArray3, 1),
-            row = _Children$toArray4[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() {
@@ -105,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/es/Table/props.js

@@ -27,39 +27,11 @@ import { ThemeablePropTypes } from '@instructure/emotion';
 import { Head } from './Head';
 import { Body } from './Body';
 const propTypes = {
-  /**
-   * 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'])
 };
 const allowedProps = ['caption', 'children', 'margin', 'elementRef', 'hover', 'layout'];

package/lib/Table/Body/index.js

@@ -34,6 +34,7 @@ var _dec, _class, _class2, _temp;
 parent: Table
 id: Table.Body
 ---
+@tsProps
 **/
 let Body = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Body extends _react.Component {
   componentDidMount() {
@@ -42,7 +43,7 @@ let Body = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
 
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);

package/lib/Table/Body/props.js

@@ -37,9 +37,6 @@ var _Row = require("../Row");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * `Table.Row`
-   */
   children: _Children.Children.oneOf([_Row.Row]),
   hover: _propTypes.default.bool,
   isStacked: _propTypes.default.bool,

package/lib/Table/Cell/index.js

@@ -30,6 +30,7 @@ var _dec, _class, _class2, _temp;
 parent: Table
 id: Table.Cell
 ---
+@tsProps
 **/
 let Cell = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Cell extends _react.Component {
   componentDidMount() {

package/lib/Table/Cell/props.js

@@ -36,10 +36,6 @@ const propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   isStacked: _propTypes.default.bool,
   header: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * Control the text alignment in cell
-   */
   textAlign: _propTypes.default.oneOf(['start', 'center', 'end'])
 };
 exports.propTypes = propTypes;

package/lib/Table/ColHeader/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ColHeader = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 
@@ -32,6 +34,7 @@ var _dec, _class, _class2, _temp, _IconMiniArrowUpLine, _IconMiniArrowDownLin;
 parent: Table
 id: Table.ColHeader
 ---
+@tsProps
 **/
 let ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class ColHeader extends _react.Component {
   constructor() {
@@ -41,7 +44,7 @@ let ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
       const _this$props = this.props,
             id = _this$props.id,
             onRequestSort = _this$props.onRequestSort;
-      onRequestSort(event, {
+      onRequestSort && onRequestSort(event, {
         id
       });
     };

package/lib/Table/ColHeader/props.js

@@ -33,43 +33,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * A unique id for this column. The `id` is also used as option in combobox,
-   * when sortable table is in stacked layout,
-   * and no `stackedSortByLabel` is provided.
-   */
   id: _propTypes.default.string.isRequired,
-
-  /**
-   * A custom string to display as option text in the combobox (instead of
-   * using the `id` prop), when sortable table is in stacked layout.
-   */
   stackedSortByLabel: _propTypes.default.string,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * Control the width of column.
-   */
   width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
-  /**
-   * Control the text alignment in column header
-   */
   textAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
-
-  /**
-   * The string of sorting direction
-   */
   sortDirection: _propTypes.default.oneOf(['none', 'ascending', 'descending']),
-
-  /**
-   * Callback fired when column header is clicked. Parameters: `(event, { id })`
-   */
   onRequestSort: _propTypes.default.func,
-
-  /**
-   * The column header scope attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
-   */
   scope: _propTypes.default.oneOf(['row', 'col', 'rowgroup', 'colgroup', 'auto'])
 };
 exports.propTypes = propTypes;

package/lib/Table/Head/index.js

@@ -44,12 +44,13 @@ var _dec, _class, _class2, _temp, _ScreenReaderContent;
 parent: Table
 id: Table.Head
 ---
+@tsProps
 **/
 let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Head extends _react.Component {
   get isSortable() {
-    const _Children$toArray = _react.Children.toArray(this.props.children),
-          _Children$toArray2 = (0, _slicedToArray2.default)(_Children$toArray, 1),
-          row = _Children$toArray2[0];
+    const _ref = _react.Children.toArray(this.props.children),
+          _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+          row = _ref2[0];
 
     let sortable = false;
 
@@ -85,9 +86,9 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
           children = _this$props3.children,
           renderSortLabel = _this$props3.renderSortLabel;
 
-    const _Children$toArray3 = _react.Children.toArray(children),
-          _Children$toArray4 = (0, _slicedToArray2.default)(_Children$toArray3, 1),
-          row = _Children$toArray4[0];
+    const _ref3 = _react.Children.toArray(children),
+          _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
+          row = _ref4[0];
 
     if (!(0, _matchComponentTypes.matchComponentTypes)(row, [_Row.Row])) {
       return null;
@@ -95,7 +96,7 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
 
     const options = [];
     const clickHandlers = {};
-    let selectedOption = void 0;
+    let selectedOption;
     let count = 0;
 
     _react.Children.forEach(row.props.children, colHeader => {
@@ -127,11 +128,14 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       return null;
     }
 
-    const handleSelect = (event, _ref) => {
-      let value = _ref.value;
-      clickHandlers[value](event, {
-        id: value
-      });
+    const handleSelect = (event, _ref5) => {
+      let value = _ref5.value;
+
+      if (value && typeof clickHandlers[value] === 'function') {
+        clickHandlers[value](event, {
+          id: `${value}`
+        });
+      }
     };
 
     return (0, _emotion.jsx)("div", {
@@ -146,9 +150,9 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       renderBeforeInput: selectedOption && _IconCheckLine.IconCheckLine,
       value: selectedOption,
       onChange: handleSelect
-    }, options.map(_ref2 => {
-      let id = _ref2.id,
-          label = _ref2.label;
+    }, options.map(_ref6 => {
+      let id = _ref6.id,
+          label = _ref6.label;
       return (0, _emotion.jsx)(_SimpleSelect.SimpleSelect.Option, {
         id: id,
         key: id,

package/lib/Table/Head/props.js

@@ -37,9 +37,6 @@ var _Row = require("../Row");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * `Table.Row`
-   */
   children: _Children.Children.oneOf([_Row.Row]),
   isStacked: _propTypes.default.bool,
   renderSortLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])

package/lib/Table/Row/index.js

@@ -38,6 +38,7 @@ var _dec, _class, _class2, _temp;
 parent: Table
 id: Table.Row
 ---
+@tsProps
 **/
 let Row = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Row extends _react.Component {
   componentDidMount() {

package/lib/Table/Row/props.js

@@ -41,9 +41,6 @@ var _Cell = require("../Cell");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * `Table.ColHeader`, `Table.RowHeader` or `Table.Cell`
-   */
   children: _Children.Children.oneOf([_ColHeader.ColHeader, _RowHeader.RowHeader, _Cell.Cell]),
   hover: _propTypes.default.bool,
   isStacked: _propTypes.default.bool,

package/lib/Table/RowHeader/index.js

@@ -30,6 +30,7 @@ var _dec, _class, _class2, _temp;
 parent: Table
 id: Table.RowHeader
 ---
+@tsProps
 **/
 let RowHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class RowHeader extends _react.Component {
   componentDidMount() {

package/lib/Table/RowHeader/props.js

@@ -35,10 +35,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 const propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   isStacked: _propTypes.default.bool,
-
-  /**
-   * Control the text alignment in row header
-   */
   textAlign: _propTypes.default.oneOf(['start', 'center', 'end'])
 };
 exports.propTypes = propTypes;

package/lib/Table/index.js

@@ -47,6 +47,7 @@ var _dec, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let Table = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Table extends _react.Component {
   constructor() {
@@ -78,23 +79,23 @@ let Table = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   getHeaders() {
     const children = this.props.children;
 
-    const _Children$toArray = _react.Children.toArray(children),
-          _Children$toArray2 = (0, _slicedToArray2.default)(_Children$toArray, 1),
-          head = _Children$toArray2[0];
+    const _ref = _react.Children.toArray(children),
+          _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+          head = _ref2[0];
 
     if ((0, _matchComponentTypes.matchComponentTypes)(head, [_Head.Head])) {
-      const _Children$toArray3 = _react.Children.toArray(head.props.children),
-            _Children$toArray4 = (0, _slicedToArray2.default)(_Children$toArray3, 1),
-            row = _Children$toArray4[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() {
@@ -106,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,