@instructure/ui-table 10.16.1-snapshot-0 → 10.16.1

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

@@ -23,13 +23,14 @@ var _Table$Head, _Table$Body, _Table, _Table2, _Table3, _span, _span2, _Table$Ro
  * SOFTWARE.
  */
 
-import React from 'react';
+import { Component } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import { userEvent } from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { Table } from '../index';
 import { runAxeCheck } from '@instructure/ui-axe-check';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('<Table />', async () => {
   let consoleErrorMock;
   beforeEach(() => {
@@ -39,13 +40,29 @@ describe('<Table />', async () => {
   afterEach(() => {
     consoleErrorMock.mockRestore();
   });
-  const renderTable = props => render(/*#__PURE__*/React.createElement(Table, Object.assign({
-    caption: "Test table"
-  }, props), _Table$Head || (_Table$Head = /*#__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")))), _Table$Body || (_Table$Body = /*#__PURE__*/React.createElement(Table.Body, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.RowHeader, null, "RowHeader"), /*#__PURE__*/React.createElement(Table.Cell, null, "Cell"))))));
+  const renderTable = props => render(_jsxs(Table, {
+    caption: "Test table",
+    ...props,
+    children: [_Table$Head || (_Table$Head = _jsx(Table.Head, {
+      children: _jsxs(Table.Row, {
+        children: [_jsx(Table.ColHeader, {
+          id: "foo",
+          children: "ColHeader"
+        }), _jsx(Table.ColHeader, {
+          id: "bar",
+          children: "Bar-header"
+        })]
+      })
+    })), _Table$Body || (_Table$Body = _jsx(Table.Body, {
+      children: _jsxs(Table.Row, {
+        children: [_jsx(Table.RowHeader, {
+          children: "RowHeader"
+        }), _jsx(Table.Cell, {
+          children: "Cell"
+        })]
+      })
+    }))]
+  }));
   it('should render a caption', async () => {
     const _renderTable = renderTable(),
       container = _renderTable.container;
@@ -103,48 +120,96 @@ describe('<Table />', async () => {
     expect(stackedTable).not.toHaveTextContent('ColHeader');
   });
   it('can handle non-existent head in stacked layout', async () => {
-    render(_Table || (_Table = /*#__PURE__*/React.createElement(Table, {
+    render(_Table || (_Table = _jsx(Table, {
       caption: "Test table",
-      layout: "stacked"
-    }, /*#__PURE__*/React.createElement(Table.Body, null))));
+      layout: "stacked",
+      children: _jsx(Table.Body, {})
+    })));
     const stackedTable = screen.getByRole('table');
     expect(stackedTable).toBeInTheDocument();
   });
   it('can handle empty head in stacked layout', async () => {
-    render(_Table2 || (_Table2 = /*#__PURE__*/React.createElement(Table, {
+    render(_Table2 || (_Table2 = _jsx(Table, {
       caption: "Test table",
-      layout: "stacked"
-    }, /*#__PURE__*/React.createElement(Table.Head, null))));
+      layout: "stacked",
+      children: _jsx(Table.Head, {})
+    })));
     const stackedTable = screen.getByRole('table');
     expect(stackedTable).toBeInTheDocument();
   });
   it('can handle invalid header in stacked layout', async () => {
-    render(_Table3 || (_Table3 = /*#__PURE__*/React.createElement(Table, {
+    render(_Table3 || (_Table3 = _jsx(Table, {
       caption: "Test table",
-      layout: "stacked"
-    }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.Cell, null, "Foo"))))));
+      layout: "stacked",
+      children: _jsx(Table.Head, {
+        children: _jsx(Table.Row, {
+          children: _jsx(Table.Cell, {
+            children: "Foo"
+          })
+        })
+      })
+    })));
     const stackedTable = screen.getByRole('table');
     expect(stackedTable).toBeInTheDocument();
     expect(stackedTable).not.toHaveTextContent('Foo');
   });
   it('does not crash for invalid children', async () => {
-    render(/*#__PURE__*/React.createElement(Table, {
+    render(_jsxs(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"))))));
+      layout: "stacked",
+      children: ["test1", _span || (_span = _jsx("span", {
+        children: "test"
+      })), _jsxs(Table.Head, {
+        children: [_span2 || (_span2 = _jsx("span", {
+          children: "test"
+        })), "test2", _Table$Row || (_Table$Row = _jsxs(Table.Row, {
+          children: ["test3", _jsx("span", {
+            children: "test"
+          }), _jsx(Table.Cell, {
+            children: "Foo"
+          })]
+        })), "test4", _span3 || (_span3 = _jsx("span", {
+          children: "test"
+        }))]
+      }), "test5", _jsxs(Table.Body, {
+        children: ["test", _span4 || (_span4 = _jsx("span", {
+          children: "test"
+        })), _Table$Row2 || (_Table$Row2 = _jsxs(Table.Row, {
+          children: ["test", _jsx("span", {
+            children: "test"
+          }), _jsx(Table.Cell, {
+            children: "Foo"
+          }), "test", _jsx("span", {
+            children: "test"
+          })]
+        }))]
+      })]
+    }));
     const table = screen.getByRole('table');
     expect(table).toBeInTheDocument();
     expect(table).toHaveTextContent('Foo');
   });
   describe('when table is sortable', async () => {
-    const renderSortableTable = (props, handlers = {}, layout = 'auto') => render(/*#__PURE__*/React.createElement(Table, {
+    const renderSortableTable = (props, handlers = {}, layout = 'auto') => render(_jsxs(Table, {
       caption: "Sortable table",
-      layout: layout
-    }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, Object.assign({
-      id: "foo"
-    }, props, handlers), "Foo"), /*#__PURE__*/React.createElement(Table.ColHeader, Object.assign({
-      id: "bar"
-    }, handlers), "Bar"))), _Table$Body2 || (_Table$Body2 = /*#__PURE__*/React.createElement(Table.Body, null, /*#__PURE__*/React.createElement(Table.Row, null), /*#__PURE__*/React.createElement(Table.Row, null)))));
+      layout: layout,
+      children: [_jsx(Table.Head, {
+        children: _jsxs(Table.Row, {
+          children: [_jsx(Table.ColHeader, {
+            id: "foo",
+            ...props,
+            ...handlers,
+            children: "Foo"
+          }), _jsx(Table.ColHeader, {
+            id: "bar",
+            ...handlers,
+            children: "Bar"
+          })]
+        })
+      }), _Table$Body2 || (_Table$Body2 = _jsxs(Table.Body, {
+        children: [_jsx(Table.Row, {}), _jsx(Table.Row, {})]
+      }))]
+    }));
     it('can render up arrow for ascending order', async () => {
       const _renderSortableTable = renderSortableTable({
           id: 'id',
@@ -228,27 +293,57 @@ describe('<Table />', async () => {
   describe('when using custom components', () => {
     it('should render wrapper HOCs', () => {
       var _CustomTableCell2;
-      class CustomTableCell extends React.Component {
+      class CustomTableCell extends Component {
         render() {
-          return /*#__PURE__*/React.createElement(Table.Cell, this.props, this.props.children);
+          return _jsx(Table.Cell, {
+            ...this.props,
+            children: this.props.children
+          });
         }
       }
       CustomTableCell.displayName = "CustomTableCell";
-      class CustomTableRow extends React.Component {
+      class CustomTableRow extends 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")));
+          return _jsxs(Table.Row, {
+            ...this.props,
+            children: [_Table$RowHeader || (_Table$RowHeader = _jsx(Table.RowHeader, {
+              children: "1"
+            })), _Table$Cell || (_Table$Cell = _jsx(Table.Cell, {
+              children: "The Shawshank Redemption"
+            })), _CustomTableCell2 || (_CustomTableCell2 = _jsx(CustomTableCell, {
+              children: "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 table = render(_jsxs(Table, {
+        caption: "Test custom table",
+        children: [_Table$Head2 || (_Table$Head2 = _jsx(Table.Head, {
+          children: _jsxs(Table.Row, {
+            children: [_jsx(Table.ColHeader, {
+              id: "foo",
+              children: "ColHeader"
+            }), _jsx(Table.ColHeader, {
+              id: "bar",
+              children: "Bar-header"
+            }), _jsx(Table.ColHeader, {
+              id: "baz",
+              children: "Bar-header"
+            })]
+          })
+        })), _jsxs(Table.Body, {
+          children: [_jsx(CustomTableRow, {}), _Table$Row3 || (_Table$Row3 = _jsxs(Table.Row, {
+            children: [_jsx(Table.RowHeader, {
+              children: "RowHeader"
+            }), _jsx(Table.Cell, {
+              children: "Cell"
+            }), _jsx(Table.Cell, {
+              children: "Cell2"
+            })]
+          }))]
+        })]
+      }));
       const stackedTable = screen.getByRole('table');
       expect(stackedTable).toBeInTheDocument();
       const container = table.container;
@@ -257,27 +352,49 @@ describe('<Table />', async () => {
       expect(container).toHaveTextContent('9.3');
     });
     it('should render fully custom components', () => {
-      class CustomTableCell extends React.Component {
+      class CustomTableCell extends Component {
         render() {
-          return /*#__PURE__*/React.createElement("td", null, this.props.children);
+          return _jsx("td", {
+            children: this.props.children
+          });
         }
       }
       CustomTableCell.displayName = "CustomTableCell";
-      class CustomTableRow extends React.Component {
+      class CustomTableRow extends Component {
         render() {
-          return /*#__PURE__*/React.createElement("tr", null, this.props.children);
+          return _jsx("tr", {
+            children: 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 table = render(_jsxs(Table, {
+        caption: "Test custom table",
+        children: [_jsx(Table.Head, {
+          children: _jsxs(CustomTableRow, {
+            children: [_jsx(CustomTableCell, {
+              id: "foo",
+              children: "ColHeader"
+            }), _jsx(CustomTableCell, {
+              id: "bar",
+              children: "Bar-header"
+            }), _Table$ColHeader || (_Table$ColHeader = _jsx(Table.ColHeader, {
+              id: "baz",
+              children: "Bar-header"
+            }))]
+          })
+        }), _jsx(Table.Body, {
+          children: _jsxs(CustomTableRow, {
+            children: [_Table$RowHeader2 || (_Table$RowHeader2 = _jsx(Table.RowHeader, {
+              children: "RowHeader2"
+            })), _jsx(CustomTableCell, {
+              children: "Cell"
+            }), _Table$Cell2 || (_Table$Cell2 = _jsx(Table.Cell, {
+              children: "Cell2"
+            }))]
+          })
+        })]
+      }));
       const stackedTable = screen.getByRole('table');
       expect(stackedTable).toBeInTheDocument();
       const container = table.container;

package/es/Table/index.js

@@ -24,12 +24,11 @@ var _dec, _class, _Table;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component, Children, isValidElement } from 'react';
 import { safeCloneElement, omitProps } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { Head } from './Head';
@@ -46,6 +45,7 @@ import TableContext from './TableContext';
 category: components
 ---
 **/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Table = class Table extends Component {
   constructor(...args) {
     super(...args);
@@ -90,27 +90,34 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
       styles = _this$props3.styles;
     const isStacked = layout === 'stacked';
     const headers = isStacked ? this.getHeaders() : void 0;
-    return jsx(TableContext.Provider, {
+    return _jsx(TableContext.Provider, {
       value: {
         isStacked: isStacked,
         hover: hover,
         headers: headers
-      }
-    }, jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Table.allowedProps), Table), {
-      as: isStacked ? 'div' : 'table',
-      margin: margin,
-      elementRef: this.handleRef,
-      css: styles === null || styles === void 0 ? void 0 : styles.table,
-      role: isStacked ? 'table' : void 0,
-      "aria-label": isStacked ? caption : void 0
-    }), !isStacked && jsx("caption", null, jsx(ScreenReaderContent, null, caption)), Children.map(children, child => {
-      if (/*#__PURE__*/isValidElement(child)) {
-        return safeCloneElement(child, {
-          key: child.props.name
-        });
-      }
-      return child;
-    })));
+      },
+      children: _jsxs(View, {
+        ...View.omitViewProps(omitProps(this.props, Table.allowedProps), Table),
+        as: isStacked ? 'div' : 'table',
+        margin: margin,
+        elementRef: this.handleRef,
+        css: styles === null || styles === void 0 ? void 0 : styles.table,
+        role: isStacked ? 'table' : void 0,
+        "aria-label": isStacked ? caption : void 0,
+        children: [!isStacked && _jsx("caption", {
+          children: _jsx(ScreenReaderContent, {
+            children: caption
+          })
+        }), Children.map(children, child => {
+          if (/*#__PURE__*/isValidElement(child)) {
+            return safeCloneElement(child, {
+              key: child.props.name
+            });
+          }
+          return child;
+        })]
+      })
+    });
   }
 }, _Table.displayName = "Table", _Table.componentId = 'Table', _Table.allowedProps = allowedProps, _Table.propTypes = propTypes, _Table.defaultProps = {
   children: null,

package/lib/Table/Body/index.js

@@ -14,6 +14,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _TableContext = _interopRequireDefault(require("../TableContext"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class, _Body;
 /*
  * The MIT License (MIT)
@@ -38,7 +39,6 @@ var _dec, _class, _Body;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 parent: Table
@@ -62,27 +62,29 @@ let Body = exports.Body = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       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), {
+    return (0, _jsxRuntime.jsx)(_View.View, {
+      ..._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,
-      role: isStacked ? 'rowgroup' : void 0
-    }), _react.Children.map(children, child => {
-      if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
-        return (0, _safeCloneElement.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;
-    }));
+      role: isStacked ? 'rowgroup' : void 0,
+      children: _react.Children.map(children, child => {
+        if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
+          return (0, _safeCloneElement.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.contextType = _TableContext.default, _Body.allowedProps = _props.allowedProps, _Body.propTypes = _props.propTypes, _Body.defaultProps = {
   children: null

package/lib/Table/Cell/index.js

@@ -14,6 +14,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _TableContext = _interopRequireDefault(require("../TableContext"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class, _Cell;
 /*
  * The MIT License (MIT)
@@ -38,7 +39,6 @@ var _dec, _class, _Cell;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 parent: Table
@@ -60,11 +60,13 @@ let Cell = exports.Cell = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       styles = _this$props3.styles,
       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), {
+    return (0, _jsxRuntime.jsxs)(_View.View, {
+      ..._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));
+      role: isStacked ? 'cell' : void 0,
+      children: [header && (0, _callRenderProp.callRenderProp)(header), header && ': ', (0, _callRenderProp.callRenderProp)(children)]
+    });
   }
 }, _Cell.displayName = "Cell", _Cell.componentId = 'Table.Cell', _Cell.contextType = _TableContext.default, _Cell.allowedProps = _props.allowedProps, _Cell.propTypes = _props.propTypes, _Cell.defaultProps = {
   textAlign: 'start',

package/lib/Table/ColHeader/index.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ColHeader = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _IconMiniArrowUpLine = require("@instructure/ui-icons/lib/IconMiniArrowUpLine.js");
@@ -16,6 +15,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class, _ColHeader;
 /*
  * The MIT License (MIT)
@@ -40,7 +40,6 @@ var _dec, _class, _ColHeader;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 parent: Table
@@ -73,17 +72,17 @@ let ColHeader = exports.ColHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
       onRequestSort = _this$props4.onRequestSort,
       styles = _this$props4.styles;
     if (sortDirection === 'ascending') {
-      return (0, _emotion.jsx)(_IconMiniArrowUpLine.IconMiniArrowUpLine, {
+      return (0, _jsxRuntime.jsx)(_IconMiniArrowUpLine.IconMiniArrowUpLine, {
         css: styles === null || styles === void 0 ? void 0 : styles.sortedIconColor
       });
     }
     if (sortDirection === 'descending') {
-      return (0, _emotion.jsx)(_IconMiniArrowDownLine.IconMiniArrowDownLine, {
+      return (0, _jsxRuntime.jsx)(_IconMiniArrowDownLine.IconMiniArrowDownLine, {
         css: styles === null || styles === void 0 ? void 0 : styles.sortedIconColor
       });
     }
     if (onRequestSort) {
-      return (0, _emotion.jsx)(_IconMiniArrowDoubleLine.IconMiniArrowDoubleLine, {
+      return (0, _jsxRuntime.jsx)(_IconMiniArrowDoubleLine.IconMiniArrowDoubleLine, {
         css: styles === null || styles === void 0 ? void 0 : styles.unSortedIconColor
       });
     }
@@ -97,19 +96,23 @@ let ColHeader = exports.ColHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
       sortDirection = _this$props5.sortDirection,
       scope = _this$props5.scope,
       styles = _this$props5.styles;
-    return (0, _emotion.jsx)("th", Object.assign({}, (0, _omitProps.omitProps)(this.props, ColHeader.allowedProps), {
+    return (0, _jsxRuntime.jsxs)("th", {
+      ...(0, _omitProps.omitProps)(this.props, ColHeader.allowedProps),
       css: styles === null || styles === void 0 ? void 0 : styles.colHeader,
       style: {
         width
       },
       scope: scope,
-      "aria-sort": sortDirection
-    }), onRequestSort && (0, _emotion.jsx)("button", {
-      onClick: this.handleClick,
-      css: styles === null || styles === void 0 ? void 0 : styles.button
-    }, (0, _emotion.jsx)("div", {
-      css: styles === null || styles === void 0 ? void 0 : styles.buttonContent
-    }, (0, _callRenderProp.callRenderProp)(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
+      "aria-sort": sortDirection,
+      children: [onRequestSort && (0, _jsxRuntime.jsx)("button", {
+        onClick: this.handleClick,
+        css: styles === null || styles === void 0 ? void 0 : styles.button,
+        children: (0, _jsxRuntime.jsxs)("div", {
+          css: styles === null || styles === void 0 ? void 0 : styles.buttonContent,
+          children: [(0, _callRenderProp.callRenderProp)(children), this.renderSortArrow()]
+        })
+      }), !onRequestSort && children, !onRequestSort && this.renderSortArrow()]
+    });
   }
 }, _ColHeader.displayName = "ColHeader", _ColHeader.componentId = 'Table.ColHeader', _ColHeader.allowedProps = _props.allowedProps, _ColHeader.propTypes = _props.propTypes, _ColHeader.defaultProps = {
   textAlign: 'start',

package/lib/Table/Head/index.js

@@ -18,6 +18,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _TableContext = _interopRequireDefault(require("../TableContext"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class, _Head, _ScreenReaderContent;
 /*
  * The MIT License (MIT)
@@ -42,7 +43,6 @@ var _dec, _class, _Head, _ScreenReaderContent;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 parent: Table
@@ -133,31 +133,35 @@ let Head = exports.Head = (_dec = (0, _emotion.withStyle)(_styles.default, _them
         });
       }
     };
-    return (0, _emotion.jsx)("div", {
-      role: "rowgroup"
-    }, (0, _emotion.jsx)("div", {
-      role: "row"
-    }, (0, _emotion.jsx)("div", {
-      role: "cell",
-      "aria-colspan": count
-    }, (0, _emotion.jsx)(_SimpleSelect.SimpleSelect, {
-      renderLabel: renderSortLabel ? (0, _callRenderProp.callRenderProp)(renderSortLabel) : _ScreenReaderContent || (_ScreenReaderContent = (0, _emotion.jsx)(_ScreenReaderContent2.ScreenReaderContent, null)),
-      renderBeforeInput: selectedOption && _IconCheckLine.IconCheckLine,
-      value: selectedOption,
-      onChange: handleSelect
-    }, options.map(({
-      id,
-      label
-    }) => (0, _emotion.jsx)(_SimpleSelect.SimpleSelect.Option, {
-      id: id,
-      key: id,
-      value: id,
-      renderBeforeLabel: id === selectedOption ? _IconCheckLine.IconCheckLine : () => (0, _emotion.jsx)(_IconCheckLine.IconCheckLine, {
-        style: {
-          color: 'transparent'
-        }
+    return (0, _jsxRuntime.jsx)("div", {
+      role: "rowgroup",
+      children: (0, _jsxRuntime.jsx)("div", {
+        role: "row",
+        children: (0, _jsxRuntime.jsx)("div", {
+          role: "cell",
+          "aria-colspan": count,
+          children: (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect, {
+            renderLabel: renderSortLabel ? (0, _callRenderProp.callRenderProp)(renderSortLabel) : _ScreenReaderContent || (_ScreenReaderContent = (0, _jsxRuntime.jsx)(_ScreenReaderContent2.ScreenReaderContent, {})),
+            renderBeforeInput: selectedOption && _IconCheckLine.IconCheckLine,
+            value: selectedOption,
+            onChange: handleSelect,
+            children: options.map(({
+              id,
+              label
+            }) => (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
+              id: id,
+              value: id,
+              renderBeforeLabel: id === selectedOption ? _IconCheckLine.IconCheckLine : () => (0, _jsxRuntime.jsx)(_IconCheckLine.IconCheckLine, {
+                style: {
+                  color: 'transparent'
+                }
+              }),
+              children: label
+            }, id))
+          })
+        })
       })
-    }, label))))));
+    });
   }
   render() {
     const _this$props4 = this.props,
@@ -165,9 +169,11 @@ let Head = exports.Head = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       styles = _this$props4.styles;
     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
-    }), children);
+    (0, _jsxRuntime.jsx)("thead", {
+      ...(0, _omitProps.omitProps)(this.props, Head.allowedProps, ['hover']),
+      css: styles === null || styles === void 0 ? void 0 : styles.head,
+      children: children
+    });
   }
 }, _Head.displayName = "Head", _Head.componentId = 'Table.Head', _Head.contextType = _TableContext.default, _Head.allowedProps = _props.allowedProps, _Head.propTypes = _props.propTypes, _Head.defaultProps = {
   children: null