@instructure/ui-table 10.26.1-snapshot-2 → 10.26.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "10.26.1-snapshot-2",
+  "version": "10.26.2",
   "description": "A styled HTML table component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,29 +23,32 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.1-snapshot-2",
-    "@instructure/ui-babel-preset": "10.26.1-snapshot-2",
-    "@instructure/ui-color-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-themes": "10.26.1-snapshot-2",
+    "@instructure/ui-axe-check": "10.26.2",
+    "@instructure/ui-babel-preset": "10.26.2",
+    "@instructure/ui-color-utils": "10.26.2",
+    "@instructure/ui-themes": "10.26.2",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "15.0.7",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.26.1-snapshot-2",
-    "@instructure/emotion": "10.26.1-snapshot-2",
-    "@instructure/shared-types": "10.26.1-snapshot-2",
-    "@instructure/ui-a11y-content": "10.26.1-snapshot-2",
-    "@instructure/ui-icons": "10.26.1-snapshot-2",
-    "@instructure/ui-react-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-simple-select": "10.26.1-snapshot-2",
-    "@instructure/ui-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-view": "10.26.1-snapshot-2"
+    "@instructure/console": "10.26.2",
+    "@instructure/emotion": "10.26.2",
+    "@instructure/shared-types": "10.26.2",
+    "@instructure/ui-a11y-content": "10.26.2",
+    "@instructure/ui-icons": "10.26.2",
+    "@instructure/ui-prop-types": "10.26.2",
+    "@instructure/ui-react-utils": "10.26.2",
+    "@instructure/ui-simple-select": "10.26.2",
+    "@instructure/ui-testable": "10.26.2",
+    "@instructure/ui-utils": "10.26.2",
+    "@instructure/ui-view": "10.26.2",
+    "prop-types": "^15.8.1"
   },
   "peerDependencies": {
-    "react": ">=18 <=19"
+    "react": ">=16.14 <=18"
   },
   "publishConfig": {
     "access": "public"

package/src/Table/Body/index.tsx

@@ -22,13 +22,7 @@
  * SOFTWARE.
  */
 
-import {
-  Component,
-  Children,
-  ContextType,
-  isValidElement,
-  type ReactElement
-} from 'react'
+import { Component, Children, ContextType, isValidElement } from 'react'
 
 import { safeCloneElement, omitProps } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
@@ -37,7 +31,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import type { TableBodyProps } from './props'
-import { allowedProps } from './props'
+import { allowedProps, propTypes } from './props'
 import TableContext from '../TableContext'
 
 /**
@@ -52,6 +46,7 @@ class Body extends Component<TableBodyProps> {
   static contextType = TableContext
   declare context: ContextType<typeof TableContext>
   static allowedProps = allowedProps
+  static propTypes = propTypes
   static defaultProps = {
     children: null
   }
@@ -66,7 +61,7 @@ class Body extends Component<TableBodyProps> {
 
   render() {
     const { children, styles } = this.props
-    const { isStacked } = this.context
+    const { isStacked, hover, headers } = this.context
 
     return (
       <View
@@ -78,7 +73,16 @@ class Body extends Component<TableBodyProps> {
         {Children.map(children, (child) => {
           if (isValidElement(child)) {
             return safeCloneElement(child, {
-              key: (child as ReactElement<any>).props.name
+              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

package/src/Table/Body/props.ts

@@ -22,8 +22,11 @@
  * SOFTWARE.
  */
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import type {
   OtherHTMLAttributes,
+  PropValidators,
   TableBodyTheme
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
@@ -47,7 +50,12 @@ type TableBodyProps = TableBodyOwnProps &
   OtherHTMLAttributes<TableBodyOwnProps>
 
 type TableBodyStyle = ComponentStyle<'body'>
+
+const propTypes: PropValidators<PropKeys> = {
+  children: PropTypes.node
+}
+
 const allowedProps: AllowedPropKeys = ['children']
 
 export type { TableBodyProps, TableBodyStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/Table/Cell/index.tsx

@@ -32,7 +32,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import type { TableCellProps } from './props'
-import { allowedProps } from './props'
+import { allowedProps, propTypes } from './props'
 import TableContext from '../TableContext'
 
 /**
@@ -47,6 +47,7 @@ class Cell extends Component<TableCellProps> {
   static contextType = TableContext
   declare context: ContextType<typeof TableContext>
   static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
     textAlign: 'start',

package/src/Table/Cell/props.ts

@@ -22,9 +22,12 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
+
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type {
   OtherHTMLAttributes,
+  PropValidators,
   Renderable,
   TableCellTheme
 } from '@instructure/shared-types'
@@ -52,7 +55,14 @@ type TableCellProps = TableCellOwnProps &
   OtherHTMLAttributes<TableCellOwnProps>
 
 type TableCellStyle = ComponentStyle<'cell'>
+
+const propTypes: PropValidators<PropKeys> = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  textAlign: PropTypes.oneOf(['start', 'center', 'end'])
+}
+
 const allowedProps: AllowedPropKeys = ['children', 'header', 'textAlign']
 
 export type { TableCellProps, TableCellStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/Table/ColHeader/index.tsx

@@ -36,7 +36,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import type { TableColHeaderProps } from './props'
-import { allowedProps } from './props'
+import { allowedProps, propTypes } from './props'
 
 /**
 ---
@@ -49,6 +49,7 @@ class ColHeader extends Component<TableColHeaderProps> {
   static readonly componentId = 'Table.ColHeader'
 
   static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
     textAlign: 'start',

package/src/Table/ColHeader/props.ts

@@ -22,14 +22,20 @@
  * SOFTWARE.
  */
 import { ThHTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
 
 import type {
   OtherHTMLAttributes,
+  PropValidators,
   TableColHeaderTheme
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type TableColHeaderOwnProps = {
+  /**
+   * 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,
@@ -85,8 +91,22 @@ type TableColHeaderStyle = ComponentStyle<
   | 'unSortedIconColor'
   | 'sortedIconColor'
 >
+
+const propTypes: PropValidators<PropKeys> = {
+  isStacked: PropTypes.bool,
+  id: PropTypes.string.isRequired,
+  stackedSortByLabel: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  textAlign: PropTypes.oneOf(['start', 'center', 'end']),
+  sortDirection: PropTypes.oneOf(['none', 'ascending', 'descending']),
+  onRequestSort: PropTypes.func,
+  scope: PropTypes.oneOf(['row', 'col', 'rowgroup', 'colgroup', 'auto'])
+}
+
 const allowedProps: AllowedPropKeys = [
   'id',
+  'isStacked',
   'stackedSortByLabel',
   'children',
   'width',
@@ -97,4 +117,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { TableColHeaderProps, TableColHeaderStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/Table/Head/index.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { Component, Children, ContextType, type ReactElement } from 'react'
+import { Component, Children, ContextType } from 'react'
 
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
 import { SimpleSelect } from '@instructure/ui-simple-select'
@@ -39,7 +39,7 @@ import generateComponentTheme from './theme'
 import type { TableColHeaderProps } from '../ColHeader/props'
 import type { TableHeadProps } from './props'
 import type { RowChild } from '../props'
-import { allowedProps } from './props'
+import { allowedProps, propTypes } from './props'
 import TableContext from '../TableContext'
 
 /**
@@ -54,6 +54,7 @@ class Head extends Component<TableHeadProps> {
   static contextType = TableContext
   declare context: ContextType<typeof TableContext>
   static allowedProps = allowedProps
+  static propTypes = propTypes
   static defaultProps = {
     children: null
   }
@@ -65,15 +66,12 @@ class Head extends Component<TableHeadProps> {
     const [firstRow] = Children.toArray(this.props.children) as RowChild[]
     let sortable = false
     if (firstRow && firstRow.props && firstRow.props.children) {
-      Children.forEach(
-        firstRow.props.children,
-        (grandchild: ReactElement<any>) => {
-          if (grandchild?.props?.onRequestSort) {
-            sortable = true
-            return
-          }
+      Children.forEach(firstRow.props.children, (grandchild) => {
+        if (grandchild?.props?.onRequestSort) {
+          sortable = true
+          return
         }
-      )
+      })
     }
     return sortable
   }
@@ -117,23 +115,20 @@ class Head extends Component<TableHeadProps> {
     > = {}
     let selectedOption: TableColHeaderProps['id'] | undefined
     let count = 0
-    Children.forEach(
-      firstRow.props.children,
-      (grandchild: ReactElement<any>) => {
-        count += 1
-        if (!grandchild?.props) return // grandchild can be false
-        const { id, stackedSortByLabel, sortDirection, onRequestSort } =
-          grandchild.props
-        if (id && onRequestSort) {
-          const label = stackedSortByLabel || id
-          options.push({ id, label })
-          clickHandlers[id] = onRequestSort
-          if (sortDirection !== 'none') {
-            selectedOption = id
-          }
+    Children.forEach(firstRow.props.children, (grandchild) => {
+      count += 1
+      if (!grandchild?.props) return // grandchild can be false
+      const { id, stackedSortByLabel, sortDirection, onRequestSort } =
+        grandchild.props
+      if (id && onRequestSort) {
+        const label = stackedSortByLabel || id
+        options.push({ id, label })
+        clickHandlers[id] = onRequestSort
+        if (sortDirection !== 'none') {
+          selectedOption = id
         }
       }
-    )
+    })
     if (!options.length) {
       return null
     }
@@ -184,7 +179,11 @@ class Head extends Component<TableHeadProps> {
     return this.context.isStacked ? (
       this.renderSelect()
     ) : (
-      <thead {...omitProps(this.props, Head.allowedProps)} css={styles?.head}>
+      // 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,8 +22,11 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
+
 import type {
   OtherHTMLAttributes,
+  PropValidators,
   Renderable,
   TableHeadTheme
 } from '@instructure/shared-types'
@@ -62,7 +65,13 @@ type TableHeadProps = TableHeadOwnProps &
   OtherHTMLAttributes<TableHeadOwnProps>
 
 type TableHeadStyle = ComponentStyle<'head'>
+
+const propTypes: PropValidators<PropKeys> = {
+  children: PropTypes.node,
+  renderSortLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+}
+
 const allowedProps: AllowedPropKeys = ['children', 'renderSortLabel']
 
 export type { TableHeadProps, TableHeadStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/Table/Row/index.tsx

@@ -22,13 +22,7 @@
  * SOFTWARE.
  */
 
-import {
-  Component,
-  Children,
-  ContextType,
-  isValidElement,
-  type ReactElement
-} from 'react'
+import { Component, Children, ContextType, isValidElement } from 'react'
 
 import { omitProps, safeCloneElement } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
@@ -39,7 +33,7 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
 import type { TableRowProps } from './props'
-import { allowedProps } from './props'
+import { allowedProps, propTypes } from './props'
 import TableContext from '../TableContext'
 
 /**
@@ -54,6 +48,7 @@ class Row extends Component<TableRowProps> {
   static contextType = TableContext
   declare context: ContextType<typeof TableContext>
   static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
     children: null
@@ -90,7 +85,10 @@ class Row extends Component<TableRowProps> {
           .map((child, index) => {
             if (isValidElement(child)) {
               return safeCloneElement(child, {
-                key: (child as ReactElement<any>).props.name,
+                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]
               })

package/src/Table/Row/props.ts

@@ -23,8 +23,11 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import type {
   OtherHTMLAttributes,
+  PropValidators,
   TableRowTheme
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
@@ -40,11 +43,11 @@ type TableRowOwnProps = {
    * `{condition && <Table.Cell>bla<Table.Cell>}`
    */
   children?:
-    | React.ReactElement<any>
+    | React.ReactElement
     | null
     | undefined
     | boolean
-    | (React.ReactElement<any> | null | undefined | boolean)[]
+    | (React.ReactElement | null | undefined | boolean)[]
 
   /**
    * Controls the hover state of the row.
@@ -64,7 +67,12 @@ type TableRowProps = TableRowOwnProps &
 
 type TableRowStyle = ComponentStyle<'row'>
 
+const propTypes: PropValidators<PropKeys> = {
+  children: PropTypes.node,
+  setHoverStateTo: PropTypes.bool
+}
+
 const allowedProps: AllowedPropKeys = ['children', 'setHoverStateTo']
 
 export type { TableRowProps, TableRowStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/Table/RowHeader/index.tsx

@@ -32,7 +32,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import type { TableRowHeaderProps } from './props'
-import { allowedProps } from './props'
+import { allowedProps, propTypes } from './props'
 import TableContext from '../TableContext'
 
 /**
@@ -47,6 +47,7 @@ class RowHeader extends Component<TableRowHeaderProps> {
   static contextType = TableContext
   declare context: ContextType<typeof TableContext>
   static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
     textAlign: 'start',

package/src/Table/RowHeader/props.ts

@@ -22,8 +22,11 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
+
 import type {
   OtherHTMLAttributes,
+  PropValidators,
   Renderable,
   TableRowHeaderTheme
 } from '@instructure/shared-types'
@@ -46,7 +49,13 @@ type TableRowHeaderProps = TableRowHeaderOwnProps &
   OtherHTMLAttributes<TableRowHeaderOwnProps>
 
 type TableRowHeaderStyle = ComponentStyle<'rowHeader'>
+
+const propTypes: PropValidators<PropKeys> = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  textAlign: PropTypes.oneOf(['start', 'center', 'end'])
+}
+
 const allowedProps: AllowedPropKeys = ['children', 'textAlign']
 
 export type { TableRowHeaderProps, TableRowHeaderStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/Table/index.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { Component, Children, isValidElement, ReactElement } from 'react'
+import { Component, Children, isValidElement } from 'react'
 
 import { safeCloneElement, omitProps } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
@@ -42,9 +42,8 @@ import { Cell } from './Cell'
 
 import type { TableProps } from './props'
 
-import { allowedProps } from './props'
+import { allowedProps, propTypes } from './props'
 import TableContext from './TableContext'
-import { error } from '@instructure/console'
 
 /**
 ---
@@ -56,6 +55,7 @@ class Table extends Component<TableProps> {
   static readonly componentId = 'Table'
 
   static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
     children: null,
@@ -93,17 +93,12 @@ class Table extends Component<TableProps> {
   getHeaders() {
     const [headChild] = Children.toArray(this.props.children)
     if (!headChild || !isValidElement(headChild)) return undefined
-    const [firstRow] = Children.toArray(
-      (headChild as ReactElement<any>).props.children
-    )
+    const [firstRow] = Children.toArray(headChild.props.children)
     if (!firstRow || !isValidElement(firstRow)) return undefined
-    return Children.map(
-      (firstRow as ReactElement<any>).props.children,
-      (colHeader) => {
-        if (!isValidElement<{ children?: any }>(colHeader)) return undefined
-        return colHeader.props.children
-      }
-    )
+    return Children.map(firstRow.props.children, (colHeader) => {
+      if (!isValidElement<{ children?: any }>(colHeader)) return undefined
+      return colHeader.props.children
+    })
   }
 
   render() {
@@ -111,10 +106,6 @@ class Table extends Component<TableProps> {
     const isStacked = layout === 'stacked'
     const headers = isStacked ? this.getHeaders() : undefined
 
-    if (!caption) {
-      error(false, `[Table] required prop caption is not set.`)
-    }
-
     return (
       <TableContext.Provider
         value={{
@@ -142,9 +133,7 @@ class Table extends Component<TableProps> {
           )}
           {Children.map(children, (child) => {
             if (isValidElement(child)) {
-              return safeCloneElement(child, {
-                key: (child as ReactElement<any>).props.name
-              })
+              return safeCloneElement(child, { key: child.props.name })
             }
             return child
           })}

package/src/Table/props.ts

@@ -22,12 +22,18 @@
  * SOFTWARE.
  */
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import type {
   Spacing,
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
-import type { OtherHTMLAttributes, TableTheme } from '@instructure/shared-types'
+import type {
+  OtherHTMLAttributes,
+  PropValidators,
+  TableTheme
+} from '@instructure/shared-types'
 
 type RowChild = React.ReactElement<{ children: React.ReactElement }>
 
@@ -36,7 +42,7 @@ type TableOwnProps = {
    * Provide a screen reader friendly description. Anything passed to this
    * prop will be wrapped by `<ScreenReaderContent>` when it is rendered.
    */
-  caption: React.ReactNode
+  caption?: React.ReactNode
   /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
@@ -75,6 +81,16 @@ type TableProps = TableOwnProps &
   OtherHTMLAttributes<TableOwnProps>
 
 type TableStyle = ComponentStyle<'table'>
+
+const propTypes: PropValidators<PropKeys> = {
+  caption: PropTypes.node.isRequired,
+  children: PropTypes.node,
+  margin: PropTypes.string,
+  elementRef: PropTypes.func,
+  hover: PropTypes.bool,
+  layout: PropTypes.oneOf(['auto', 'fixed', 'stacked'])
+}
+
 const allowedProps: AllowedPropKeys = [
   'caption',
   'children',
@@ -90,4 +106,4 @@ export type {
   // children
   RowChild
 }
-export { allowedProps }
+export { propTypes, allowedProps }

package/tsconfig.build.json

@@ -16,8 +16,10 @@
     { "path": "../shared-types/tsconfig.build.json" },
     { "path": "../ui-a11y-content/tsconfig.build.json" },
     { "path": "../ui-icons/tsconfig.build.json" },
+    { "path": "../ui-prop-types/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
     { "path": "../ui-simple-select/tsconfig.build.json" },
+    { "path": "../ui-testable/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" },
     { "path": "../ui-view/tsconfig.build.json" }
   ]