@instructure/ui-table 9.7.2 → 9.8.0

package/lib/Table/Body/index.js

@@ -13,6 +13,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _TableContext = _interopRequireDefault(require("../TableContext"));
 var _dec, _class, _Body;
 /*
  * The MIT License (MIT)
@@ -56,10 +57,11 @@ let Body = exports.Body = (_dec = (0, _emotion.withStyle)(_styles.default, _them
   render() {
     const _this$props3 = this.props,
       children = _this$props3.children,
-      hover = _this$props3.hover,
-      isStacked = _this$props3.isStacked,
-      headers = _this$props3.headers,
       styles = _this$props3.styles;
+    const _this$context = this.context,
+      isStacked = _this$context.isStacked,
+      hover = _this$context.hover,
+      headers = _this$context.headers;
     return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Body.allowedProps), Body), {
       as: isStacked ? 'div' : 'tbody',
       css: styles === null || styles === void 0 ? void 0 : styles.body,
@@ -68,15 +70,21 @@ let Body = exports.Body = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
         return (0, _safeCloneElement.safeCloneElement)(child, {
           key: child.props.name,
-          isStacked,
+          // Sent down for compatibility with custom components
+          // TODO DEPRECATED, remove in v11
           hover,
+          // Sent down for compatibility with custom components
+          // TODO DEPRECATED, remove in v11
+          isStacked,
+          // Sent down for compatibility with custom components
+          // TODO DEPRECATED, remove in v11
           headers
         });
       }
       return child;
     }));
   }
-}, _Body.displayName = "Body", _Body.componentId = 'Table.Body', _Body.allowedProps = _props.allowedProps, _Body.propTypes = _props.propTypes, _Body.defaultProps = {
+}, _Body.displayName = "Body", _Body.componentId = 'Table.Body', _Body.contextType = _TableContext.default, _Body.allowedProps = _props.allowedProps, _Body.propTypes = _props.propTypes, _Body.defaultProps = {
   children: null
 }, _Body)) || _class);
 var _default = exports.default = Body;

package/lib/Table/Body/props.js

@@ -31,9 +31,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  */
 
 const propTypes = exports.propTypes = {
-  children: _propTypes.default.node,
-  hover: _propTypes.default.bool,
-  isStacked: _propTypes.default.bool,
-  headers: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]))
+  children: _propTypes.default.node
 };
-const allowedProps = exports.allowedProps = ['children', 'hover', 'isStacked', 'headers'];
+const allowedProps = exports.allowedProps = ['children'];

package/lib/Table/Body/styles.js

@@ -34,8 +34,6 @@ exports.default = void 0;
  * ---
  * 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
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = componentTheme => {

package/lib/Table/Cell/index.js

@@ -13,6 +13,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _TableContext = _interopRequireDefault(require("../TableContext"));
 var _dec, _class, _Cell;
 /*
  * The MIT License (MIT)
@@ -57,15 +58,15 @@ let Cell = exports.Cell = (_dec = (0, _emotion.withStyle)(_styles.default, _them
     const _this$props3 = this.props,
       children = _this$props3.children,
       styles = _this$props3.styles,
-      isStacked = _this$props3.isStacked,
       header = _this$props3.header;
+    const isStacked = this.context.isStacked;
     return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Cell.allowedProps), Cell), {
       as: isStacked ? 'div' : 'td',
       css: styles === null || styles === void 0 ? void 0 : styles.cell,
       role: isStacked ? 'cell' : void 0
     }), header && (0, _callRenderProp.callRenderProp)(header), header && ': ', (0, _callRenderProp.callRenderProp)(children));
   }
-}, _Cell.displayName = "Cell", _Cell.componentId = 'Table.Cell', _Cell.allowedProps = _props.allowedProps, _Cell.propTypes = _props.propTypes, _Cell.defaultProps = {
+}, _Cell.displayName = "Cell", _Cell.componentId = 'Table.Cell', _Cell.contextType = _TableContext.default, _Cell.allowedProps = _props.allowedProps, _Cell.propTypes = _props.propTypes, _Cell.defaultProps = {
   textAlign: 'start',
   children: null
 }, _Cell)) || _class);

package/lib/Table/Cell/props.js

@@ -32,8 +32,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 const propTypes = exports.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]),
   textAlign: _propTypes.default.oneOf(['start', 'center', 'end'])
 };
-const allowedProps = exports.allowedProps = ['children', 'isStacked', 'header', 'textAlign'];
+const allowedProps = exports.allowedProps = ['children', 'header', 'textAlign'];

package/lib/Table/ColHeader/props.js

@@ -31,6 +31,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  */
 
 const propTypes = exports.propTypes = {
+  isStacked: _propTypes.default.bool,
   id: _propTypes.default.string.isRequired,
   stackedSortByLabel: _propTypes.default.string,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
@@ -40,4 +41,4 @@ const propTypes = exports.propTypes = {
   onRequestSort: _propTypes.default.func,
   scope: _propTypes.default.oneOf(['row', 'col', 'rowgroup', 'colgroup', 'auto'])
 };
-const allowedProps = exports.allowedProps = ['id', 'stackedSortByLabel', 'children', 'width', 'textAlign', 'sortDirection', 'onRequestSort', 'scope'];
+const allowedProps = exports.allowedProps = ['id', 'isStacked', 'stackedSortByLabel', 'children', 'width', 'textAlign', 'sortDirection', 'onRequestSort', 'scope'];

package/lib/Table/Head/index.js

@@ -8,7 +8,6 @@ exports.default = exports.Head = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _SimpleSelect = require("@instructure/ui-simple-select/lib/SimpleSelect");
 var _ScreenReaderContent2 = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
@@ -17,9 +16,8 @@ var _console = require("@instructure/console");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
-var _Row = require("../Row");
-var _ColHeader = require("../ColHeader");
 var _props = require("./props");
+var _TableContext = _interopRequireDefault(require("../TableContext"));
 var _dec, _class, _Head, _ScreenReaderContent;
 /*
  * The MIT License (MIT)
@@ -52,15 +50,19 @@ id: Table.Head
 ---
 **/
 let Head = exports.Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Head = class Head extends _react.Component {
+  /**
+   * Returns `true` if the first child's children have a `onRequestSort` prop
+   */
   get isSortable() {
     const _ref = _react.Children.toArray(this.props.children),
       _ref2 = (0, _slicedToArray2.default)(_ref, 1),
-      row = _ref2[0];
+      firstRow = _ref2[0];
     let sortable = false;
-    if (row) {
-      _react.Children.forEach(row.props.children, colHeader => {
-        if ((0, _matchComponentTypes.matchComponentTypes)(colHeader, [_ColHeader.ColHeader])) {
-          if (colHeader.props.onRequestSort) sortable = true;
+    if (firstRow && firstRow.props && firstRow.props.children) {
+      _react.Children.forEach(firstRow.props.children, grandchild => {
+        if (grandchild.props.onRequestSort) {
+          sortable = true;
+          return;
         }
       });
     }
@@ -77,38 +79,44 @@ let Head = exports.Head = (_dec = (0, _emotion.withStyle)(_styles.default, _them
     }
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
+
+  /**
+   * This `Select` is used in `stacked` layout. It's populated by iterating
+   * through the first child's children (by default `ColHeader`) and reading
+   * there the `id`, `stackedSortByLabel`, `sortDirection`, `onRequestSort` props
+   */
   renderSelect() {
+    var _firstRow$props;
     const _this$props3 = this.props,
       children = _this$props3.children,
       renderSortLabel = _this$props3.renderSortLabel;
     const _ref3 = _react.Children.toArray(children),
       _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
-      row = _ref4[0];
-    if (!(0, _matchComponentTypes.matchComponentTypes)(row, [_Row.Row])) {
+      firstRow = _ref4[0];
+    if (!(firstRow !== null && firstRow !== void 0 && (_firstRow$props = firstRow.props) !== null && _firstRow$props !== void 0 && _firstRow$props.children)) {
       return null;
     }
     const options = [];
     const clickHandlers = {};
     let selectedOption;
     let count = 0;
-    _react.Children.forEach(row.props.children, colHeader => {
+    _react.Children.forEach(firstRow.props.children, grandchild => {
       count += 1;
-      if ((0, _matchComponentTypes.matchComponentTypes)(colHeader, [_ColHeader.ColHeader])) {
-        const _colHeader$props = colHeader.props,
-          id = _colHeader$props.id,
-          stackedSortByLabel = _colHeader$props.stackedSortByLabel,
-          sortDirection = _colHeader$props.sortDirection,
-          onRequestSort = _colHeader$props.onRequestSort;
+      if (!grandchild.props) return;
+      const _grandchild$props = grandchild.props,
+        id = _grandchild$props.id,
+        stackedSortByLabel = _grandchild$props.stackedSortByLabel,
+        sortDirection = _grandchild$props.sortDirection,
+        onRequestSort = _grandchild$props.onRequestSort;
+      if (id && onRequestSort) {
         const label = stackedSortByLabel || id;
-        if (onRequestSort) {
-          options.push({
-            id,
-            label
-          });
-          clickHandlers[id] = onRequestSort;
-          if (sortDirection !== 'none') {
-            selectedOption = id;
-          }
+        options.push({
+          id,
+          label
+        });
+        clickHandlers[id] = onRequestSort;
+        if (sortDirection !== 'none') {
+          selectedOption = id;
         }
       }
     });
@@ -153,13 +161,14 @@ let Head = exports.Head = (_dec = (0, _emotion.withStyle)(_styles.default, _them
   render() {
     const _this$props4 = this.props,
       children = _this$props4.children,
-      isStacked = _this$props4.isStacked,
       styles = _this$props4.styles;
-    return isStacked ? this.renderSelect() : (0, _emotion.jsx)("thead", Object.assign({}, (0, _omitProps.omitProps)(this.props, Head.allowedProps), {
+    return this.context.isStacked ? this.renderSelect() :
+    // TODO remove 'hover' exclude in v11, its passed down for compatibility with custom components
+    (0, _emotion.jsx)("thead", Object.assign({}, (0, _omitProps.omitProps)(this.props, Head.allowedProps, ['hover']), {
       css: styles === null || styles === void 0 ? void 0 : styles.head
-    }), _react.Children.map(children, child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Row.Row]) ? child : null));
+    }), children);
   }
-}, _Head.displayName = "Head", _Head.componentId = 'Table.Head', _Head.allowedProps = _props.allowedProps, _Head.propTypes = _props.propTypes, _Head.defaultProps = {
+}, _Head.displayName = "Head", _Head.componentId = 'Table.Head', _Head.contextType = _TableContext.default, _Head.allowedProps = _props.allowedProps, _Head.propTypes = _props.propTypes, _Head.defaultProps = {
   children: null
 }, _Head)) || _class);
 var _default = exports.default = Head;

package/lib/Table/Head/props.js

@@ -32,7 +32,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 const propTypes = exports.propTypes = {
   children: _propTypes.default.node,
-  isStacked: _propTypes.default.bool,
   renderSortLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
 };
-const allowedProps = exports.allowedProps = ['children', 'isStacked', 'renderSortLabel'];
+const allowedProps = exports.allowedProps = ['children', 'renderSortLabel'];

package/lib/Table/Head/styles.js

@@ -34,8 +34,6 @@ exports.default = void 0;
  * ---
  * 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
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = componentTheme => {

package/lib/Table/Row/index.js

@@ -8,14 +8,12 @@ exports.default = exports.Row = void 0;
 var _react = require("react");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _View = require("@instructure/ui-view/lib/View");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
-var _Cell = require("../Cell");
-var _RowHeader = require("../RowHeader");
 var _props = require("./props");
+var _TableContext = _interopRequireDefault(require("../TableContext"));
 var _dec, _class, _Row;
 /*
  * The MIT License (MIT)
@@ -50,40 +48,43 @@ id: Table.Row
 let Row = exports.Row = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Row = class Row extends _react.Component {
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, {
+      isStacked: this.context.isStacked,
+      hover: this.context.hover
+    });
   }
   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);
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
+      isStacked: this.context.isStacked,
+      hover: this.context.hover
+    });
   }
   render() {
     const _this$props3 = this.props,
       children = _this$props3.children,
-      styles = _this$props3.styles,
-      isStacked = _this$props3.isStacked,
-      headers = _this$props3.headers;
+      styles = _this$props3.styles;
+    const isStacked = this.context.isStacked;
+    const headers = this.context.headers;
     return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Row.allowedProps), Row), {
       as: isStacked ? 'div' : 'tr',
       css: styles === null || styles === void 0 ? void 0 : styles.row,
       role: isStacked ? 'row' : void 0
     }), _react.Children.toArray(children).filter(Boolean).map((child, index) => {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_RowHeader.RowHeader])) {
+      if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
         return (0, _safeCloneElement.safeCloneElement)(child, {
-          key: index,
-          isStacked
-        });
-      }
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Cell.Cell])) {
-        return (0, _safeCloneElement.safeCloneElement)(child, {
-          key: index,
+          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;
     }));
   }
-}, _Row.displayName = "Row", _Row.componentId = 'Table.Row', _Row.allowedProps = _props.allowedProps, _Row.propTypes = _props.propTypes, _Row.defaultProps = {
+}, _Row.displayName = "Row", _Row.componentId = 'Table.Row', _Row.contextType = _TableContext.default, _Row.allowedProps = _props.allowedProps, _Row.propTypes = _props.propTypes, _Row.defaultProps = {
   children: null
 }, _Row)) || _class);
 var _default = exports.default = Row;

package/lib/Table/Row/props.js

@@ -31,9 +31,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  */
 
 const propTypes = exports.propTypes = {
-  children: _propTypes.default.node,
-  hover: _propTypes.default.bool,
-  isStacked: _propTypes.default.bool,
-  headers: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]))
+  children: _propTypes.default.node
 };
-const allowedProps = exports.allowedProps = ['children', 'hover', 'isStacked', 'headers'];
+const allowedProps = exports.allowedProps = ['children'];

package/lib/Table/Row/styles.js

@@ -35,12 +35,10 @@ exports.default = void 0;
  * 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, props) => {
-  const hover = props.hover,
-    isStacked = props.isStacked;
+const generateStyle = (componentTheme, _props, extraArgs) => {
   return {
     row: {
       label: 'row',
@@ -53,7 +51,7 @@ const generateStyle = (componentTheme, props) => {
       borderBottomStyle: 'solid',
       borderBottomWidth: '0.0625rem',
       borderBottomColor: componentTheme.borderColor,
-      ...(hover && {
+      ...(extraArgs.hover && {
         borderLeft: '0.1875rem solid transparent',
         borderRight: '0.1875rem solid transparent',
         '&:hover': {
@@ -61,7 +59,7 @@ const generateStyle = (componentTheme, props) => {
           borderRightColor: componentTheme.hoverBorderColor
         }
       }),
-      ...(isStacked && {
+      ...(extraArgs.isStacked && {
         padding: componentTheme.padding
       })
     }

package/lib/Table/RowHeader/index.js

@@ -13,6 +13,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _TableContext = _interopRequireDefault(require("../TableContext"));
 var _dec, _class, _RowHeader;
 /*
  * The MIT License (MIT)
@@ -56,8 +57,8 @@ let RowHeader = exports.RowHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
   render() {
     const _this$props3 = this.props,
       children = _this$props3.children,
-      isStacked = _this$props3.isStacked,
       styles = _this$props3.styles;
+    const isStacked = this.context.isStacked;
     return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, RowHeader.allowedProps), RowHeader), {
       as: isStacked ? 'div' : 'th',
       css: styles === null || styles === void 0 ? void 0 : styles.rowHeader,
@@ -65,7 +66,7 @@ let RowHeader = exports.RowHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
       role: isStacked ? 'rowheader' : void 0
     }), (0, _callRenderProp.callRenderProp)(children));
   }
-}, _RowHeader.displayName = "RowHeader", _RowHeader.componentId = 'Table.RowHeader', _RowHeader.allowedProps = _props.allowedProps, _RowHeader.propTypes = _props.propTypes, _RowHeader.defaultProps = {
+}, _RowHeader.displayName = "RowHeader", _RowHeader.componentId = 'Table.RowHeader', _RowHeader.contextType = _TableContext.default, _RowHeader.allowedProps = _props.allowedProps, _RowHeader.propTypes = _props.propTypes, _RowHeader.defaultProps = {
   textAlign: 'start',
   children: null
 }, _RowHeader)) || _class);

package/lib/Table/RowHeader/props.js

@@ -32,7 +32,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 const propTypes = exports.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  isStacked: _propTypes.default.bool,
   textAlign: _propTypes.default.oneOf(['start', 'center', 'end'])
 };
-const allowedProps = exports.allowedProps = ['children', 'isStacked', 'textAlign'];
+const allowedProps = exports.allowedProps = ['children', 'textAlign'];

package/lib/Table/TableContext.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TableContext = void 0;
+var _react = require("react");
+/*
+ * 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.
+ */
+
+/**
+ * React context created by the `Table` component to hold its data
+ */
+const TableContext = exports.TableContext = /*#__PURE__*/(0, _react.createContext)({
+  isStacked: false,
+  hover: false
+});
+var _default = exports.default = TableContext;

package/lib/Table/__new-tests__/Table.test.js

@@ -8,7 +8,7 @@ var _userEvent = require("@testing-library/user-event");
 require("@testing-library/jest-dom");
 var _index = require("../index");
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
-var _Table$Head, _Table$Body, _Table, _Table2, _Table3, _span, _Table$Row, _span2, _span3, _Table$Row2, _Table$Body2;
+var _Table$Head, _Table$Body, _Table, _Table2, _Table3, _span, _span2, _Table$Row, _span3, _span4, _Table$Row2, _Table$Body2, _Table$RowHeader, _Table$Cell, _Table$Head2, _Table$Row3, _Table$ColHeader, _Table$RowHeader2, _Table$Cell2;
 /*
  * The MIT License (MIT)
  *
@@ -133,7 +133,7 @@ describe('<Table />', async () => {
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, {
       caption: "Test table",
       layout: "stacked"
-    }, /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, _span || (_span = /*#__PURE__*/_react.default.createElement("span", null, "test")), "test2", _Table$Row || (_Table$Row = /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, "test3", /*#__PURE__*/_react.default.createElement("span", null, "test"), /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Foo"))), "test4", _span2 || (_span2 = /*#__PURE__*/_react.default.createElement("span", null, "test"))), "test5", /*#__PURE__*/_react.default.createElement(_index.Table.Body, null, "test", _span3 || (_span3 = /*#__PURE__*/_react.default.createElement("span", null, "test")), _Table$Row2 || (_Table$Row2 = /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, "test", /*#__PURE__*/_react.default.createElement("span", null, "test"), /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Foo"), "test", /*#__PURE__*/_react.default.createElement("span", null, "test"))))));
+    }, "test1", _span || (_span = /*#__PURE__*/_react.default.createElement("span", null, "test")), /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, _span2 || (_span2 = /*#__PURE__*/_react.default.createElement("span", null, "test")), "test2", _Table$Row || (_Table$Row = /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, "test3", /*#__PURE__*/_react.default.createElement("span", null, "test"), /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Foo"))), "test4", _span3 || (_span3 = /*#__PURE__*/_react.default.createElement("span", null, "test"))), "test5", /*#__PURE__*/_react.default.createElement(_index.Table.Body, null, "test", _span4 || (_span4 = /*#__PURE__*/_react.default.createElement("span", null, "test")), _Table$Row2 || (_Table$Row2 = /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, "test", /*#__PURE__*/_react.default.createElement("span", null, "test"), /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Foo"), "test", /*#__PURE__*/_react.default.createElement("span", null, "test"))))));
     const table = _react2.screen.getByRole('table');
     expect(table).toBeInTheDocument();
     expect(table).toHaveTextContent('Foo');
@@ -227,4 +227,68 @@ describe('<Table />', async () => {
       expect(header).toHaveAttribute('aria-sort', 'descending');
     });
   });
+  describe('when using custom components', () => {
+    it('should render wrapper HOCs', () => {
+      var _CustomTableCell2;
+      class CustomTableCell extends _react.default.Component {
+        render() {
+          return /*#__PURE__*/_react.default.createElement(_index.Table.Cell, this.props, this.props.children);
+        }
+      }
+      CustomTableCell.displayName = "CustomTableCell";
+      class CustomTableRow extends _react.default.Component {
+        render() {
+          return /*#__PURE__*/_react.default.createElement(_index.Table.Row, this.props, _Table$RowHeader || (_Table$RowHeader = /*#__PURE__*/_react.default.createElement(_index.Table.RowHeader, null, "1")), _Table$Cell || (_Table$Cell = /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "The Shawshank Redemption")), _CustomTableCell2 || (_CustomTableCell2 = /*#__PURE__*/_react.default.createElement(CustomTableCell, null, "9.3")));
+        }
+      }
+      CustomTableRow.displayName = "CustomTableRow";
+      const table = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, {
+        caption: "Test custom table"
+      }, _Table$Head2 || (_Table$Head2 = /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, {
+        id: "foo"
+      }, "ColHeader"), /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, {
+        id: "bar"
+      }, "Bar-header"), /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, {
+        id: "baz"
+      }, "Bar-header")))), /*#__PURE__*/_react.default.createElement(_index.Table.Body, null, /*#__PURE__*/_react.default.createElement(CustomTableRow, null), _Table$Row3 || (_Table$Row3 = /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.RowHeader, null, "RowHeader"), /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Cell"), /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Cell2"))))));
+      const stackedTable = _react2.screen.getByRole('table');
+      expect(stackedTable).toBeInTheDocument();
+      const container = table.container;
+      expect(container).toBeInTheDocument();
+      expect(container).toHaveTextContent('The Shawshank Redemption');
+      expect(container).toHaveTextContent('9.3');
+    });
+    it('should render fully custom components', () => {
+      class CustomTableCell extends _react.default.Component {
+        render() {
+          return /*#__PURE__*/_react.default.createElement("td", null, this.props.children);
+        }
+      }
+      CustomTableCell.displayName = "CustomTableCell";
+      class CustomTableRow extends _react.default.Component {
+        render() {
+          return /*#__PURE__*/_react.default.createElement("tr", null, this.props.children);
+        }
+      }
+      CustomTableRow.displayName = "CustomTableRow";
+      const table = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, {
+        caption: "Test custom table"
+      }, /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, /*#__PURE__*/_react.default.createElement(CustomTableRow, null, /*#__PURE__*/_react.default.createElement(CustomTableCell, {
+        id: "foo"
+      }, "ColHeader"), /*#__PURE__*/_react.default.createElement(CustomTableCell, {
+        id: "bar"
+      }, "Bar-header"), _Table$ColHeader || (_Table$ColHeader = /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, {
+        id: "baz"
+      }, "Bar-header")))), /*#__PURE__*/_react.default.createElement(_index.Table.Body, null, /*#__PURE__*/_react.default.createElement(CustomTableRow, null, _Table$RowHeader2 || (_Table$RowHeader2 = /*#__PURE__*/_react.default.createElement(_index.Table.RowHeader, null, "RowHeader2")), /*#__PURE__*/_react.default.createElement(CustomTableCell, null, "Cell"), _Table$Cell2 || (_Table$Cell2 = /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Cell2"))))));
+      const stackedTable = _react2.screen.getByRole('table');
+      expect(stackedTable).toBeInTheDocument();
+      const container = table.container;
+      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/lib/Table/index.js

@@ -21,6 +21,7 @@ var _ColHeader = require("./ColHeader");
 var _RowHeader = require("./RowHeader");
 var _Cell = require("./Cell");
 var _props = require("./props");
+var _TableContext = _interopRequireDefault(require("./TableContext"));
 var _dec, _class, _Table;
 /*
  * The MIT License (MIT)
@@ -95,7 +96,13 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       styles = _this$props3.styles;
     const isStacked = layout === 'stacked';
     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), {
+    return (0, _emotion.jsx)(_TableContext.default.Provider, {
+      value: {
+        isStacked: isStacked,
+        hover: hover,
+        headers: headers
+      }
+    }, (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Table.allowedProps), Table), {
       as: isStacked ? 'div' : 'table',
       margin: margin,
       elementRef: this.handleRef,
@@ -105,14 +112,11 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyle)(_styles.default, _th
     }), !isStacked && (0, _emotion.jsx)("caption", null, (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, caption)), _react.Children.map(children, child => {
       if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
         return (0, _safeCloneElement.safeCloneElement)(child, {
-          key: child.props.name,
-          isStacked,
-          hover,
-          headers
+          key: child.props.name
         });
       }
       return child;
-    }));
+    })));
   }
 }, _Table.displayName = "Table", _Table.componentId = 'Table', _Table.allowedProps = _props.allowedProps, _Table.propTypes = _props.propTypes, _Table.defaultProps = {
   children: null,

package/lib/index.js

@@ -9,4 +9,11 @@ Object.defineProperty(exports, "Table", {
     return _Table.Table;
   }
 });
-var _Table = require("./Table");
+Object.defineProperty(exports, "TableContext", {
+  enumerable: true,
+  get: function () {
+    return _TableContext.TableContext;
+  }
+});
+var _Table = require("./Table");
+var _TableContext = require("./Table/TableContext");