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

package/src/Table/ColHeader/props.ts

@@ -0,0 +1,94 @@
+/*
+ * 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 type { PropValidators } from '@instructure/shared-types'
+import type { WithStyleProps } from '@instructure/emotion'
+
+type TableColHeaderOwnProps = {
+  id: string
+  stackedSortByLabel?: string
+  width?: string | number
+  textAlign?: 'start' | 'center' | 'end'
+  sortDirection?: 'none' | 'ascending' | 'descending'
+  onRequestSort?: (...args: any[]) => any
+  scope?: 'row' | 'col' | 'rowgroup' | 'colgroup' | 'auto'
+  children?: React.ReactNode | ((...args: any[]) => React.ReactNode)
+}
+
+type PropKeys = keyof TableColHeaderOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TableColHeaderProps = TableColHeaderOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  /**
+   * A unique id for this column. The `id` is also used as option in combobox,
+   * when sortable table is in stacked layout,
+   * and no `stackedSortByLabel` is provided.
+   */
+  id: PropTypes.string.isRequired,
+  /**
+   * A custom string to display as option text in the combobox (instead of
+   * using the `id` prop), when sortable table is in stacked layout.
+   */
+  stackedSortByLabel: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  /**
+   * Control the width of column.
+   */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Control the text alignment in column header
+   */
+  textAlign: PropTypes.oneOf(['start', 'center', 'end']),
+  /**
+   * The string of sorting direction
+   */
+  sortDirection: PropTypes.oneOf(['none', 'ascending', 'descending']),
+  /**
+   * Callback fired when column header is clicked. Parameters: `(event, { id })`
+   */
+  onRequestSort: PropTypes.func,
+  /**
+   * The column header scope attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
+   */
+  scope: PropTypes.oneOf(['row', 'col', 'rowgroup', 'colgroup', 'auto'])
+}
+
+const allowedProps: AllowedPropKeys = [
+  'id',
+  'stackedSortByLabel',
+  'children',
+  'width',
+  'textAlign',
+  'sortDirection',
+  'onRequestSort',
+  'scope'
+]
+
+export type { TableColHeaderProps }
+export { propTypes, allowedProps }

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,8 +75,8 @@ class Row extends Component<TableRowProps> {
       <View
         {...View.omitViewProps(omitProps(this.props, Row.propTypes), Row)}
         as={isStacked ? 'div' : 'tr'}
-        css={styles.row}
-        role={isStacked ? 'row' : null}
+        css={styles?.row}
+        role={isStacked ? 'row' : undefined}
       >
         {Children.toArray(children)
           .filter(Boolean)

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,9 +71,9 @@ class RowHeader extends Component<TableRowHeaderProps> {
           RowHeader
         )}
         as={isStacked ? 'div' : 'th'}
-        css={styles.rowHeader}
+        css={styles?.rowHeader}
         scope="row"
-        role={isStacked ? 'rowheader' : null}
+        role={isStacked ? 'rowheader' : undefined}
       >
         {callRenderProp(children)}
       </View>