@instructure/ui-table 10.26.1 → 11.0.0

package/package.json

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

package/src/Table/Body/index.tsx

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

package/src/Table/Body/props.ts

@@ -22,11 +22,8 @@
  * 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'
@@ -50,12 +47,7 @@ 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 { propTypes, allowedProps }
+export { 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, propTypes } from './props'
+import { allowedProps } from './props'
 import TableContext from '../TableContext'
 
 /**
@@ -47,7 +47,6 @@ 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,12 +22,9 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types'
-
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type {
   OtherHTMLAttributes,
-  PropValidators,
   Renderable,
   TableCellTheme
 } from '@instructure/shared-types'
@@ -55,14 +52,7 @@ 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 { propTypes, allowedProps }
+export { 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, propTypes } from './props'
+import { allowedProps } from './props'
 
 /**
 ---
@@ -49,7 +49,6 @@ 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,20 +22,14 @@
  * 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,
@@ -91,22 +85,8 @@ 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',
@@ -117,4 +97,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { TableColHeaderProps, TableColHeaderStyle }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/Table/Head/index.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { Component, Children, ContextType } from 'react'
+import { Component, Children, ContextType, type ReactElement } 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, propTypes } from './props'
+import { allowedProps } from './props'
 import TableContext from '../TableContext'
 
 /**
@@ -54,7 +54,6 @@ class Head extends Component<TableHeadProps> {
   static contextType = TableContext
   declare context: ContextType<typeof TableContext>
   static allowedProps = allowedProps
-  static propTypes = propTypes
   static defaultProps = {
     children: null
   }
@@ -66,12 +65,15 @@ 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) => {
-        if (grandchild?.props?.onRequestSort) {
-          sortable = true
-          return
+      Children.forEach(
+        firstRow.props.children,
+        (grandchild: ReactElement<any>) => {
+          if (grandchild?.props?.onRequestSort) {
+            sortable = true
+            return
+          }
         }
-      })
+      )
     }
     return sortable
   }
@@ -115,20 +117,23 @@ class Head extends Component<TableHeadProps> {
     > = {}
     let selectedOption: TableColHeaderProps['id'] | undefined
     let count = 0
-    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
+    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
+          }
         }
       }
-    })
+    )
     if (!options.length) {
       return null
     }
@@ -179,11 +184,7 @@ class Head extends Component<TableHeadProps> {
     return this.context.isStacked ? (
       this.renderSelect()
     ) : (
-      // TODO remove 'hover' exclude in v11, its passed down for compatibility with custom components
-      <thead
-        {...omitProps(this.props, Head.allowedProps, ['hover'])}
-        css={styles?.head}
-      >
+      <thead {...omitProps(this.props, Head.allowedProps)} css={styles?.head}>
         {children}
       </thead>
     )

package/src/Table/Head/props.ts

@@ -22,11 +22,8 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types'
-
 import type {
   OtherHTMLAttributes,
-  PropValidators,
   Renderable,
   TableHeadTheme
 } from '@instructure/shared-types'
@@ -65,13 +62,7 @@ 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 { propTypes, allowedProps }
+export { allowedProps }

package/src/Table/Row/index.tsx

@@ -22,7 +22,13 @@
  * SOFTWARE.
  */
 
-import { Component, Children, ContextType, isValidElement } from 'react'
+import {
+  Component,
+  Children,
+  ContextType,
+  isValidElement,
+  type ReactElement
+} from 'react'
 
 import { omitProps, safeCloneElement } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
@@ -33,7 +39,7 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
 import type { TableRowProps } from './props'
-import { allowedProps, propTypes } from './props'
+import { allowedProps } from './props'
 import TableContext from '../TableContext'
 
 /**
@@ -48,7 +54,6 @@ class Row extends Component<TableRowProps> {
   static contextType = TableContext
   declare context: ContextType<typeof TableContext>
   static allowedProps = allowedProps
-  static propTypes = propTypes
 
   static defaultProps = {
     children: null
@@ -85,10 +90,7 @@ class Row extends Component<TableRowProps> {
           .map((child, index) => {
             if (isValidElement(child)) {
               return safeCloneElement(child, {
-                key: child.props.name,
-                // Sent down for compatibility with custom components
-                // TODO DEPRECATED, remove in v11
-                isStacked,
+                key: (child as ReactElement<any>).props.name,
                 // used by `Cell` to render its column title in `stacked` layout
                 header: headers && headers[index]
               })

package/src/Table/Row/props.ts

@@ -23,11 +23,8 @@
  */
 
 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'
@@ -43,11 +40,11 @@ type TableRowOwnProps = {
    * `{condition && <Table.Cell>bla<Table.Cell>}`
    */
   children?:
-    | React.ReactElement
+    | React.ReactElement<any>
     | null
     | undefined
     | boolean
-    | (React.ReactElement | null | undefined | boolean)[]
+    | (React.ReactElement<any> | null | undefined | boolean)[]
 
   /**
    * Controls the hover state of the row.
@@ -67,12 +64,7 @@ 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 { propTypes, allowedProps }
+export { 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, propTypes } from './props'
+import { allowedProps } from './props'
 import TableContext from '../TableContext'
 
 /**
@@ -47,7 +47,6 @@ 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,11 +22,8 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types'
-
 import type {
   OtherHTMLAttributes,
-  PropValidators,
   Renderable,
   TableRowHeaderTheme
 } from '@instructure/shared-types'
@@ -49,13 +46,7 @@ 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 { propTypes, allowedProps }
+export { allowedProps }

package/src/Table/index.tsx

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

package/src/Table/props.ts

@@ -22,18 +22,12 @@
  * SOFTWARE.
  */
 import React from 'react'
-import PropTypes from 'prop-types'
-
 import type {
   Spacing,
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
-import type {
-  OtherHTMLAttributes,
-  PropValidators,
-  TableTheme
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes, TableTheme } from '@instructure/shared-types'
 
 type RowChild = React.ReactElement<{ children: React.ReactElement }>
 
@@ -42,7 +36,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
@@ -81,16 +75,6 @@ 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',
@@ -106,4 +90,4 @@ export type {
   // children
   RowChild
 }
-export { propTypes, allowedProps }
+export { allowedProps }

package/tsconfig.build.json

@@ -16,10 +16,8 @@
     { "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" }
   ]