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

package/lib/Table/Row/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, _Row;
 /*
  * The MIT License (MIT)
@@ -39,6 +38,7 @@ var _dec, _class, _Row;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+/** @jsx jsx */
 /**
 ---
 parent: Table
@@ -66,25 +66,23 @@ let Row = exports.Row = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
       styles = _this$props3.styles;
     const isStacked = this.context.isStacked;
     const headers = this.context.headers;
-    return (0, _jsxRuntime.jsx)(_View.View, {
-      ..._View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Row.allowedProps), Row),
+    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,
-      children: _react.Children.toArray(children).filter(Boolean).map((child, index) => {
-        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
-            isStacked,
-            // used by `Cell` to render its column title in `stacked` layout
-            header: headers && headers[index]
-          });
-        }
-        return child;
-      })
-    });
+      role: isStacked ? 'row' : void 0
+    }), _react.Children.toArray(children).filter(Boolean).map((child, index) => {
+      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
+          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.contextType = _TableContext.default, _Row.allowedProps = _props.allowedProps, _Row.propTypes = _props.propTypes, _Row.defaultProps = {
   children: null

package/lib/Table/RowHeader/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, _RowHeader;
 /*
  * The MIT License (MIT)
@@ -39,6 +38,7 @@ var _dec, _class, _RowHeader;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+/** @jsx jsx */
 /**
 ---
 parent: Table
@@ -59,14 +59,12 @@ let RowHeader = exports.RowHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
       children = _this$props3.children,
       styles = _this$props3.styles;
     const isStacked = this.context.isStacked;
-    return (0, _jsxRuntime.jsx)(_View.View, {
-      ..._View.View.omitViewProps((0, _omitProps.omitProps)(this.props, RowHeader.allowedProps), RowHeader),
+    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,
       scope: "row",
-      role: isStacked ? 'rowheader' : void 0,
-      children: (0, _callRenderProp.callRenderProp)(children)
-    });
+      role: isStacked ? 'rowheader' : void 0
+    }), (0, _callRenderProp.callRenderProp)(children));
   }
 }, _RowHeader.displayName = "RowHeader", _RowHeader.componentId = 'Table.RowHeader', _RowHeader.contextType = _TableContext.default, _RowHeader.allowedProps = _props.allowedProps, _RowHeader.propTypes = _props.propTypes, _RowHeader.defaultProps = {
   textAlign: 'start',

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

@@ -1,13 +1,13 @@
 "use strict";
 
-var _react = require("react");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _vitest = require("vitest");
 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 _jsxRuntime = require("@emotion/react/jsx-runtime");
 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)
@@ -41,29 +41,13 @@ describe('<Table />', async () => {
   afterEach(() => {
     consoleErrorMock.mockRestore();
   });
-  const renderTable = props => (0, _react2.render)((0, _jsxRuntime.jsxs)(_index.Table, {
-    caption: "Test table",
-    ...props,
-    children: [_Table$Head || (_Table$Head = (0, _jsxRuntime.jsx)(_index.Table.Head, {
-      children: (0, _jsxRuntime.jsxs)(_index.Table.Row, {
-        children: [(0, _jsxRuntime.jsx)(_index.Table.ColHeader, {
-          id: "foo",
-          children: "ColHeader"
-        }), (0, _jsxRuntime.jsx)(_index.Table.ColHeader, {
-          id: "bar",
-          children: "Bar-header"
-        })]
-      })
-    })), _Table$Body || (_Table$Body = (0, _jsxRuntime.jsx)(_index.Table.Body, {
-      children: (0, _jsxRuntime.jsxs)(_index.Table.Row, {
-        children: [(0, _jsxRuntime.jsx)(_index.Table.RowHeader, {
-          children: "RowHeader"
-        }), (0, _jsxRuntime.jsx)(_index.Table.Cell, {
-          children: "Cell"
-        })]
-      })
-    }))]
-  }));
+  const renderTable = props => (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Table, Object.assign({
+    caption: "Test table"
+  }, props), _Table$Head || (_Table$Head = /*#__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")))), _Table$Body || (_Table$Body = /*#__PURE__*/_react.default.createElement(_index.Table.Body, null, /*#__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"))))));
   it('should render a caption', async () => {
     const _renderTable = renderTable(),
       container = _renderTable.container;
@@ -121,96 +105,48 @@ describe('<Table />', async () => {
     expect(stackedTable).not.toHaveTextContent('ColHeader');
   });
   it('can handle non-existent head in stacked layout', async () => {
-    (0, _react2.render)(_Table || (_Table = (0, _jsxRuntime.jsx)(_index.Table, {
+    (0, _react2.render)(_Table || (_Table = /*#__PURE__*/_react.default.createElement(_index.Table, {
       caption: "Test table",
-      layout: "stacked",
-      children: (0, _jsxRuntime.jsx)(_index.Table.Body, {})
-    })));
+      layout: "stacked"
+    }, /*#__PURE__*/_react.default.createElement(_index.Table.Body, null))));
     const stackedTable = _react2.screen.getByRole('table');
     expect(stackedTable).toBeInTheDocument();
   });
   it('can handle empty head in stacked layout', async () => {
-    (0, _react2.render)(_Table2 || (_Table2 = (0, _jsxRuntime.jsx)(_index.Table, {
+    (0, _react2.render)(_Table2 || (_Table2 = /*#__PURE__*/_react.default.createElement(_index.Table, {
       caption: "Test table",
-      layout: "stacked",
-      children: (0, _jsxRuntime.jsx)(_index.Table.Head, {})
-    })));
+      layout: "stacked"
+    }, /*#__PURE__*/_react.default.createElement(_index.Table.Head, null))));
     const stackedTable = _react2.screen.getByRole('table');
     expect(stackedTable).toBeInTheDocument();
   });
   it('can handle invalid header in stacked layout', async () => {
-    (0, _react2.render)(_Table3 || (_Table3 = (0, _jsxRuntime.jsx)(_index.Table, {
+    (0, _react2.render)(_Table3 || (_Table3 = /*#__PURE__*/_react.default.createElement(_index.Table, {
       caption: "Test table",
-      layout: "stacked",
-      children: (0, _jsxRuntime.jsx)(_index.Table.Head, {
-        children: (0, _jsxRuntime.jsx)(_index.Table.Row, {
-          children: (0, _jsxRuntime.jsx)(_index.Table.Cell, {
-            children: "Foo"
-          })
-        })
-      })
-    })));
+      layout: "stacked"
+    }, /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Foo"))))));
     const stackedTable = _react2.screen.getByRole('table');
     expect(stackedTable).toBeInTheDocument();
     expect(stackedTable).not.toHaveTextContent('Foo');
   });
   it('does not crash for invalid children', async () => {
-    (0, _react2.render)((0, _jsxRuntime.jsxs)(_index.Table, {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Table, {
       caption: "Test table",
-      layout: "stacked",
-      children: ["test1", _span || (_span = (0, _jsxRuntime.jsx)("span", {
-        children: "test"
-      })), (0, _jsxRuntime.jsxs)(_index.Table.Head, {
-        children: [_span2 || (_span2 = (0, _jsxRuntime.jsx)("span", {
-          children: "test"
-        })), "test2", _Table$Row || (_Table$Row = (0, _jsxRuntime.jsxs)(_index.Table.Row, {
-          children: ["test3", (0, _jsxRuntime.jsx)("span", {
-            children: "test"
-          }), (0, _jsxRuntime.jsx)(_index.Table.Cell, {
-            children: "Foo"
-          })]
-        })), "test4", _span3 || (_span3 = (0, _jsxRuntime.jsx)("span", {
-          children: "test"
-        }))]
-      }), "test5", (0, _jsxRuntime.jsxs)(_index.Table.Body, {
-        children: ["test", _span4 || (_span4 = (0, _jsxRuntime.jsx)("span", {
-          children: "test"
-        })), _Table$Row2 || (_Table$Row2 = (0, _jsxRuntime.jsxs)(_index.Table.Row, {
-          children: ["test", (0, _jsxRuntime.jsx)("span", {
-            children: "test"
-          }), (0, _jsxRuntime.jsx)(_index.Table.Cell, {
-            children: "Foo"
-          }), "test", (0, _jsxRuntime.jsx)("span", {
-            children: "test"
-          })]
-        }))]
-      })]
-    }));
+      layout: "stacked"
+    }, "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');
   });
   describe('when table is sortable', async () => {
-    const renderSortableTable = (props, handlers = {}, layout = 'auto') => (0, _react2.render)((0, _jsxRuntime.jsxs)(_index.Table, {
+    const renderSortableTable = (props, handlers = {}, layout = 'auto') => (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Table, {
       caption: "Sortable table",
-      layout: layout,
-      children: [(0, _jsxRuntime.jsx)(_index.Table.Head, {
-        children: (0, _jsxRuntime.jsxs)(_index.Table.Row, {
-          children: [(0, _jsxRuntime.jsx)(_index.Table.ColHeader, {
-            id: "foo",
-            ...props,
-            ...handlers,
-            children: "Foo"
-          }), (0, _jsxRuntime.jsx)(_index.Table.ColHeader, {
-            id: "bar",
-            ...handlers,
-            children: "Bar"
-          })]
-        })
-      }), _Table$Body2 || (_Table$Body2 = (0, _jsxRuntime.jsxs)(_index.Table.Body, {
-        children: [(0, _jsxRuntime.jsx)(_index.Table.Row, {}), (0, _jsxRuntime.jsx)(_index.Table.Row, {})]
-      }))]
-    }));
+      layout: layout
+    }, /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, Object.assign({
+      id: "foo"
+    }, props, handlers), "Foo"), /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, Object.assign({
+      id: "bar"
+    }, handlers), "Bar"))), _Table$Body2 || (_Table$Body2 = /*#__PURE__*/_react.default.createElement(_index.Table.Body, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null), /*#__PURE__*/_react.default.createElement(_index.Table.Row, null)))));
     it('can render up arrow for ascending order', async () => {
       const _renderSortableTable = renderSortableTable({
           id: 'id',
@@ -294,57 +230,27 @@ describe('<Table />', async () => {
   describe('when using custom components', () => {
     it('should render wrapper HOCs', () => {
       var _CustomTableCell2;
-      class CustomTableCell extends _react.Component {
+      class CustomTableCell extends _react.default.Component {
         render() {
-          return (0, _jsxRuntime.jsx)(_index.Table.Cell, {
-            ...this.props,
-            children: this.props.children
-          });
+          return /*#__PURE__*/_react.default.createElement(_index.Table.Cell, this.props, this.props.children);
         }
       }
       CustomTableCell.displayName = "CustomTableCell";
-      class CustomTableRow extends _react.Component {
+      class CustomTableRow extends _react.default.Component {
         render() {
-          return (0, _jsxRuntime.jsxs)(_index.Table.Row, {
-            ...this.props,
-            children: [_Table$RowHeader || (_Table$RowHeader = (0, _jsxRuntime.jsx)(_index.Table.RowHeader, {
-              children: "1"
-            })), _Table$Cell || (_Table$Cell = (0, _jsxRuntime.jsx)(_index.Table.Cell, {
-              children: "The Shawshank Redemption"
-            })), _CustomTableCell2 || (_CustomTableCell2 = (0, _jsxRuntime.jsx)(CustomTableCell, {
-              children: "9.3"
-            }))]
-          });
+          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)((0, _jsxRuntime.jsxs)(_index.Table, {
-        caption: "Test custom table",
-        children: [_Table$Head2 || (_Table$Head2 = (0, _jsxRuntime.jsx)(_index.Table.Head, {
-          children: (0, _jsxRuntime.jsxs)(_index.Table.Row, {
-            children: [(0, _jsxRuntime.jsx)(_index.Table.ColHeader, {
-              id: "foo",
-              children: "ColHeader"
-            }), (0, _jsxRuntime.jsx)(_index.Table.ColHeader, {
-              id: "bar",
-              children: "Bar-header"
-            }), (0, _jsxRuntime.jsx)(_index.Table.ColHeader, {
-              id: "baz",
-              children: "Bar-header"
-            })]
-          })
-        })), (0, _jsxRuntime.jsxs)(_index.Table.Body, {
-          children: [(0, _jsxRuntime.jsx)(CustomTableRow, {}), _Table$Row3 || (_Table$Row3 = (0, _jsxRuntime.jsxs)(_index.Table.Row, {
-            children: [(0, _jsxRuntime.jsx)(_index.Table.RowHeader, {
-              children: "RowHeader"
-            }), (0, _jsxRuntime.jsx)(_index.Table.Cell, {
-              children: "Cell"
-            }), (0, _jsxRuntime.jsx)(_index.Table.Cell, {
-              children: "Cell2"
-            })]
-          }))]
-        })]
-      }));
+      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;
@@ -353,49 +259,27 @@ describe('<Table />', async () => {
       expect(container).toHaveTextContent('9.3');
     });
     it('should render fully custom components', () => {
-      class CustomTableCell extends _react.Component {
+      class CustomTableCell extends _react.default.Component {
         render() {
-          return (0, _jsxRuntime.jsx)("td", {
-            children: this.props.children
-          });
+          return /*#__PURE__*/_react.default.createElement("td", null, this.props.children);
         }
       }
       CustomTableCell.displayName = "CustomTableCell";
-      class CustomTableRow extends _react.Component {
+      class CustomTableRow extends _react.default.Component {
         render() {
-          return (0, _jsxRuntime.jsx)("tr", {
-            children: this.props.children
-          });
+          return /*#__PURE__*/_react.default.createElement("tr", null, this.props.children);
         }
       }
       CustomTableRow.displayName = "CustomTableRow";
-      const table = (0, _react2.render)((0, _jsxRuntime.jsxs)(_index.Table, {
-        caption: "Test custom table",
-        children: [(0, _jsxRuntime.jsx)(_index.Table.Head, {
-          children: (0, _jsxRuntime.jsxs)(CustomTableRow, {
-            children: [(0, _jsxRuntime.jsx)(CustomTableCell, {
-              id: "foo",
-              children: "ColHeader"
-            }), (0, _jsxRuntime.jsx)(CustomTableCell, {
-              id: "bar",
-              children: "Bar-header"
-            }), _Table$ColHeader || (_Table$ColHeader = (0, _jsxRuntime.jsx)(_index.Table.ColHeader, {
-              id: "baz",
-              children: "Bar-header"
-            }))]
-          })
-        }), (0, _jsxRuntime.jsx)(_index.Table.Body, {
-          children: (0, _jsxRuntime.jsxs)(CustomTableRow, {
-            children: [_Table$RowHeader2 || (_Table$RowHeader2 = (0, _jsxRuntime.jsx)(_index.Table.RowHeader, {
-              children: "RowHeader2"
-            })), (0, _jsxRuntime.jsx)(CustomTableCell, {
-              children: "Cell"
-            }), _Table$Cell2 || (_Table$Cell2 = (0, _jsxRuntime.jsx)(_index.Table.Cell, {
-              children: "Cell2"
-            }))]
-          })
-        })]
-      }));
+      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;

package/lib/Table/index.js

@@ -22,7 +22,6 @@ var _RowHeader = require("./RowHeader");
 var _Cell = require("./Cell");
 var _props = require("./props");
 var _TableContext = _interopRequireDefault(require("./TableContext"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class, _Table;
 /*
  * The MIT License (MIT)
@@ -47,6 +46,7 @@ var _dec, _class, _Table;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+/** @jsx jsx */
 /**
 ---
 category: components
@@ -96,34 +96,27 @@ 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, _jsxRuntime.jsx)(_TableContext.default.Provider, {
+    return (0, _emotion.jsx)(_TableContext.default.Provider, {
       value: {
         isStacked: isStacked,
         hover: hover,
         headers: headers
-      },
-      children: (0, _jsxRuntime.jsxs)(_View.View, {
-        ..._View.View.omitViewProps((0, _omitProps.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 && (0, _jsxRuntime.jsx)("caption", {
-          children: (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
-            children: caption
-          })
-        }), _react.Children.map(children, child => {
-          if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
-            return (0, _safeCloneElement.safeCloneElement)(child, {
-              key: child.props.name
-            });
-          }
-          return child;
-        })]
-      })
-    });
+      }
+    }, (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,
+      css: styles === null || styles === void 0 ? void 0 : styles.table,
+      role: isStacked ? 'table' : void 0,
+      "aria-label": isStacked ? caption : void 0
+    }), !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
+        });
+      }
+      return child;
+    })));
   }
 }, _Table.displayName = "Table", _Table.componentId = 'Table', _Table.allowedProps = _props.allowedProps, _Table.propTypes = _props.propTypes, _Table.defaultProps = {
   children: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "10.16.1-pr-snapshot-1744893671793",
+  "version": "10.16.1-snapshot-0",
   "description": "A styled HTML table component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-babel-preset": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-color-utils": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-test-utils": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-themes": "10.16.1-pr-snapshot-1744893671793",
+    "@instructure/ui-axe-check": "10.16.1-snapshot-0",
+    "@instructure/ui-babel-preset": "10.16.1-snapshot-0",
+    "@instructure/ui-color-utils": "10.16.1-snapshot-0",
+    "@instructure/ui-test-utils": "10.16.1-snapshot-0",
+    "@instructure/ui-themes": "10.16.1-snapshot-0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -35,17 +35,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/emotion": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/shared-types": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-a11y-content": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-icons": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-prop-types": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-react-utils": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-simple-select": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-testable": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-utils": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-view": "10.16.1-pr-snapshot-1744893671793",
+    "@instructure/console": "10.16.1-snapshot-0",
+    "@instructure/emotion": "10.16.1-snapshot-0",
+    "@instructure/shared-types": "10.16.1-snapshot-0",
+    "@instructure/ui-a11y-content": "10.16.1-snapshot-0",
+    "@instructure/ui-icons": "10.16.1-snapshot-0",
+    "@instructure/ui-prop-types": "10.16.1-snapshot-0",
+    "@instructure/ui-react-utils": "10.16.1-snapshot-0",
+    "@instructure/ui-simple-select": "10.16.1-snapshot-0",
+    "@instructure/ui-testable": "10.16.1-snapshot-0",
+    "@instructure/ui-utils": "10.16.1-snapshot-0",
+    "@instructure/ui-view": "10.16.1-snapshot-0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Table/Body/index.tsx

@@ -22,11 +22,12 @@
  * SOFTWARE.
  */
 
+/** @jsx jsx */
 import { Component, Children, ContextType, isValidElement } from 'react'
 
 import { safeCloneElement, omitProps } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
-import { withStyle } from '@instructure/emotion'
+import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Table/Cell/index.tsx

@@ -22,12 +22,13 @@
  * SOFTWARE.
  */
 
+/** @jsx jsx */
 import { Component, ContextType } from 'react'
 
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Table/ColHeader/index.tsx

@@ -22,7 +22,8 @@
  * SOFTWARE.
  */
 
-import { Component } from 'react'
+/** @jsx jsx */
+import React, { Component } from 'react'
 
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
 import {
@@ -31,7 +32,7 @@ import {
   IconMiniArrowDoubleLine
 } from '@instructure/ui-icons'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Table/ColHeader/props.ts

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { ThHTMLAttributes } from 'react'
+import React, { ThHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 
 import type {

package/src/Table/Head/index.tsx

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+/** @jsx jsx */
 import { Component, Children, ContextType } from 'react'
 
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
@@ -31,7 +32,7 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 import { IconCheckLine } from '@instructure/ui-icons'
 import { warn } from '@instructure/console'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Table/README.md

@@ -2014,7 +2014,7 @@ Custom table with `stacked` layout support:
           onMouseOver={this.toggleHoverOn}
           onMouseOut={this.toggleHoverOff}
         >
-          {Children.toArray(this.props.children)
+          {React.Children.toArray(this.props.children)
             .filter(React.isValidElement)
             .map((child, index) => {
               return React.cloneElement(child, {
@@ -2144,7 +2144,7 @@ Custom table with `stacked` layout support:
         onMouseOver={() => setIsHovered(true)}
         onMouseOut={() => setIsHovered(false)}
       >
-        {Children.toArray(children)
+        {React.Children.toArray(children)
           .filter(React.isValidElement)
           .map((child, index) => {
             return React.cloneElement(child, {

package/src/Table/Row/index.tsx

@@ -22,12 +22,13 @@
  * SOFTWARE.
  */
 
+/** @jsx jsx */
 import { Component, Children, ContextType, isValidElement } from 'react'
 
 import { omitProps, safeCloneElement } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'