@instructure/ui-table 8.8.1-snapshot.8 → 8.9.0

package/src/Table/ColHeader/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import { TableColHeaderTheme } from '@instructure/shared-types'
-import { TableColHeaderProps } from './types'
+import { TableColHeaderProps } from './props'
 
 /**
  * ---

package/src/Table/Head/index.tsx

@@ -24,14 +24,12 @@
 
 /** @jsx jsx */
 import { Component, Children } from 'react'
-import PropTypes from 'prop-types'
 
 import {
   omitProps,
   matchComponentTypes,
   callRenderProp
 } from '@instructure/ui-react-utils'
-import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
 import { SimpleSelect } from '@instructure/ui-simple-select'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 import { IconCheckLine } from '@instructure/ui-icons'
@@ -44,7 +42,8 @@ import generateComponentTheme from './theme'
 
 import { Row } from '../Row'
 import { ColHeader } from '../ColHeader'
-import { TableHeadProps } from './types'
+import type { TableHeadProps } from './props'
+import { allowedProps, propTypes } from './props'
 
 /**
 ---
@@ -56,20 +55,8 @@ id: Table.Head
 class Head extends Component<TableHeadProps> {
   static readonly componentId = 'Table.Head'
 
-  /* eslint-disable react/require-default-props */
-  static propTypes = {
-    /**
-     * `Table.Row`
-     */
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    children: ChildrenPropTypes.oneOf([Row]),
-    isStacked: PropTypes.bool,
-    renderSortLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-  }
-  /* eslint-enable react/require-default-props */
+  static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
     children: null
@@ -92,8 +79,7 @@ class Head extends Component<TableHeadProps> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
   componentDidUpdate() {
@@ -103,8 +89,7 @@ class Head extends Component<TableHeadProps> {
         '[Table.Head] The `renderSortLabel` prop should be provided when Table is sortable.'
       )
     }
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
   renderSelect() {
@@ -118,7 +103,7 @@ class Head extends Component<TableHeadProps> {
     const options = []
     const clickHandlers = {}
     // @ts-expect-error ts-migrate(7034) FIXME: Variable 'selectedOption' implicitly has type 'any... Remove this comment to see the full error message
-    let selectedOption = null
+    let selectedOption = undefined
     let count = 0
 
     // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
@@ -165,7 +150,6 @@ class Head extends Component<TableHeadProps> {
                 )
               }
               renderBeforeInput={selectedOption && IconCheckLine}
-              // @ts-expect-error FIXME: Type 'null' is not assignable to type 'string | number | undefined'.ts(2322)
               value={selectedOption}
               onChange={handleSelect}
             >
@@ -198,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.propTypes)} css={styles?.head}>
         {Children.map(children, (child) =>
           matchComponentTypes(child, [Row]) ? child : null
         )}

package/src/Table/Head/props.ts

@@ -0,0 +1,62 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+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'
+
+type TableHeadOwnProps = {
+  isStacked?: boolean
+  renderSortLabel?: React.ReactNode | ((...args: any[]) => any)
+  children?: React.ReactNode
+}
+type PropKeys = keyof TableHeadOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TableHeadProps = TableHeadOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  /**
+   * `Table.Row`
+   */
+  children: ChildrenPropTypes.oneOf([Row]),
+  isStacked: PropTypes.bool,
+  renderSortLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+}
+
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'isStacked',
+  'renderSortLabel'
+]
+
+export type { TableHeadProps }
+export { propTypes, allowedProps }

package/src/Table/Row/index.tsx

@@ -24,14 +24,12 @@
 
 /** @jsx jsx */
 import { Component, Children, ReactElement } from 'react'
-import PropTypes from 'prop-types'
 
 import {
   omitProps,
   matchComponentTypes,
   safeCloneElement
 } from '@instructure/ui-react-utils'
-import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
 import { View } from '@instructure/ui-view'
 
 import { withStyle, jsx } from '@instructure/emotion'
@@ -42,7 +40,8 @@ import generateComponentTheme from './theme'
 import { ColHeader } from '../ColHeader'
 import { RowHeader } from '../RowHeader'
 import { Cell } from '../Cell'
-import { TableRowProps } from './types'
+import type { TableRowProps } from './props'
+import { allowedProps, propTypes } from './props'
 
 /**
 ---
@@ -54,37 +53,19 @@ id: Table.Row
 class Row extends Component<TableRowProps> {
   static readonly componentId = 'Table.Row'
 
-  /* eslint-disable react/require-default-props */
-  static propTypes = {
-    /**
-     * `Table.ColHeader`, `Table.RowHeader` or `Table.Cell`
-     */
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    children: ChildrenPropTypes.oneOf([ColHeader, RowHeader, Cell]),
-    hover: PropTypes.bool,
-    isStacked: PropTypes.bool,
-    headers: PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-    )
-  }
-  /* eslint-enable react/require-default-props */
+  static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
     children: null
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   render() {
@@ -94,7 +75,7 @@ class Row extends Component<TableRowProps> {
       <View
         {...View.omitViewProps(omitProps(this.props, Row.propTypes), Row)}
         as={isStacked ? 'div' : 'tr'}
-        css={styles.row}
+        css={styles?.row}
         role={isStacked ? 'row' : undefined}
       >
         {Children.toArray(children)

package/src/Table/Row/props.ts

@@ -0,0 +1,70 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
+
+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'
+
+type TableRowOwnProps = {
+  hover?: boolean
+  isStacked?: boolean
+  headers?: (React.ReactNode | ((...args: any[]) => any))[]
+  children?: React.ReactNode
+}
+
+type PropKeys = keyof TableRowOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TableRowProps = TableRowOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  /**
+   * `Table.ColHeader`, `Table.RowHeader` or `Table.Cell`
+   */
+  children: ChildrenPropTypes.oneOf([ColHeader, RowHeader, Cell]),
+  hover: PropTypes.bool,
+  isStacked: PropTypes.bool,
+  headers: PropTypes.arrayOf(
+    PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  )
+}
+
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'hover',
+  'isStacked',
+  'headers'
+]
+
+export type { TableRowProps }
+export { propTypes, allowedProps }

package/src/Table/Row/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import { TableRowTheme } from '@instructure/shared-types'
-import { TableRowProps } from './types'
+import { TableRowProps } from './props'
 
 /**
  * ---

package/src/Table/RowHeader/index.tsx

@@ -24,7 +24,6 @@
 
 /** @jsx jsx */
 import { Component } from 'react'
-import PropTypes from 'prop-types'
 
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
@@ -33,7 +32,8 @@ import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { TableRowHeaderProps } from './types'
+import type { TableRowHeaderProps } from './props'
+import { allowedProps, propTypes } from './props'
 
 /**
 ---
@@ -45,20 +45,8 @@ id: Table.RowHeader
 class RowHeader extends Component<TableRowHeaderProps> {
   static readonly componentId = 'Table.RowHeader'
 
-  /* eslint-disable react/require-default-props */
-  static propTypes = {
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-    isStacked: PropTypes.bool,
-    /**
-     * Control the text alignment in row header
-     */
-    textAlign: PropTypes.oneOf(['start', 'center', 'end'])
-  }
-  /* eslint-enable react/require-default-props */
+  static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
     textAlign: 'start',
@@ -66,14 +54,11 @@ class RowHeader extends Component<TableRowHeaderProps> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   render() {
@@ -86,7 +71,7 @@ class RowHeader extends Component<TableRowHeaderProps> {
           RowHeader
         )}
         as={isStacked ? 'div' : 'th'}
-        css={styles.rowHeader}
+        css={styles?.rowHeader}
         scope="row"
         role={isStacked ? 'rowheader' : undefined}
       >

package/src/Table/RowHeader/{types.ts → props.ts}

@@ -22,9 +22,34 @@
  * SOFTWARE.
  */
 
-export type TableRowHeaderProps = {
-  makeStyles?: (...args: any[]) => any
-  styles?: any
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import type { PropValidators } from '@instructure/shared-types'
+import type { WithStyleProps } from '@instructure/emotion'
+
+type TableRowHeaderOwnProps = {
   isStacked?: boolean
   textAlign?: 'start' | 'center' | 'end'
+  children?: React.ReactNode | ((...args: any[]) => React.ReactNode)
 }
+
+type PropKeys = keyof TableRowHeaderOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TableRowHeaderProps = TableRowHeaderOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  isStacked: PropTypes.bool,
+  /**
+   * Control the text alignment in row header
+   */
+  textAlign: PropTypes.oneOf(['start', 'center', 'end'])
+}
+
+const allowedProps: AllowedPropKeys = ['children', 'isStacked', 'textAlign']
+
+export type { TableRowHeaderProps }
+export { propTypes, allowedProps }

package/src/Table/RowHeader/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import { TableRowHeaderTheme } from '@instructure/shared-types'
-import { TableRowHeaderProps } from './types'
+import { TableRowHeaderProps } from './props'
 
 /**
  * ---

package/src/Table/index.tsx

@@ -24,18 +24,16 @@
 
 /** @jsx jsx */
 import { Component, Children, ReactElement } from 'react'
-import PropTypes from 'prop-types'
 
 import {
   matchComponentTypes,
   safeCloneElement,
   omitProps
 } from '@instructure/ui-react-utils'
-import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
 import { View } from '@instructure/ui-view'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 
-import { withStyle, jsx, ThemeablePropTypes } from '@instructure/emotion'
+import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
@@ -46,7 +44,8 @@ import { Row } from './Row'
 import { ColHeader } from './ColHeader'
 import { RowHeader } from './RowHeader'
 import { Cell } from './Cell'
-import { TableProps } from './types'
+import type { TableProps } from './props'
+import { allowedProps, propTypes } from './props'
 
 /**
 ---
@@ -57,48 +56,13 @@ category: components
 class Table extends Component<TableProps> {
   static readonly componentId = 'Table'
 
-  static propTypes = {
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    /**
-     * Provide a screen reader friendly description. Anything passed to this
-     * prop will be wrapped by `<ScreenReaderContent>` when it is rendered.
-     */
-    caption: PropTypes.node.isRequired,
-    /**
-     * Build table via `Table.Head` and `Table.Body`
-     */
-    children: ChildrenPropTypes.oneOf([Head, Body]),
-    /**
-     * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-     */
-    margin: ThemeablePropTypes.spacing,
-    /**
-     * Provide a reference to the underlying html element
-     */
-    elementRef: PropTypes.func,
-    /**
-     * Highlight each row on hover
-     */
-    hover: PropTypes.bool,
-    /**
-     * `auto` lets the browser determine table column widths based on cell content,
-     * while `fixed` forces columns of equal width. `stacked` renders table in one
-     * column to be more readable on narrow screens
-     */
-    layout: PropTypes.oneOf(['auto', 'fixed', 'stacked'])
-  }
+  static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
     children: null,
     hover: false,
-    layout: 'auto',
-    margin: undefined,
-    elementRef: undefined
+    layout: 'auto'
   }
 
   static Head = Head
@@ -109,14 +73,11 @@ class Table extends Component<TableProps> {
   static Cell = Cell
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   getHeaders() {
@@ -158,7 +119,7 @@ class Table extends Component<TableProps> {
         as={isStacked ? 'div' : 'table'}
         margin={margin}
         elementRef={elementRef}
-        css={styles.table}
+        css={styles?.table}
         role={isStacked ? 'table' : undefined}
         aria-label={isStacked ? (caption as string) : undefined}
       >