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

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

@@ -23,14 +23,13 @@ var _Table$Head, _Table$Body, _Table, _Table2, _Table3, _span, _span2, _Table$Ro
  * SOFTWARE.
  */
 
-import { Component } from 'react';
+import React 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(() => {
@@ -40,29 +39,13 @@ describe('<Table />', async () => {
   afterEach(() => {
     consoleErrorMock.mockRestore();
   });
-  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"
-        })]
-      })
-    }))]
-  }));
+  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"))))));
   it('should render a caption', async () => {
     const _renderTable = renderTable(),
       container = _renderTable.container;
@@ -120,96 +103,48 @@ describe('<Table />', async () => {
     expect(stackedTable).not.toHaveTextContent('ColHeader');
   });
   it('can handle non-existent head in stacked layout', async () => {
-    render(_Table || (_Table = _jsx(Table, {
+    render(_Table || (_Table = /*#__PURE__*/React.createElement(Table, {
       caption: "Test table",
-      layout: "stacked",
-      children: _jsx(Table.Body, {})
-    })));
+      layout: "stacked"
+    }, /*#__PURE__*/React.createElement(Table.Body, null))));
     const stackedTable = screen.getByRole('table');
     expect(stackedTable).toBeInTheDocument();
   });
   it('can handle empty head in stacked layout', async () => {
-    render(_Table2 || (_Table2 = _jsx(Table, {
+    render(_Table2 || (_Table2 = /*#__PURE__*/React.createElement(Table, {
       caption: "Test table",
-      layout: "stacked",
-      children: _jsx(Table.Head, {})
-    })));
+      layout: "stacked"
+    }, /*#__PURE__*/React.createElement(Table.Head, null))));
     const stackedTable = screen.getByRole('table');
     expect(stackedTable).toBeInTheDocument();
   });
   it('can handle invalid header in stacked layout', async () => {
-    render(_Table3 || (_Table3 = _jsx(Table, {
+    render(_Table3 || (_Table3 = /*#__PURE__*/React.createElement(Table, {
       caption: "Test table",
-      layout: "stacked",
-      children: _jsx(Table.Head, {
-        children: _jsx(Table.Row, {
-          children: _jsx(Table.Cell, {
-            children: "Foo"
-          })
-        })
-      })
-    })));
+      layout: "stacked"
+    }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.Cell, null, "Foo"))))));
     const stackedTable = screen.getByRole('table');
     expect(stackedTable).toBeInTheDocument();
     expect(stackedTable).not.toHaveTextContent('Foo');
   });
   it('does not crash for invalid children', async () => {
-    render(_jsxs(Table, {
+    render(/*#__PURE__*/React.createElement(Table, {
       caption: "Test table",
-      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"
-          })]
-        }))]
-      })]
-    }));
+      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');
   });
   describe('when table is sortable', async () => {
-    const renderSortableTable = (props, handlers = {}, layout = 'auto') => render(_jsxs(Table, {
+    const renderSortableTable = (props, handlers = {}, layout = 'auto') => render(/*#__PURE__*/React.createElement(Table, {
       caption: "Sortable table",
-      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, {})]
-      }))]
-    }));
+      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)))));
     it('can render up arrow for ascending order', async () => {
       const _renderSortableTable = renderSortableTable({
           id: 'id',
@@ -293,57 +228,27 @@ describe('<Table />', async () => {
   describe('when using custom components', () => {
     it('should render wrapper HOCs', () => {
       var _CustomTableCell2;
-      class CustomTableCell extends Component {
+      class CustomTableCell extends React.Component {
         render() {
-          return _jsx(Table.Cell, {
-            ...this.props,
-            children: this.props.children
-          });
+          return /*#__PURE__*/React.createElement(Table.Cell, this.props, this.props.children);
         }
       }
       CustomTableCell.displayName = "CustomTableCell";
-      class CustomTableRow extends Component {
+      class CustomTableRow extends React.Component {
         render() {
-          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"
-            }))]
-          });
+          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(_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 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;
@@ -352,49 +257,27 @@ describe('<Table />', async () => {
       expect(container).toHaveTextContent('9.3');
     });
     it('should render fully custom components', () => {
-      class CustomTableCell extends Component {
+      class CustomTableCell extends React.Component {
         render() {
-          return _jsx("td", {
-            children: this.props.children
-          });
+          return /*#__PURE__*/React.createElement("td", null, this.props.children);
         }
       }
       CustomTableCell.displayName = "CustomTableCell";
-      class CustomTableRow extends Component {
+      class CustomTableRow extends React.Component {
         render() {
-          return _jsx("tr", {
-            children: this.props.children
-          });
+          return /*#__PURE__*/React.createElement("tr", null, this.props.children);
         }
       }
       CustomTableRow.displayName = "CustomTableRow";
-      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 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;

package/es/Table/index.js

@@ -24,11 +24,12 @@ 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 } from '@instructure/emotion';
+import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { Head } from './Head';
@@ -45,7 +46,6 @@ 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,34 +90,27 @@ 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
-      },
-      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;
-        })]
-      })
-    });
+      }
+    }, 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;
+    })));
   }
 }, _Table.displayName = "Table", _Table.componentId = 'Table', _Table.allowedProps = allowedProps, _Table.propTypes = propTypes, _Table.defaultProps = {
   children: null,

package/lib/Table/Body/index.js

@@ -14,7 +14,6 @@ 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)
@@ -39,6 +38,7 @@ 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,29 +62,27 @@ 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, _jsxRuntime.jsx)(_View.View, {
-      ..._View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Body.allowedProps), Body),
+    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,
-      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;
-      })
-    });
+      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;
+    }));
   }
 }, _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,7 +14,6 @@ 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)
@@ -39,6 +38,7 @@ 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,13 +60,11 @@ 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, _jsxRuntime.jsxs)(_View.View, {
-      ..._View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Cell.allowedProps), Cell),
+    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,
-      children: [header && (0, _callRenderProp.callRenderProp)(header), header && ': ', (0, _callRenderProp.callRenderProp)(children)]
-    });
+      role: isStacked ? 'cell' : void 0
+    }), 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,11 +1,12 @@
 "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 = require("react");
+var _react = _interopRequireWildcard(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");
@@ -15,7 +16,6 @@ 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,6 +40,7 @@ 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
@@ -72,17 +73,17 @@ let ColHeader = exports.ColHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
       onRequestSort = _this$props4.onRequestSort,
       styles = _this$props4.styles;
     if (sortDirection === 'ascending') {
-      return (0, _jsxRuntime.jsx)(_IconMiniArrowUpLine.IconMiniArrowUpLine, {
+      return (0, _emotion.jsx)(_IconMiniArrowUpLine.IconMiniArrowUpLine, {
         css: styles === null || styles === void 0 ? void 0 : styles.sortedIconColor
       });
     }
     if (sortDirection === 'descending') {
-      return (0, _jsxRuntime.jsx)(_IconMiniArrowDownLine.IconMiniArrowDownLine, {
+      return (0, _emotion.jsx)(_IconMiniArrowDownLine.IconMiniArrowDownLine, {
         css: styles === null || styles === void 0 ? void 0 : styles.sortedIconColor
       });
     }
     if (onRequestSort) {
-      return (0, _jsxRuntime.jsx)(_IconMiniArrowDoubleLine.IconMiniArrowDoubleLine, {
+      return (0, _emotion.jsx)(_IconMiniArrowDoubleLine.IconMiniArrowDoubleLine, {
         css: styles === null || styles === void 0 ? void 0 : styles.unSortedIconColor
       });
     }
@@ -96,23 +97,19 @@ let ColHeader = exports.ColHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
       sortDirection = _this$props5.sortDirection,
       scope = _this$props5.scope,
       styles = _this$props5.styles;
-    return (0, _jsxRuntime.jsxs)("th", {
-      ...(0, _omitProps.omitProps)(this.props, ColHeader.allowedProps),
+    return (0, _emotion.jsx)("th", Object.assign({}, (0, _omitProps.omitProps)(this.props, ColHeader.allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.colHeader,
       style: {
         width
       },
       scope: scope,
-      "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()]
-    });
+      "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());
   }
 }, _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,7 +18,6 @@ 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)
@@ -43,6 +42,7 @@ 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,35 +133,31 @@ let Head = exports.Head = (_dec = (0, _emotion.withStyle)(_styles.default, _them
         });
       }
     };
-    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))
-          })
-        })
+    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'
+        }
       })
-    });
+    }, label))))));
   }
   render() {
     const _this$props4 = this.props,
@@ -169,11 +165,9 @@ 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, _jsxRuntime.jsx)("thead", {
-      ...(0, _omitProps.omitProps)(this.props, Head.allowedProps, ['hover']),
-      css: styles === null || styles === void 0 ? void 0 : styles.head,
-      children: children
-    });
+    (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);
   }
 }, _Head.displayName = "Head", _Head.componentId = 'Table.Head', _Head.contextType = _TableContext.default, _Head.allowedProps = _props.allowedProps, _Head.propTypes = _props.propTypes, _Head.defaultProps = {
   children: null