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

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.16.1-pr-snapshot-1744893671793](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-pr-snapshot-1744893671793) (2025-04-17)
+## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
 
 **Note:** Version bump only for package @instructure/ui-table
 

package/es/Table/Body/index.js

@@ -23,10 +23,11 @@ var _dec, _class, _Body;
  * SOFTWARE.
  */
 
+/** @jsx jsx */
 import { Component, Children, 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';
 import { allowedProps, propTypes } from './props';
@@ -38,7 +39,6 @@ parent: Table
 id: Table.Body
 ---
 **/
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Body = class Body extends Component {
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -56,29 +56,27 @@ let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       isStacked = _this$context.isStacked,
       hover = _this$context.hover,
       headers = _this$context.headers;
-    return _jsx(View, {
-      ...View.omitViewProps(omitProps(this.props, Body.allowedProps), Body),
+    return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Body.allowedProps), Body), {
       as: isStacked ? 'div' : 'tbody',
       css: styles === null || styles === void 0 ? void 0 : styles.body,
-      role: isStacked ? 'rowgroup' : void 0,
-      children: Children.map(children, child => {
-        if (/*#__PURE__*/isValidElement(child)) {
-          return safeCloneElement(child, {
-            key: child.props.name,
-            // Sent down for compatibility with custom components
-            // TODO DEPRECATED, remove in v11
-            hover,
-            // Sent down for compatibility with custom components
-            // TODO DEPRECATED, remove in v11
-            isStacked,
-            // Sent down for compatibility with custom components
-            // TODO DEPRECATED, remove in v11
-            headers
-          });
-        }
-        return child;
-      })
-    });
+      role: isStacked ? 'rowgroup' : void 0
+    }), Children.map(children, child => {
+      if (/*#__PURE__*/isValidElement(child)) {
+        return safeCloneElement(child, {
+          key: child.props.name,
+          // Sent down for compatibility with custom components
+          // TODO DEPRECATED, remove in v11
+          hover,
+          // Sent down for compatibility with custom components
+          // TODO DEPRECATED, remove in v11
+          isStacked,
+          // Sent down for compatibility with custom components
+          // TODO DEPRECATED, remove in v11
+          headers
+        });
+      }
+      return child;
+    }));
   }
 }, _Body.displayName = "Body", _Body.componentId = 'Table.Body', _Body.contextType = TableContext, _Body.allowedProps = allowedProps, _Body.propTypes = propTypes, _Body.defaultProps = {
   children: null

package/es/Table/Cell/index.js

@@ -23,10 +23,11 @@ var _dec, _class, _Cell;
  * SOFTWARE.
  */
 
+/** @jsx jsx */
 import { Component } 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';
 import { allowedProps, propTypes } from './props';
@@ -38,7 +39,6 @@ parent: Table
 id: Table.Cell
 ---
 **/
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 let Cell = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Cell = class Cell extends Component {
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -54,13 +54,11 @@ let Cell = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       styles = _this$props3.styles,
       header = _this$props3.header;
     const isStacked = this.context.isStacked;
-    return _jsxs(View, {
-      ...View.omitViewProps(omitProps(this.props, Cell.allowedProps), Cell),
+    return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Cell.allowedProps), Cell), {
       as: isStacked ? 'div' : 'td',
       css: styles === null || styles === void 0 ? void 0 : styles.cell,
-      role: isStacked ? 'cell' : void 0,
-      children: [header && callRenderProp(header), header && ': ', callRenderProp(children)]
-    });
+      role: isStacked ? 'cell' : void 0
+    }), header && callRenderProp(header), header && ': ', callRenderProp(children));
   }
 }, _Cell.displayName = "Cell", _Cell.componentId = 'Table.Cell', _Cell.contextType = TableContext, _Cell.allowedProps = allowedProps, _Cell.propTypes = propTypes, _Cell.defaultProps = {
   textAlign: 'start',

package/es/Table/ColHeader/index.js

@@ -23,10 +23,11 @@ var _dec, _class, _ColHeader;
  * SOFTWARE.
  */
 
-import { Component } from 'react';
+/** @jsx jsx */
+import React, { Component } from 'react';
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils';
 import { IconMiniArrowUpLine, IconMiniArrowDownLine, IconMiniArrowDoubleLine } from '@instructure/ui-icons';
-import { withStyle } from '@instructure/emotion';
+import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
@@ -37,7 +38,6 @@ parent: Table
 id: Table.ColHeader
 ---
 **/
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ColHeader = class ColHeader extends Component {
   constructor(...args) {
     super(...args);
@@ -64,17 +64,17 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
       onRequestSort = _this$props4.onRequestSort,
       styles = _this$props4.styles;
     if (sortDirection === 'ascending') {
-      return _jsx(IconMiniArrowUpLine, {
+      return jsx(IconMiniArrowUpLine, {
         css: styles === null || styles === void 0 ? void 0 : styles.sortedIconColor
       });
     }
     if (sortDirection === 'descending') {
-      return _jsx(IconMiniArrowDownLine, {
+      return jsx(IconMiniArrowDownLine, {
         css: styles === null || styles === void 0 ? void 0 : styles.sortedIconColor
       });
     }
     if (onRequestSort) {
-      return _jsx(IconMiniArrowDoubleLine, {
+      return jsx(IconMiniArrowDoubleLine, {
         css: styles === null || styles === void 0 ? void 0 : styles.unSortedIconColor
       });
     }
@@ -88,23 +88,19 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
       sortDirection = _this$props5.sortDirection,
       scope = _this$props5.scope,
       styles = _this$props5.styles;
-    return _jsxs("th", {
-      ...omitProps(this.props, ColHeader.allowedProps),
+    return jsx("th", Object.assign({}, omitProps(this.props, ColHeader.allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.colHeader,
       style: {
         width
       },
       scope: scope,
-      "aria-sort": sortDirection,
-      children: [onRequestSort && _jsx("button", {
-        onClick: this.handleClick,
-        css: styles === null || styles === void 0 ? void 0 : styles.button,
-        children: _jsxs("div", {
-          css: styles === null || styles === void 0 ? void 0 : styles.buttonContent,
-          children: [callRenderProp(children), this.renderSortArrow()]
-        })
-      }), !onRequestSort && children, !onRequestSort && this.renderSortArrow()]
-    });
+      "aria-sort": sortDirection
+    }), onRequestSort && jsx("button", {
+      onClick: this.handleClick,
+      css: styles === null || styles === void 0 ? void 0 : styles.button
+    }, jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.buttonContent
+    }, callRenderProp(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
   }
 }, _ColHeader.displayName = "ColHeader", _ColHeader.componentId = 'Table.ColHeader', _ColHeader.allowedProps = allowedProps, _ColHeader.propTypes = propTypes, _ColHeader.defaultProps = {
   textAlign: 'start',

package/es/Table/Head/index.js

@@ -24,13 +24,14 @@ var _dec, _class, _Head, _ScreenReaderContent;
  * SOFTWARE.
  */
 
+/** @jsx jsx */
 import { Component, Children } from 'react';
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { IconCheckLine } from '@instructure/ui-icons';
 import { warn } from '@instructure/console';
-import { withStyle } from '@instructure/emotion';
+import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
@@ -42,7 +43,6 @@ parent: Table
 id: Table.Head
 ---
 **/
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Head = class Head extends Component {
   /**
    * Returns `true` if the first child's children have a `onRequestSort` prop
@@ -127,35 +127,31 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
         });
       }
     };
-    return _jsx("div", {
-      role: "rowgroup",
-      children: _jsx("div", {
-        role: "row",
-        children: _jsx("div", {
-          role: "cell",
-          "aria-colspan": count,
-          children: _jsx(SimpleSelect, {
-            renderLabel: renderSortLabel ? callRenderProp(renderSortLabel) : _ScreenReaderContent || (_ScreenReaderContent = _jsx(ScreenReaderContent, {})),
-            renderBeforeInput: selectedOption && IconCheckLine,
-            value: selectedOption,
-            onChange: handleSelect,
-            children: options.map(({
-              id,
-              label
-            }) => _jsx(SimpleSelect.Option, {
-              id: id,
-              value: id,
-              renderBeforeLabel: id === selectedOption ? IconCheckLine : () => _jsx(IconCheckLine, {
-                style: {
-                  color: 'transparent'
-                }
-              }),
-              children: label
-            }, id))
-          })
-        })
+    return jsx("div", {
+      role: "rowgroup"
+    }, jsx("div", {
+      role: "row"
+    }, jsx("div", {
+      role: "cell",
+      "aria-colspan": count
+    }, jsx(SimpleSelect, {
+      renderLabel: renderSortLabel ? callRenderProp(renderSortLabel) : _ScreenReaderContent || (_ScreenReaderContent = jsx(ScreenReaderContent, null)),
+      renderBeforeInput: selectedOption && IconCheckLine,
+      value: selectedOption,
+      onChange: handleSelect
+    }, options.map(({
+      id,
+      label
+    }) => jsx(SimpleSelect.Option, {
+      id: id,
+      key: id,
+      value: id,
+      renderBeforeLabel: id === selectedOption ? IconCheckLine : () => jsx(IconCheckLine, {
+        style: {
+          color: 'transparent'
+        }
       })
-    });
+    }, label))))));
   }
   render() {
     const _this$props4 = this.props,
@@ -163,11 +159,9 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       styles = _this$props4.styles;
     return this.context.isStacked ? this.renderSelect() :
     // TODO remove 'hover' exclude in v11, its passed down for compatibility with custom components
-    _jsx("thead", {
-      ...omitProps(this.props, Head.allowedProps, ['hover']),
-      css: styles === null || styles === void 0 ? void 0 : styles.head,
-      children: children
-    });
+    jsx("thead", Object.assign({}, 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, _Head.allowedProps = allowedProps, _Head.propTypes = propTypes, _Head.defaultProps = {
   children: null

package/es/Table/Row/index.js

@@ -23,10 +23,11 @@ var _dec, _class, _Row;
  * SOFTWARE.
  */
 
+/** @jsx jsx */
 import { Component, Children, 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';
 import { allowedProps, propTypes } from './props';
@@ -38,7 +39,6 @@ parent: Table
 id: Table.Row
 ---
 **/
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 let Row = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Row = class Row extends Component {
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -60,25 +60,23 @@ let Row = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       styles = _this$props3.styles;
     const isStacked = this.context.isStacked;
     const headers = this.context.headers;
-    return _jsx(View, {
-      ...View.omitViewProps(omitProps(this.props, Row.allowedProps), Row),
+    return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Row.allowedProps), Row), {
       as: isStacked ? 'div' : 'tr',
       css: styles === null || styles === void 0 ? void 0 : styles.row,
-      role: isStacked ? 'row' : void 0,
-      children: Children.toArray(children).filter(Boolean).map((child, index) => {
-        if (/*#__PURE__*/isValidElement(child)) {
-          return safeCloneElement(child, {
-            key: child.props.name,
-            // Sent down for compatibility with custom components
-            // TODO DEPRECATED, remove in v11
-            isStacked,
-            // used by `Cell` to render its column title in `stacked` layout
-            header: headers && headers[index]
-          });
-        }
-        return child;
-      })
-    });
+      role: isStacked ? 'row' : void 0
+    }), Children.toArray(children).filter(Boolean).map((child, index) => {
+      if (/*#__PURE__*/isValidElement(child)) {
+        return safeCloneElement(child, {
+          key: child.props.name,
+          // Sent down for compatibility with custom components
+          // TODO DEPRECATED, remove in v11
+          isStacked,
+          // used by `Cell` to render its column title in `stacked` layout
+          header: headers && headers[index]
+        });
+      }
+      return child;
+    }));
   }
 }, _Row.displayName = "Row", _Row.componentId = 'Table.Row', _Row.contextType = TableContext, _Row.allowedProps = allowedProps, _Row.propTypes = propTypes, _Row.defaultProps = {
   children: null

package/es/Table/RowHeader/index.js

@@ -23,10 +23,11 @@ var _dec, _class, _RowHeader;
  * SOFTWARE.
  */
 
+/** @jsx jsx */
 import { Component } 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';
 import { allowedProps, propTypes } from './props';
@@ -38,7 +39,6 @@ parent: Table
 id: Table.RowHeader
 ---
 **/
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 let RowHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_RowHeader = class RowHeader extends Component {
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -53,14 +53,12 @@ let RowHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
       children = _this$props3.children,
       styles = _this$props3.styles;
     const isStacked = this.context.isStacked;
-    return _jsx(View, {
-      ...View.omitViewProps(omitProps(this.props, RowHeader.allowedProps), RowHeader),
+    return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, RowHeader.allowedProps), RowHeader), {
       as: isStacked ? 'div' : 'th',
       css: styles === null || styles === void 0 ? void 0 : styles.rowHeader,
       scope: "row",
-      role: isStacked ? 'rowheader' : void 0,
-      children: callRenderProp(children)
-    });
+      role: isStacked ? 'rowheader' : void 0
+    }), callRenderProp(children));
   }
 }, _RowHeader.displayName = "RowHeader", _RowHeader.componentId = 'Table.RowHeader', _RowHeader.contextType = TableContext, _RowHeader.allowedProps = allowedProps, _RowHeader.propTypes = propTypes, _RowHeader.defaultProps = {
   textAlign: 'start',