@instructure/ui-table 10.2.1-snapshot-3 → 10.2.1-snapshot-11

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.2.1-snapshot-3](https://github.com/instructure/instructure-ui/compare/v10.2.0...v10.2.1-snapshot-3) (2024-08-30)
+## [10.2.1-snapshot-11](https://github.com/instructure/instructure-ui/compare/v10.2.0...v10.2.1-snapshot-11) (2024-08-30)
 
 **Note:** Version bump only for package @instructure/ui-table
 

package/es/Table/Body/index.js

@@ -24,13 +24,14 @@ var _dec, _class, _Body;
  */
 
 /** @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';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+import TableContext from '../TableContext';
 
 /**
 ---
@@ -50,22 +51,34 @@ let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
   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 jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Body.allowedProps), Body), {
       as: isStacked ? 'div' : 'tbody',
       css: styles === null || styles === void 0 ? void 0 : styles.body,
       role: isStacked ? 'rowgroup' : void 0
-    }), Children.map(children, child => safeCloneElement(child, {
-      key: child.props.name,
-      hover,
-      isStacked,
-      headers
-    })));
+    }), Children.map(children, child => {
+      if ( /*#__PURE__*/isValidElement(child)) {
+        return safeCloneElement(child, {
+          key: child.props.name,
+          // 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 = allowedProps, _Body.propTypes = propTypes, _Body.defaultProps = {
+}, _Body.displayName = "Body", _Body.componentId = 'Table.Body', _Body.contextType = TableContext, _Body.allowedProps = allowedProps, _Body.propTypes = propTypes, _Body.defaultProps = {
   children: null
 }, _Body)) || _class);
 export default Body;

package/es/Table/Body/props.js

@@ -24,10 +24,7 @@
 
 import PropTypes from 'prop-types';
 const propTypes = {
-  children: PropTypes.node,
-  hover: PropTypes.bool,
-  isStacked: PropTypes.bool,
-  headers: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.func]))
+  children: PropTypes.node
 };
-const allowedProps = ['children', 'hover', 'isStacked', 'headers'];
+const allowedProps = ['children'];
 export { propTypes, allowedProps };

package/es/Table/Body/styles.js

@@ -28,8 +28,6 @@
  * ---
  * 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/es/Table/Cell/index.js

@@ -31,6 +31,7 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+import TableContext from '../TableContext';
 
 /**
 ---
@@ -51,15 +52,15 @@ let Cell = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
     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 jsx(View, Object.assign({}, View.omitViewProps(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 && callRenderProp(header), header && ': ', callRenderProp(children));
   }
-}, _Cell.displayName = "Cell", _Cell.componentId = 'Table.Cell', _Cell.allowedProps = allowedProps, _Cell.propTypes = propTypes, _Cell.defaultProps = {
+}, _Cell.displayName = "Cell", _Cell.componentId = 'Table.Cell', _Cell.contextType = TableContext, _Cell.allowedProps = allowedProps, _Cell.propTypes = propTypes, _Cell.defaultProps = {
   textAlign: 'start',
   children: null
 }, _Cell)) || _class);

package/es/Table/Cell/props.js

@@ -25,9 +25,8 @@
 import PropTypes from 'prop-types';
 const propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  isStacked: PropTypes.bool,
   header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   textAlign: PropTypes.oneOf(['start', 'center', 'end'])
 };
-const allowedProps = ['children', 'isStacked', 'header', 'textAlign'];
+const allowedProps = ['children', 'header', 'textAlign'];
 export { propTypes, allowedProps };

package/es/Table/ColHeader/styles.js

@@ -29,7 +29,6 @@
  * 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, props) => {

package/es/Table/Head/index.js

@@ -26,7 +26,7 @@ var _dec, _class, _Head, _ScreenReaderContent;
 
 /** @jsx jsx */
 import { Component, Children } from 'react';
-import { omitProps, matchComponentTypes, callRenderProp } from '@instructure/ui-react-utils';
+import { omitProps, callRenderProp } from '@instructure/ui-react-utils';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { IconCheckLine } from '@instructure/ui-icons';
@@ -34,9 +34,8 @@ import { warn } from '@instructure/console';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { Row } from '../Row';
-import { ColHeader } from '../ColHeader';
 import { allowedProps, propTypes } from './props';
+import TableContext from '../TableContext';
 
 /**
 ---
@@ -45,15 +44,19 @@ id: Table.Head
 ---
 **/
 let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Head = class Head extends Component {
+  /**
+   * Returns `true` if the first child's children have a `onRequestSort` prop
+   */
   get isSortable() {
     const _ref = Children.toArray(this.props.children),
       _ref2 = _slicedToArray(_ref, 1),
-      row = _ref2[0];
+      firstRow = _ref2[0];
     let sortable = false;
-    if (row) {
-      Children.forEach(row.props.children, colHeader => {
-        if (matchComponentTypes(colHeader, [ColHeader])) {
-          if (colHeader.props.onRequestSort) sortable = true;
+    if (firstRow && firstRow.props && firstRow.props.children) {
+      Children.forEach(firstRow.props.children, grandchild => {
+        if (grandchild.props.onRequestSort) {
+          sortable = true;
+          return;
         }
       });
     }
@@ -70,38 +73,44 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
     }
     (_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 = Children.toArray(children),
       _ref4 = _slicedToArray(_ref3, 1),
-      row = _ref4[0];
-    if (!matchComponentTypes(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;
-    Children.forEach(row.props.children, colHeader => {
+    Children.forEach(firstRow.props.children, grandchild => {
       count += 1;
-      if (matchComponentTypes(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;
         }
       }
     });
@@ -146,13 +155,14 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
   render() {
     const _this$props4 = this.props,
       children = _this$props4.children,
-      isStacked = _this$props4.isStacked,
       styles = _this$props4.styles;
-    return isStacked ? this.renderSelect() : jsx("thead", Object.assign({}, 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
+    jsx("thead", Object.assign({}, omitProps(this.props, Head.allowedProps, ['hover']), {
       css: styles === null || styles === void 0 ? void 0 : styles.head
-    }), Children.map(children, child => matchComponentTypes(child, [Row]) ? child : null));
+    }), children);
   }
-}, _Head.displayName = "Head", _Head.componentId = 'Table.Head', _Head.allowedProps = allowedProps, _Head.propTypes = propTypes, _Head.defaultProps = {
+}, _Head.displayName = "Head", _Head.componentId = 'Table.Head', _Head.contextType = TableContext, _Head.allowedProps = allowedProps, _Head.propTypes = propTypes, _Head.defaultProps = {
   children: null
 }, _Head)) || _class);
 export default Head;

package/es/Table/Head/props.js

@@ -25,9 +25,7 @@
 import PropTypes from 'prop-types';
 const propTypes = {
   children: PropTypes.node,
-  hover: PropTypes.bool,
-  isStacked: PropTypes.bool,
   renderSortLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };
-const allowedProps = ['children', 'hover', 'isStacked', 'renderSortLabel'];
+const allowedProps = ['children', 'renderSortLabel'];
 export { propTypes, allowedProps };

package/es/Table/Head/styles.js

@@ -28,8 +28,6 @@
  * ---
  * 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/es/Table/Row/index.js

@@ -24,13 +24,14 @@ var _dec, _class, _Row;
  */
 
 /** @jsx jsx */
-import { Component, Children } from 'react';
+import { Component, Children, isValidElement } from 'react';
 import { omitProps, safeCloneElement } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+import TableContext from '../TableContext';
 
 /**
 ---
@@ -41,31 +42,43 @@ id: Table.Row
 let Row = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Row = class Row extends 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 jsx(View, Object.assign({}, View.omitViewProps(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
     }), Children.toArray(children).filter(Boolean).map((child, index) => {
-      return safeCloneElement(child, {
-        key: child.props.name,
-        isStacked,
-        header: headers && headers[index]
-      });
+      if ( /*#__PURE__*/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;
     }));
   }
-}, _Row.displayName = "Row", _Row.componentId = 'Table.Row', _Row.allowedProps = allowedProps, _Row.propTypes = propTypes, _Row.defaultProps = {
+}, _Row.displayName = "Row", _Row.componentId = 'Table.Row', _Row.contextType = TableContext, _Row.allowedProps = allowedProps, _Row.propTypes = propTypes, _Row.defaultProps = {
   children: null
 }, _Row)) || _class);
 export default Row;

package/es/Table/Row/props.js

@@ -24,10 +24,7 @@
 
 import PropTypes from 'prop-types';
 const propTypes = {
-  children: PropTypes.node,
-  hover: PropTypes.bool,
-  isStacked: PropTypes.bool,
-  headers: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.func]))
+  children: PropTypes.node
 };
-const allowedProps = ['children', 'hover', 'isStacked', 'headers'];
+const allowedProps = ['children'];
 export { propTypes, allowedProps };

package/es/Table/Row/styles.js

@@ -29,12 +29,10 @@
  * 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',
@@ -47,7 +45,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': {
@@ -55,7 +53,7 @@ const generateStyle = (componentTheme, props) => {
           borderRightColor: componentTheme.hoverBorderColor
         }
       }),
-      ...(isStacked && {
+      ...(extraArgs.isStacked && {
         padding: componentTheme.padding
       })
     }

package/es/Table/RowHeader/index.js

@@ -31,6 +31,7 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+import TableContext from '../TableContext';
 
 /**
 ---
@@ -50,8 +51,8 @@ let RowHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
   render() {
     const _this$props3 = this.props,
       children = _this$props3.children,
-      isStacked = _this$props3.isStacked,
       styles = _this$props3.styles;
+    const isStacked = this.context.isStacked;
     return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, RowHeader.allowedProps), RowHeader), {
       as: isStacked ? 'div' : 'th',
       css: styles === null || styles === void 0 ? void 0 : styles.rowHeader,
@@ -59,7 +60,7 @@ let RowHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
       role: isStacked ? 'rowheader' : void 0
     }), callRenderProp(children));
   }
-}, _RowHeader.displayName = "RowHeader", _RowHeader.componentId = 'Table.RowHeader', _RowHeader.allowedProps = allowedProps, _RowHeader.propTypes = propTypes, _RowHeader.defaultProps = {
+}, _RowHeader.displayName = "RowHeader", _RowHeader.componentId = 'Table.RowHeader', _RowHeader.contextType = TableContext, _RowHeader.allowedProps = allowedProps, _RowHeader.propTypes = propTypes, _RowHeader.defaultProps = {
   textAlign: 'start',
   children: null
 }, _RowHeader)) || _class);

package/es/Table/RowHeader/props.js

@@ -25,8 +25,7 @@
 import PropTypes from 'prop-types';
 const propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  isStacked: PropTypes.bool,
   textAlign: PropTypes.oneOf(['start', 'center', 'end'])
 };
-const allowedProps = ['children', 'isStacked', 'textAlign'];
+const allowedProps = ['children', 'textAlign'];
 export { propTypes, allowedProps };

package/es/Table/TableContext.js

@@ -0,0 +1,34 @@
+/*
+ * 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';
+/**
+ * React context created by the `Table` component to hold its data
+ */
+const TableContext = /*#__PURE__*/createContext({
+  isStacked: false,
+  hover: false
+});
+export default TableContext;
+export { TableContext };

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

@@ -1,4 +1,4 @@
-var _Table$Head, _Table$Body, _Table, _Table2, _Table3, _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)
  *
@@ -130,6 +130,15 @@ describe('<Table />', async () => {
     expect(stackedTable).toBeInTheDocument();
     expect(stackedTable).not.toHaveTextContent('Foo');
   });
+  it('does not crash for invalid children', async () => {
+    render( /*#__PURE__*/React.createElement(Table, {
+      caption: "Test table",
+      layout: "stacked"
+    }, "test1", _span || (_span = /*#__PURE__*/React.createElement("span", null, "test")), /*#__PURE__*/React.createElement(Table.Head, null, _span2 || (_span2 = /*#__PURE__*/React.createElement("span", null, "test")), "test2", _Table$Row || (_Table$Row = /*#__PURE__*/React.createElement(Table.Row, null, "test3", /*#__PURE__*/React.createElement("span", null, "test"), /*#__PURE__*/React.createElement(Table.Cell, null, "Foo"))), "test4", _span3 || (_span3 = /*#__PURE__*/React.createElement("span", null, "test"))), "test5", /*#__PURE__*/React.createElement(Table.Body, null, "test", _span4 || (_span4 = /*#__PURE__*/React.createElement("span", null, "test")), _Table$Row2 || (_Table$Row2 = /*#__PURE__*/React.createElement(Table.Row, null, "test", /*#__PURE__*/React.createElement("span", null, "test"), /*#__PURE__*/React.createElement(Table.Cell, null, "Foo"), "test", /*#__PURE__*/React.createElement("span", null, "test"))))));
+    const table = screen.getByRole('table');
+    expect(table).toBeInTheDocument();
+    expect(table).toHaveTextContent('Foo');
+  });
 
   // see https://github.com/vitest-dev/eslint-plugin-vitest/issues/511
   // eslint-disable-next-line vitest/valid-describe-callback
@@ -222,4 +231,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.Component {
+        render() {
+          return /*#__PURE__*/React.createElement(Table.Cell, this.props, this.props.children);
+        }
+      }
+      CustomTableCell.displayName = "CustomTableCell";
+      class CustomTableRow extends React.Component {
+        render() {
+          return /*#__PURE__*/React.createElement(Table.Row, this.props, _Table$RowHeader || (_Table$RowHeader = /*#__PURE__*/React.createElement(Table.RowHeader, null, "1")), _Table$Cell || (_Table$Cell = /*#__PURE__*/React.createElement(Table.Cell, null, "The Shawshank Redemption")), _CustomTableCell2 || (_CustomTableCell2 = /*#__PURE__*/React.createElement(CustomTableCell, null, "9.3")));
+        }
+      }
+      CustomTableRow.displayName = "CustomTableRow";
+      const table = render( /*#__PURE__*/React.createElement(Table, {
+        caption: "Test custom table"
+      }, _Table$Head2 || (_Table$Head2 = /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
+        id: "foo"
+      }, "ColHeader"), /*#__PURE__*/React.createElement(Table.ColHeader, {
+        id: "bar"
+      }, "Bar-header"), /*#__PURE__*/React.createElement(Table.ColHeader, {
+        id: "baz"
+      }, "Bar-header")))), /*#__PURE__*/React.createElement(Table.Body, null, /*#__PURE__*/React.createElement(CustomTableRow, null), _Table$Row3 || (_Table$Row3 = /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.RowHeader, null, "RowHeader"), /*#__PURE__*/React.createElement(Table.Cell, null, "Cell"), /*#__PURE__*/React.createElement(Table.Cell, null, "Cell2"))))));
+      const stackedTable = 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.Component {
+        render() {
+          return /*#__PURE__*/React.createElement("td", null, this.props.children);
+        }
+      }
+      CustomTableCell.displayName = "CustomTableCell";
+      class CustomTableRow extends React.Component {
+        render() {
+          return /*#__PURE__*/React.createElement("tr", null, this.props.children);
+        }
+      }
+      CustomTableRow.displayName = "CustomTableRow";
+      const table = render( /*#__PURE__*/React.createElement(Table, {
+        caption: "Test custom table"
+      }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(CustomTableRow, null, /*#__PURE__*/React.createElement(CustomTableCell, {
+        id: "foo"
+      }, "ColHeader"), /*#__PURE__*/React.createElement(CustomTableCell, {
+        id: "bar"
+      }, "Bar-header"), _Table$ColHeader || (_Table$ColHeader = /*#__PURE__*/React.createElement(Table.ColHeader, {
+        id: "baz"
+      }, "Bar-header")))), /*#__PURE__*/React.createElement(Table.Body, null, /*#__PURE__*/React.createElement(CustomTableRow, null, _Table$RowHeader2 || (_Table$RowHeader2 = /*#__PURE__*/React.createElement(Table.RowHeader, null, "RowHeader2")), /*#__PURE__*/React.createElement(CustomTableCell, null, "Cell"), _Table$Cell2 || (_Table$Cell2 = /*#__PURE__*/React.createElement(Table.Cell, null, "Cell2"))))));
+      const stackedTable = 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');
+    });
+  });
 });