@instructure/ui-table 10.2.1-snapshot-3 → 10.2.1-snapshot-12

package/lib/Table/index.js

@@ -21,6 +21,7 @@ var _ColHeader = require("./ColHeader");
 var _RowHeader = require("./RowHeader");
 var _Cell = require("./Cell");
 var _props = require("./props");
+var _TableContext = _interopRequireDefault(require("./TableContext"));
 var _dec, _class, _Table;
 /*
  * The MIT License (MIT)
@@ -72,15 +73,16 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyle)(_styles.default, _th
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
   getHeaders() {
-    const children = this.props.children;
-    const _ref = _react.Children.toArray(children),
-      _ref2 = (0, _slicedToArray2.default)(_ref, 1),
-      head = _ref2[0];
-    const _Children$toArray = _react.Children.toArray(head.props.children),
+    const _Children$toArray = _react.Children.toArray(this.props.children),
       _Children$toArray2 = (0, _slicedToArray2.default)(_Children$toArray, 1),
-      row = _Children$toArray2[0];
-    if (!row) return void 0;
-    return _react.Children.map(row.props.children, colHeader => {
+      headChild = _Children$toArray2[0];
+    if (!headChild || ! /*#__PURE__*/(0, _react.isValidElement)(headChild)) return void 0;
+    const _Children$toArray3 = _react.Children.toArray(headChild.props.children),
+      _Children$toArray4 = (0, _slicedToArray2.default)(_Children$toArray3, 1),
+      firstRow = _Children$toArray4[0];
+    if (!firstRow || ! /*#__PURE__*/(0, _react.isValidElement)(firstRow)) return void 0;
+    return _react.Children.map(firstRow.props.children, colHeader => {
+      if (! /*#__PURE__*/(0, _react.isValidElement)(colHeader)) return void 0;
       return colHeader.props.children;
     });
   }
@@ -94,7 +96,13 @@ 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, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Table.allowedProps), Table), {
+    return (0, _emotion.jsx)(_TableContext.default.Provider, {
+      value: {
+        isStacked: isStacked,
+        hover: hover,
+        headers: headers
+      }
+    }, (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,
@@ -102,13 +110,13 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       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 => {
-      return (0, _safeCloneElement.safeCloneElement)(child, {
-        key: child.props.name,
-        isStacked,
-        hover,
-        headers
-      });
-    }));
+      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/lib/index.js

@@ -9,4 +9,11 @@ Object.defineProperty(exports, "Table", {
     return _Table.Table;
   }
 });
-var _Table = require("./Table");
+Object.defineProperty(exports, "TableContext", {
+  enumerable: true,
+  get: function () {
+    return _TableContext.TableContext;
+  }
+});
+var _Table = require("./Table");
+var _TableContext = require("./Table/TableContext");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "10.2.1-snapshot-3",
+  "version": "10.2.1-snapshot-12",
   "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.2.1-snapshot-3",
-    "@instructure/ui-babel-preset": "10.2.1-snapshot-3",
-    "@instructure/ui-color-utils": "10.2.1-snapshot-3",
-    "@instructure/ui-test-utils": "10.2.1-snapshot-3",
-    "@instructure/ui-themes": "10.2.1-snapshot-3",
+    "@instructure/ui-axe-check": "10.2.1-snapshot-12",
+    "@instructure/ui-babel-preset": "10.2.1-snapshot-12",
+    "@instructure/ui-color-utils": "10.2.1-snapshot-12",
+    "@instructure/ui-test-utils": "10.2.1-snapshot-12",
+    "@instructure/ui-themes": "10.2.1-snapshot-12",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -35,17 +35,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "10.2.1-snapshot-3",
-    "@instructure/emotion": "10.2.1-snapshot-3",
-    "@instructure/shared-types": "10.2.1-snapshot-3",
-    "@instructure/ui-a11y-content": "10.2.1-snapshot-3",
-    "@instructure/ui-icons": "10.2.1-snapshot-3",
-    "@instructure/ui-prop-types": "10.2.1-snapshot-3",
-    "@instructure/ui-react-utils": "10.2.1-snapshot-3",
-    "@instructure/ui-simple-select": "10.2.1-snapshot-3",
-    "@instructure/ui-testable": "10.2.1-snapshot-3",
-    "@instructure/ui-utils": "10.2.1-snapshot-3",
-    "@instructure/ui-view": "10.2.1-snapshot-3",
+    "@instructure/console": "10.2.1-snapshot-12",
+    "@instructure/emotion": "10.2.1-snapshot-12",
+    "@instructure/shared-types": "10.2.1-snapshot-12",
+    "@instructure/ui-a11y-content": "10.2.1-snapshot-12",
+    "@instructure/ui-icons": "10.2.1-snapshot-12",
+    "@instructure/ui-prop-types": "10.2.1-snapshot-12",
+    "@instructure/ui-react-utils": "10.2.1-snapshot-12",
+    "@instructure/ui-simple-select": "10.2.1-snapshot-12",
+    "@instructure/ui-testable": "10.2.1-snapshot-12",
+    "@instructure/ui-utils": "10.2.1-snapshot-12",
+    "@instructure/ui-view": "10.2.1-snapshot-12",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Table/Body/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component, Children } from 'react'
+import { Component, Children, ContextType, isValidElement } from 'react'
 
 import { safeCloneElement, omitProps } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
@@ -32,8 +32,8 @@ import { withStyle, jsx } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import type { TableBodyProps } from './props'
-import type { RowChild } from '../props'
 import { allowedProps, propTypes } from './props'
+import TableContext from '../TableContext'
 
 /**
 ---
@@ -44,10 +44,10 @@ id: Table.Body
 @withStyle(generateStyle, generateComponentTheme)
 class Body extends Component<TableBodyProps> {
   static readonly componentId = 'Table.Body'
-
+  static contextType = TableContext
+  declare context: ContextType<typeof TableContext>
   static allowedProps = allowedProps
   static propTypes = propTypes
-
   static defaultProps = {
     children: null
   }
@@ -61,7 +61,8 @@ class Body extends Component<TableBodyProps> {
   }
 
   render() {
-    const { children, hover, isStacked, headers, styles } = this.props
+    const { children, styles } = this.props
+    const { isStacked, hover, headers } = this.context
 
     return (
       <View
@@ -70,14 +71,23 @@ class Body extends Component<TableBodyProps> {
         css={styles?.body}
         role={isStacked ? 'rowgroup' : undefined}
       >
-        {Children.map(children as RowChild[], (child) =>
-          safeCloneElement(child, {
-            key: child.props.name,
-            hover,
-            isStacked,
-            headers
-          })
-        )}
+        {Children.map(children, (child) => {
+          if (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
+        })}
       </View>
     )
   }

package/src/Table/Body/props.ts

@@ -24,8 +24,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import type { TableRowProps } from '../Row/props'
-
 import type {
   OtherHTMLAttributes,
   PropValidators,
@@ -34,11 +32,11 @@ import type {
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type TableBodyOwnProps = {
-  hover?: boolean
-  isStacked?: boolean
-  headers?: TableRowProps['headers']
   /**
-   * `Table.Row`
+   * Body's children should be a container component where each child represents
+   * a row.
+   *
+   * `Table.Row` by default
    */
   children?: React.ReactNode
 }
@@ -54,20 +52,10 @@ type TableBodyProps = TableBodyOwnProps &
 type TableBodyStyle = ComponentStyle<'body'>
 
 const propTypes: PropValidators<PropKeys> = {
-  children: PropTypes.node,
-  hover: PropTypes.bool,
-  isStacked: PropTypes.bool,
-  headers: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-  )
+  children: PropTypes.node
 }
 
-const allowedProps: AllowedPropKeys = [
-  'children',
-  'hover',
-  'isStacked',
-  'headers'
-]
+const allowedProps: AllowedPropKeys = ['children']
 
 export type { TableBodyProps, TableBodyStyle }
 export { propTypes, allowedProps }

package/src/Table/Body/styles.ts

@@ -31,8 +31,6 @@ import type { TableBodyStyle } from './props'
  * ---
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme: TableBodyTheme): TableBodyStyle => {

package/src/Table/Cell/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component } from 'react'
+import { Component, ContextType } from 'react'
 
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
@@ -34,6 +34,7 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import type { TableCellProps } from './props'
 import { allowedProps, propTypes } from './props'
+import TableContext from '../TableContext'
 
 /**
 ---
@@ -44,7 +45,8 @@ id: Table.Cell
 @withStyle(generateStyle, generateComponentTheme)
 class Cell extends Component<TableCellProps> {
   static readonly componentId = 'Table.Cell'
-
+  static contextType = TableContext
+  declare context: ContextType<typeof TableContext>
   static allowedProps = allowedProps
   static propTypes = propTypes
 
@@ -62,7 +64,8 @@ class Cell extends Component<TableCellProps> {
   }
 
   render() {
-    const { children, styles, isStacked, header } = this.props
+    const { children, styles, header } = this.props
+    const isStacked = this.context.isStacked
 
     return (
       <View

package/src/Table/Cell/props.ts

@@ -33,10 +33,14 @@ import type {
 } from '@instructure/shared-types'
 
 type TableCellOwnProps = {
-  isStacked?: boolean
+  /**
+   * Contains the column header for this cell.
+   * This gets rendered in `stacked` layout to identify the column the data
+   * belongs to.
+   */
   header?: Renderable
   /**
-   * Control the text alignment in cell
+   * Controls the text alignment in cell.
    */
   textAlign?: 'start' | 'center' | 'end'
   children?: Renderable
@@ -54,17 +58,11 @@ type TableCellStyle = ComponentStyle<'cell'>
 
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  isStacked: PropTypes.bool,
   header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   textAlign: PropTypes.oneOf(['start', 'center', 'end'])
 }
 
-const allowedProps: AllowedPropKeys = [
-  'children',
-  'isStacked',
-  'header',
-  'textAlign'
-]
+const allowedProps: AllowedPropKeys = ['children', 'header', 'textAlign']
 
 export type { TableCellProps, TableCellStyle }
 export { propTypes, allowedProps }

package/src/Table/ColHeader/props.ts

@@ -32,7 +32,10 @@ import type {
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type TableColHeaderOwnProps = {
-  isStacked?: boolean // needed because it needs the same API as `Table.RowHeader`
+  /**
+   * DEPRECATED. Use `TableContext` to read this value
+   */
+  isStacked?: boolean
   /**
    * A unique id for this column. The `id` is also used as option in combobox,
    * when sortable table is in stacked layout,
@@ -53,18 +56,18 @@ type TableColHeaderOwnProps = {
    */
   textAlign?: 'start' | 'center' | 'end'
   /**
-   * The string of sorting direction
+   * The sorting direction
    */
   sortDirection?: 'none' | 'ascending' | 'descending'
   /**
-   * Callback fired when column header is clicked. Parameters: `(event, { id })`
+   * Callback fired when column header is clicked.
    */
   onRequestSort?: (
     event: React.SyntheticEvent,
     param: { id: TableColHeaderOwnProps['id'] }
   ) => void
   /**
-   * The column header scope attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
+   * The column header scope attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#scope
    */
   scope?: 'row' | 'col' | 'rowgroup' | 'colgroup' | 'auto'
   children?: React.ReactNode

package/src/Table/ColHeader/styles.ts

@@ -32,7 +32,6 @@ import type { TableColHeaderProps, TableColHeaderStyle } from './props'
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (

package/src/Table/Head/index.tsx

@@ -23,13 +23,9 @@
  */
 
 /** @jsx jsx */
-import { Component, Children } from 'react'
+import { Component, Children, ContextType } from 'react'
 
-import {
-  omitProps,
-  matchComponentTypes,
-  callRenderProp
-} from '@instructure/ui-react-utils'
+import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
 import { SimpleSelect } from '@instructure/ui-simple-select'
 import type { SimpleSelectProps } from '@instructure/ui-simple-select'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
@@ -41,12 +37,11 @@ import { withStyle, jsx } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { Row } from '../Row'
-import { ColHeader } from '../ColHeader'
 import type { TableColHeaderProps } from '../ColHeader/props'
 import type { TableHeadProps } from './props'
-import type { ColHeaderChild, RowChild } from '../props'
+import type { RowChild } from '../props'
 import { allowedProps, propTypes } from './props'
+import TableContext from '../TableContext'
 
 /**
 ---
@@ -57,26 +52,28 @@ id: Table.Head
 @withStyle(generateStyle, generateComponentTheme)
 class Head extends Component<TableHeadProps> {
   static readonly componentId = 'Table.Head'
-
+  static contextType = TableContext
+  declare context: ContextType<typeof TableContext>
   static allowedProps = allowedProps
   static propTypes = propTypes
-
   static defaultProps = {
     children: null
   }
 
+  /**
+   * Returns `true` if the first child's children have a `onRequestSort` prop
+   */
   get isSortable() {
-    const [row] = Children.toArray(this.props.children) as RowChild[]
+    const [firstRow] = Children.toArray(this.props.children) as RowChild[]
     let sortable = false
-
-    if (row) {
-      Children.forEach(row.props.children as ColHeaderChild[], (colHeader) => {
-        if (matchComponentTypes<ColHeaderChild>(colHeader, [ColHeader])) {
-          if (colHeader.props.onRequestSort) sortable = true
+    if (firstRow && firstRow.props && firstRow.props.children) {
+      Children.forEach(firstRow.props.children, (grandchild) => {
+        if (grandchild.props.onRequestSort) {
+          sortable = true
+          return
         }
       })
     }
-
     return sortable
   }
 
@@ -94,13 +91,19 @@ class Head extends Component<TableHeadProps> {
     this.props.makeStyles?.()
   }
 
+  /**
+   * This `Select` is used in `stacked` layout. It's populated by iterating
+   * through the first child's children (by default `ColHeader`) and reading
+   * there the `id`, `stackedSortByLabel`, `sortDirection`, `onRequestSort` props
+   */
   renderSelect() {
     const { children, renderSortLabel } = this.props
-    const [row] = Children.toArray(children) as RowChild[]
+    const [firstRow] = Children.toArray(children) as RowChild[]
 
-    if (!matchComponentTypes<RowChild>(row, [Row])) {
+    if (!firstRow?.props?.children) {
       return null
     }
+
     const options: {
       id: TableColHeaderProps['id']
       label:
@@ -113,21 +116,17 @@ class Head extends Component<TableHeadProps> {
     > = {}
     let selectedOption: TableColHeaderProps['id'] | undefined
     let count = 0
-
-    Children.forEach(row.props.children, (colHeader) => {
+    Children.forEach(firstRow.props.children, (grandchild) => {
       count += 1
-      if (matchComponentTypes<ColHeaderChild>(colHeader, [ColHeader])) {
-        const { id, stackedSortByLabel, sortDirection, onRequestSort } =
-          colHeader.props
-
+      if (!grandchild.props) return
+      const { id, stackedSortByLabel, sortDirection, onRequestSort } =
+        grandchild.props
+      if (id && onRequestSort) {
         const label = stackedSortByLabel || id
-
-        if (onRequestSort) {
-          options.push({ id, label })
-          clickHandlers[id] = onRequestSort
-          if (sortDirection !== 'none') {
-            selectedOption = id
-          }
+        options.push({ id, label })
+        clickHandlers[id] = onRequestSort
+        if (sortDirection !== 'none') {
+          selectedOption = id
         }
       }
     })
@@ -177,15 +176,16 @@ class Head extends Component<TableHeadProps> {
   }
 
   render() {
-    const { children, isStacked, styles } = this.props
-
-    return isStacked ? (
+    const { children, styles } = this.props
+    return this.context.isStacked ? (
       this.renderSelect()
     ) : (
-      <thead {...omitProps(this.props, Head.allowedProps)} css={styles?.head}>
-        {Children.map(children, (child) =>
-          matchComponentTypes<RowChild>(child, [Row]) ? child : null
-        )}
+      // TODO remove 'hover' exclude in v11, its passed down for compatibility with custom components
+      <thead
+        {...omitProps(this.props, Head.allowedProps, ['hover'])}
+        css={styles?.head}
+      >
+        {children}
       </thead>
     )
   }

package/src/Table/Head/props.ts

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-import React from 'react'
 import PropTypes from 'prop-types'
 
 import type {
@@ -32,15 +31,30 @@ import type {
   TableHeadTheme
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import { RowChild } from '../props'
 
 type TableHeadOwnProps = {
-  hover?: boolean // needed because it needs the same API as `Table.Body`
-  isStacked?: boolean
+  /**
+   * The sort `Select`'s label when using `stacked` layout and the table is
+   * sortable.
+   * If you don't want to display anything you should use `ScreenReaderContent`
+   * so screen readers can read the `Select`'s purpose
+   */
   renderSortLabel?: Renderable
   /**
-   * `Table.Row`
+   * The header row(s).
+   * Default type: `Table.Row`
+   *
+   * Its first child is treated specially if the table is sortable and has
+   * `stacked` layout:
+   *
+   * A `Select` is created which reads options from the first child's
+   * children, that tries to read the following props: `id`,
+   * `stackedSortByLabel`,`sortDirection`, `onRequestSort` (Available on
+   * `Table.ColHeader`).
+   * These are used to sort the table in this layout.
    */
-  children?: React.ReactNode
+  children?: RowChild
 }
 type PropKeys = keyof TableHeadOwnProps
 
@@ -54,17 +68,10 @@ type TableHeadStyle = ComponentStyle<'head'>
 
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.node,
-  hover: PropTypes.bool,
-  isStacked: PropTypes.bool,
   renderSortLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 }
 
-const allowedProps: AllowedPropKeys = [
-  'children',
-  'hover',
-  'isStacked',
-  'renderSortLabel'
-]
+const allowedProps: AllowedPropKeys = ['children', 'renderSortLabel']
 
 export type { TableHeadProps, TableHeadStyle }
 export { propTypes, allowedProps }

package/src/Table/Head/styles.ts

@@ -31,8 +31,6 @@ import type { TableHeadStyle } from './props'
  * ---
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme: TableHeadTheme): TableHeadStyle => {