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

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-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
+## [10.16.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-table
 

package/es/Table/Body/index.js

@@ -23,11 +23,10 @@ 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, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
@@ -39,6 +38,7 @@ 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,27 +56,29 @@ let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       isStacked = _this$context.isStacked,
       hover = _this$context.hover,
       headers = _this$context.headers;
-    return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Body.allowedProps), Body), {
+    return _jsx(View, {
+      ...View.omitViewProps(omitProps(this.props, Body.allowedProps), Body),
       as: isStacked ? 'div' : 'tbody',
       css: styles === null || styles === void 0 ? void 0 : styles.body,
-      role: isStacked ? 'rowgroup' : void 0
-    }), Children.map(children, child => {
-      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: 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,11 +23,10 @@ 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, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
@@ -39,6 +38,7 @@ 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,11 +54,13 @@ let Cell = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       styles = _this$props3.styles,
       header = _this$props3.header;
     const isStacked = this.context.isStacked;
-    return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Cell.allowedProps), Cell), {
+    return _jsxs(View, {
+      ...View.omitViewProps(omitProps(this.props, Cell.allowedProps), Cell),
       as: isStacked ? 'div' : 'td',
       css: styles === null || styles === void 0 ? void 0 : styles.cell,
-      role: isStacked ? 'cell' : void 0
-    }), header && callRenderProp(header), header && ': ', callRenderProp(children));
+      role: isStacked ? 'cell' : void 0,
+      children: [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,11 +23,10 @@ var _dec, _class, _ColHeader;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils';
 import { IconMiniArrowUpLine, IconMiniArrowDownLine, IconMiniArrowDoubleLine } from '@instructure/ui-icons';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
@@ -38,6 +37,7 @@ 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,19 +88,23 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
       sortDirection = _this$props5.sortDirection,
       scope = _this$props5.scope,
       styles = _this$props5.styles;
-    return jsx("th", Object.assign({}, omitProps(this.props, ColHeader.allowedProps), {
+    return _jsxs("th", {
+      ...omitProps(this.props, ColHeader.allowedProps),
       css: styles === null || styles === void 0 ? void 0 : styles.colHeader,
       style: {
         width
       },
       scope: scope,
-      "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());
+      "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()]
+    });
   }
 }, _ColHeader.displayName = "ColHeader", _ColHeader.componentId = 'Table.ColHeader', _ColHeader.allowedProps = allowedProps, _ColHeader.propTypes = propTypes, _ColHeader.defaultProps = {
   textAlign: 'start',

package/es/Table/Head/index.js

@@ -24,14 +24,13 @@ 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, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
@@ -43,6 +42,7 @@ 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,31 +127,35 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
         });
       }
     };
-    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'
-        }
+    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))
+          })
+        })
       })
-    }, label))))));
+    });
   }
   render() {
     const _this$props4 = this.props,
@@ -159,9 +163,11 @@ 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", Object.assign({}, omitProps(this.props, Head.allowedProps, ['hover']), {
-      css: styles === null || styles === void 0 ? void 0 : styles.head
-    }), children);
+    _jsx("thead", {
+      ...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, _Head.allowedProps = allowedProps, _Head.propTypes = propTypes, _Head.defaultProps = {
   children: null

package/es/Table/Row/index.js

@@ -23,11 +23,10 @@ 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, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
@@ -39,6 +38,7 @@ 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,23 +60,25 @@ 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, Object.assign({}, View.omitViewProps(omitProps(this.props, Row.allowedProps), Row), {
+    return _jsx(View, {
+      ...View.omitViewProps(omitProps(this.props, Row.allowedProps), Row),
       as: isStacked ? 'div' : 'tr',
       css: styles === null || styles === void 0 ? void 0 : styles.row,
-      role: isStacked ? 'row' : void 0
-    }), Children.toArray(children).filter(Boolean).map((child, index) => {
-      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: 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,11 +23,10 @@ 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, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
@@ -39,6 +38,7 @@ 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,12 +53,14 @@ let RowHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
       children = _this$props3.children,
       styles = _this$props3.styles;
     const isStacked = this.context.isStacked;
-    return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, RowHeader.allowedProps), RowHeader), {
+    return _jsx(View, {
+      ...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
-    }), callRenderProp(children));
+      role: isStacked ? 'rowheader' : void 0,
+      children: callRenderProp(children)
+    });
   }
 }, _RowHeader.displayName = "RowHeader", _RowHeader.componentId = 'Table.RowHeader', _RowHeader.contextType = TableContext, _RowHeader.allowedProps = allowedProps, _RowHeader.propTypes = propTypes, _RowHeader.defaultProps = {
   textAlign: 'start',