@instructure/ui-table 8.9.2-snapshot.3 → 8.10.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.10.0](https://github.com/instructure/instructure-ui/compare/v8.9.1...v8.10.0) (2021-09-28)
+
+**Note:** Version bump only for package @instructure/ui-table
+
 ## [8.9.1](https://github.com/instructure/instructure-ui/compare/v8.9.0...v8.9.1) (2021-09-16)
 
 **Note:** Version bump only for package @instructure/ui-table

package/es/Table/Body/index.js

@@ -60,7 +60,7 @@ let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
           isStacked = _this$props3.isStacked,
           headers = _this$props3.headers,
           styles = _this$props3.styles;
-    return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Body.propTypes), 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

package/es/Table/Cell/index.js

@@ -58,7 +58,7 @@ let Cell = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
           styles = _this$props3.styles,
           isStacked = _this$props3.isStacked,
           header = _this$props3.header;
-    return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Cell.propTypes), 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

package/es/Table/ColHeader/index.js

@@ -98,7 +98,7 @@ 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.propTypes), {
+    return jsx("th", Object.assign({}, omitProps(this.props, ColHeader.allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.colHeader,
       style: {
         width

package/es/Table/Head/index.js

@@ -167,7 +167,7 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
           children = _this$props4.children,
           isStacked = _this$props4.isStacked,
           styles = _this$props4.styles;
-    return isStacked ? this.renderSelect() : jsx("thead", Object.assign({}, omitProps(this.props, Head.propTypes), {
+    return isStacked ? this.renderSelect() : jsx("thead", Object.assign({}, omitProps(this.props, Head.allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.head
     }), Children.map(children, child => matchComponentTypes(child, [Row]) ? child : null));
   }

package/es/Table/Row/index.js

@@ -61,7 +61,7 @@ let Row = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
           styles = _this$props3.styles,
           isStacked = _this$props3.isStacked,
           headers = _this$props3.headers;
-    return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Row.propTypes), 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

package/es/Table/RowHeader/index.js

@@ -57,7 +57,7 @@ let RowHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
           children = _this$props3.children,
           isStacked = _this$props3.isStacked,
           styles = _this$props3.styles;
-    return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, RowHeader.propTypes), 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",

package/es/Table/index.js

@@ -93,7 +93,7 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
           styles = _this$props3.styles;
     const isStacked = layout === 'stacked';
     const headers = isStacked ? this.getHeaders() : null;
-    return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Table.propTypes), Table), {
+    return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Table.allowedProps), Table), {
       as: isStacked ? 'div' : 'table',
       margin: margin,
       elementRef: elementRef,

package/lib/Table/Body/index.js

@@ -55,7 +55,7 @@ let Body = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
           isStacked = _this$props3.isStacked,
           headers = _this$props3.headers,
           styles = _this$props3.styles;
-    return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Body.propTypes), Body), {
+    return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.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

package/lib/Table/Cell/index.js

@@ -50,7 +50,7 @@ let Cell = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
           styles = _this$props3.styles,
           isStacked = _this$props3.isStacked,
           header = _this$props3.header;
-    return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Cell.propTypes), Cell), {
+    return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.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

package/lib/Table/ColHeader/index.js

@@ -92,7 +92,7 @@ let ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
           sortDirection = _this$props5.sortDirection,
           scope = _this$props5.scope,
           styles = _this$props5.styles;
-    return (0, _emotion.jsx)("th", Object.assign({}, (0, _omitProps.omitProps)(this.props, ColHeader.propTypes), {
+    return (0, _emotion.jsx)("th", Object.assign({}, (0, _omitProps.omitProps)(this.props, ColHeader.allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.colHeader,
       style: {
         width

package/lib/Table/Head/index.js

@@ -167,7 +167,7 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
           children = _this$props4.children,
           isStacked = _this$props4.isStacked,
           styles = _this$props4.styles;
-    return isStacked ? this.renderSelect() : (0, _emotion.jsx)("thead", Object.assign({}, (0, _omitProps.omitProps)(this.props, Head.propTypes), {
+    return isStacked ? this.renderSelect() : (0, _emotion.jsx)("thead", Object.assign({}, (0, _omitProps.omitProps)(this.props, Head.allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.head
     }), _react.Children.map(children, child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Row.Row]) ? child : null));
   }

package/lib/Table/Row/index.js

@@ -58,7 +58,7 @@ let Row = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
           styles = _this$props3.styles,
           isStacked = _this$props3.isStacked,
           headers = _this$props3.headers;
-    return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Row.propTypes), Row), {
+    return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.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

package/lib/Table/RowHeader/index.js

@@ -49,7 +49,7 @@ let RowHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
           children = _this$props3.children,
           isStacked = _this$props3.isStacked,
           styles = _this$props3.styles;
-    return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, RowHeader.propTypes), RowHeader), {
+    return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, RowHeader.allowedProps), RowHeader), {
       as: isStacked ? 'div' : 'th',
       css: styles === null || styles === void 0 ? void 0 : styles.rowHeader,
       scope: "row",

package/lib/Table/index.js

@@ -94,7 +94,7 @@ let Table = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
           styles = _this$props3.styles;
     const isStacked = layout === 'stacked';
     const headers = isStacked ? this.getHeaders() : null;
-    return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Table.propTypes), Table), {
+    return (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: elementRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "8.9.2-snapshot.3+ddc7880d5",
+  "version": "8.10.0",
   "description": "A styled HTML table component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,24 +24,24 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-color-utils": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-test-utils": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-themes": "8.9.2-snapshot.3+ddc7880d5"
+    "@instructure/ui-babel-preset": "8.10.0",
+    "@instructure/ui-color-utils": "8.10.0",
+    "@instructure/ui-test-utils": "8.10.0",
+    "@instructure/ui-themes": "8.10.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/emotion": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/shared-types": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-a11y-content": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-icons": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-prop-types": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-react-utils": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-simple-select": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-testable": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-utils": "8.9.2-snapshot.3+ddc7880d5",
-    "@instructure/ui-view": "8.9.2-snapshot.3+ddc7880d5",
+    "@instructure/console": "8.10.0",
+    "@instructure/emotion": "8.10.0",
+    "@instructure/shared-types": "8.10.0",
+    "@instructure/ui-a11y-content": "8.10.0",
+    "@instructure/ui-icons": "8.10.0",
+    "@instructure/ui-prop-types": "8.10.0",
+    "@instructure/ui-react-utils": "8.10.0",
+    "@instructure/ui-simple-select": "8.10.0",
+    "@instructure/ui-testable": "8.10.0",
+    "@instructure/ui-utils": "8.10.0",
+    "@instructure/ui-view": "8.10.0",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -50,6 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "ddc7880d5a2f7d4d0596332e8d49cb9b1de68024"
+  "sideEffects": false
 }

package/src/Table/Body/index.tsx

@@ -70,7 +70,7 @@ class Body extends Component<TableBodyProps> {
 
     return (
       <View
-        {...View.omitViewProps(omitProps(this.props, Body.propTypes), Body)}
+        {...View.omitViewProps(omitProps(this.props, Body.allowedProps), Body)}
         as={isStacked ? 'div' : 'tbody'}
         css={styles?.body}
         role={isStacked ? 'rowgroup' : undefined}

package/src/Table/Body/props.ts

@@ -28,8 +28,8 @@ import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
 
 import { Row } from '../Row'
 
-import type { PropValidators } from '@instructure/shared-types'
-import type { WithStyleProps } from '@instructure/emotion'
+import type { PropValidators, TableBodyTheme } from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type TableBodyOwnProps = {
   hover?: boolean
@@ -42,7 +42,10 @@ type PropKeys = keyof TableBodyOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type TableBodyProps = TableBodyOwnProps & WithStyleProps
+type TableBodyProps = TableBodyOwnProps &
+  WithStyleProps<TableBodyTheme, TableBodyStyle>
+
+type TableBodyStyle = ComponentStyle<'body'>
 
 const propTypes: PropValidators<PropKeys> = {
   /**
@@ -63,5 +66,5 @@ const allowedProps: AllowedPropKeys = [
   'headers'
 ]
 
-export type { TableBodyProps }
+export type { TableBodyProps, TableBodyStyle }
 export { propTypes, allowedProps }

package/src/Table/Body/styles.ts

@@ -22,7 +22,8 @@
  * SOFTWARE.
  */
 
-import { TableBodyTheme } from '@instructure/shared-types'
+import type { TableBodyTheme } from '@instructure/shared-types'
+import type { TableBodyStyle } from './props'
 
 /**
  * ---
@@ -34,7 +35,7 @@ import { TableBodyTheme } from '@instructure/shared-types'
  * @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) => {
+const generateStyle = (componentTheme: TableBodyTheme): TableBodyStyle => {
   return {
     body: {
       label: 'body',

package/src/Table/Cell/index.tsx

@@ -66,7 +66,7 @@ class Cell extends Component<TableCellProps> {
 
     return (
       <View
-        {...View.omitViewProps(omitProps(this.props, Cell.propTypes), Cell)}
+        {...View.omitViewProps(omitProps(this.props, Cell.allowedProps), Cell)}
         as={isStacked ? 'div' : 'td'}
         css={styles?.cell}
         role={isStacked ? 'cell' : undefined}

package/src/Table/Cell/props.ts

@@ -25,8 +25,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import type { WithStyleProps } from '@instructure/emotion'
-import type { PropValidators } from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { PropValidators, TableCellTheme } from '@instructure/shared-types'
 
 type TableCellOwnProps = {
   isStacked?: boolean
@@ -39,7 +39,10 @@ type PropKeys = keyof TableCellOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type TableCellProps = TableCellOwnProps & WithStyleProps
+type TableCellProps = TableCellOwnProps &
+  WithStyleProps<TableCellTheme, TableCellStyle>
+
+type TableCellStyle = ComponentStyle<'cell'>
 
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
@@ -58,5 +61,5 @@ const allowedProps: AllowedPropKeys = [
   'textAlign'
 ]
 
-export type { TableCellProps }
+export type { TableCellProps, TableCellStyle }
 export { propTypes, allowedProps }

package/src/Table/Cell/styles.ts

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import { TableCellTheme } from '@instructure/shared-types'
-import { TableCellProps } from './props'
+import type { TableCellTheme } from '@instructure/shared-types'
+import type { TableCellProps, TableCellStyle } from './props'
 
 /**
  * ---
@@ -38,7 +38,7 @@ import { TableCellProps } from './props'
 const generateStyle = (
   componentTheme: TableCellTheme,
   props: TableCellProps
-) => {
+): TableCellStyle => {
   const { textAlign } = props
 
   return {

package/src/Table/ColHeader/index.tsx

@@ -104,7 +104,7 @@ class ColHeader extends Component<TableColHeaderProps> {
 
     return (
       <th
-        {...omitProps(this.props, ColHeader.propTypes)}
+        {...omitProps(this.props, ColHeader.allowedProps)}
         css={styles?.colHeader}
         style={{
           width

package/src/Table/ColHeader/props.ts

@@ -24,8 +24,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import type { PropValidators } from '@instructure/shared-types'
-import type { WithStyleProps } from '@instructure/emotion'
+import type {
+  PropValidators,
+  TableColHeaderTheme
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type TableColHeaderOwnProps = {
   id: string
@@ -42,7 +45,10 @@ type PropKeys = keyof TableColHeaderOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type TableColHeaderProps = TableColHeaderOwnProps & WithStyleProps
+type TableColHeaderProps = TableColHeaderOwnProps &
+  WithStyleProps<TableColHeaderTheme, TableColHeaderStyle>
+
+type TableColHeaderStyle = ComponentStyle<'colHeader' | 'button'>
 
 const propTypes: PropValidators<PropKeys> = {
   /**
@@ -90,5 +96,5 @@ const allowedProps: AllowedPropKeys = [
   'scope'
 ]
 
-export type { TableColHeaderProps }
+export type { TableColHeaderProps, TableColHeaderStyle }
 export { propTypes, allowedProps }

package/src/Table/ColHeader/styles.ts

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import { TableColHeaderTheme } from '@instructure/shared-types'
-import { TableColHeaderProps } from './props'
+import type { TableColHeaderTheme } from '@instructure/shared-types'
+import type { TableColHeaderProps, TableColHeaderStyle } from './props'
 
 /**
  * ---
@@ -38,7 +38,7 @@ import { TableColHeaderProps } from './props'
 const generateStyle = (
   componentTheme: TableColHeaderTheme,
   props: TableColHeaderProps
-) => {
+): TableColHeaderStyle => {
   const { onRequestSort, textAlign } = props
 
   const headerStyle = {

package/src/Table/Head/index.tsx

@@ -182,7 +182,7 @@ class Head extends Component<TableHeadProps> {
     return isStacked ? (
       this.renderSelect()
     ) : (
-      <thead {...omitProps(this.props, Head.propTypes)} css={styles?.head}>
+      <thead {...omitProps(this.props, Head.allowedProps)} css={styles?.head}>
         {Children.map(children, (child) =>
           matchComponentTypes(child, [Row]) ? child : null
         )}

package/src/Table/Head/props.ts

@@ -29,8 +29,8 @@ import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
 
 import { Row } from '../Row'
 
-import type { PropValidators } from '@instructure/shared-types'
-import type { WithStyleProps } from '@instructure/emotion'
+import type { PropValidators, TableHeadTheme } from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type TableHeadOwnProps = {
   isStacked?: boolean
@@ -41,7 +41,10 @@ type PropKeys = keyof TableHeadOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type TableHeadProps = TableHeadOwnProps & WithStyleProps
+type TableHeadProps = TableHeadOwnProps &
+  WithStyleProps<TableHeadTheme, TableHeadStyle>
+
+type TableHeadStyle = ComponentStyle<'head'>
 
 const propTypes: PropValidators<PropKeys> = {
   /**
@@ -58,5 +61,5 @@ const allowedProps: AllowedPropKeys = [
   'renderSortLabel'
 ]
 
-export type { TableHeadProps }
+export type { TableHeadProps, TableHeadStyle }
 export { propTypes, allowedProps }

package/src/Table/Head/styles.ts

@@ -22,7 +22,8 @@
  * SOFTWARE.
  */
 
-import { TableHeadTheme } from '@instructure/shared-types'
+import type { TableHeadTheme } from '@instructure/shared-types'
+import type { TableHeadStyle } from './props'
 
 /**
  * ---
@@ -34,7 +35,7 @@ import { TableHeadTheme } from '@instructure/shared-types'
  * @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) => {
+const generateStyle = (componentTheme: TableHeadTheme): TableHeadStyle => {
   return {
     head: {
       label: 'head',

package/src/Table/Row/index.tsx

@@ -73,7 +73,7 @@ class Row extends Component<TableRowProps> {
 
     return (
       <View
-        {...View.omitViewProps(omitProps(this.props, Row.propTypes), Row)}
+        {...View.omitViewProps(omitProps(this.props, Row.allowedProps), Row)}
         as={isStacked ? 'div' : 'tr'}
         css={styles?.row}
         role={isStacked ? 'row' : undefined}

package/src/Table/Row/props.ts

@@ -31,8 +31,8 @@ import { ColHeader } from '../ColHeader'
 import { RowHeader } from '../RowHeader'
 import { Cell } from '../Cell'
 
-import type { PropValidators } from '@instructure/shared-types'
-import type { WithStyleProps } from '@instructure/emotion'
+import type { PropValidators, TableRowTheme } from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type TableRowOwnProps = {
   hover?: boolean
@@ -45,7 +45,10 @@ type PropKeys = keyof TableRowOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type TableRowProps = TableRowOwnProps & WithStyleProps
+type TableRowProps = TableRowOwnProps &
+  WithStyleProps<TableRowTheme, TableRowStyle>
+
+type TableRowStyle = ComponentStyle<'row'>
 
 const propTypes: PropValidators<PropKeys> = {
   /**
@@ -66,5 +69,5 @@ const allowedProps: AllowedPropKeys = [
   'headers'
 ]
 
-export type { TableRowProps }
+export type { TableRowProps, TableRowStyle }
 export { propTypes, allowedProps }

package/src/Table/Row/styles.ts

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import { TableRowTheme } from '@instructure/shared-types'
-import { TableRowProps } from './props'
+import type { TableRowTheme } from '@instructure/shared-types'
+import type { TableRowProps, TableRowStyle } from './props'
 
 /**
  * ---
@@ -35,7 +35,10 @@ import { TableRowProps } from './props'
  * @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: TableRowTheme, props: TableRowProps) => {
+const generateStyle = (
+  componentTheme: TableRowTheme,
+  props: TableRowProps
+): TableRowStyle => {
   const { hover, isStacked } = props
 
   return {

package/src/Table/RowHeader/index.tsx

@@ -67,7 +67,7 @@ class RowHeader extends Component<TableRowHeaderProps> {
     return (
       <View
         {...View.omitViewProps(
-          omitProps(this.props, RowHeader.propTypes),
+          omitProps(this.props, RowHeader.allowedProps),
           RowHeader
         )}
         as={isStacked ? 'div' : 'th'}

package/src/Table/RowHeader/props.ts

@@ -25,8 +25,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import type { PropValidators } from '@instructure/shared-types'
-import type { WithStyleProps } from '@instructure/emotion'
+import type {
+  PropValidators,
+  TableRowHeaderTheme
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type TableRowHeaderOwnProps = {
   isStacked?: boolean
@@ -38,7 +41,10 @@ type PropKeys = keyof TableRowHeaderOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type TableRowHeaderProps = TableRowHeaderOwnProps & WithStyleProps
+type TableRowHeaderProps = TableRowHeaderOwnProps &
+  WithStyleProps<TableRowHeaderTheme, TableRowHeaderStyle>
+
+type TableRowHeaderStyle = ComponentStyle<'rowHeader'>
 
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
@@ -51,5 +57,5 @@ const propTypes: PropValidators<PropKeys> = {
 
 const allowedProps: AllowedPropKeys = ['children', 'isStacked', 'textAlign']
 
-export type { TableRowHeaderProps }
+export type { TableRowHeaderProps, TableRowHeaderStyle }
 export { propTypes, allowedProps }

package/src/Table/RowHeader/styles.ts

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import { TableRowHeaderTheme } from '@instructure/shared-types'
-import { TableRowHeaderProps } from './props'
+import type { TableRowHeaderTheme } from '@instructure/shared-types'
+import type { TableRowHeaderProps, TableRowHeaderStyle } from './props'
 
 /**
  * ---
@@ -38,7 +38,7 @@ import { TableRowHeaderProps } from './props'
 const generateStyle = (
   componentTheme: TableRowHeaderTheme,
   props: TableRowHeaderProps
-) => {
+): TableRowHeaderStyle => {
   const { textAlign } = props
 
   return {

package/src/Table/index.tsx

@@ -115,7 +115,10 @@ class Table extends Component<TableProps> {
 
     return (
       <View
-        {...View.omitViewProps(omitProps(this.props, Table.propTypes), Table)}
+        {...View.omitViewProps(
+          omitProps(this.props, Table.allowedProps),
+          Table
+        )}
         as={isStacked ? 'div' : 'table'}
         margin={margin}
         elementRef={elementRef}

package/src/Table/props.ts

@@ -30,8 +30,12 @@ import { ThemeablePropTypes } from '@instructure/emotion'
 import { Head } from './Head'
 import { Body } from './Body'
 
-import type { Spacing, WithStyleProps } from '@instructure/emotion'
-import type { PropValidators } from '@instructure/shared-types'
+import type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type { PropValidators, TableTheme } from '@instructure/shared-types'
 
 type TableOwnProps = {
   caption: React.ReactNode
@@ -46,7 +50,9 @@ type PropKeys = keyof TableOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type TableProps = TableOwnProps & WithStyleProps
+type TableProps = TableOwnProps & WithStyleProps<TableTheme, TableStyle>
+
+type TableStyle = ComponentStyle<'table'>
 
 const propTypes: PropValidators<PropKeys> = {
   /**
@@ -89,5 +95,5 @@ const allowedProps: AllowedPropKeys = [
   'layout'
 ]
 
-export type { TableProps }
+export type { TableProps, TableStyle }
 export { propTypes, allowedProps }